O3 – Web Apps Advanced Part 1
In Web Apps core, you learnt the fundamentals of building a Web-App. Here we’ll build on
that with some more advanced customization and reinforcement of concepts.
Customizing
Web
App
Search
Boxes
Pu9ng
Search
Boxes
and
Search
Results
together
Allowing
customers
to
view
and
edit
their
own
items
Making
Customers
Pay
for
their
lisCngs
Revision: Web App Search
Search capabilities are built into every Web App. Insert
the search form onto a web page or template and you’re
ready to get started with customization!
Module Manager
Insert HTML
onto Webpage
Turning Ugly Into Beautiful
Standard Web-App Search Form
only has textboxes to enter your
search critieria: unusable!
We want to provide guidance to the
user. Look at these examples:
http://planmyplay.co.nz
http://downloadadeal.com.au
Customizing Web App Search
• Add
Web
App
Search
to
a
‘Search
Page’
• Get
your
hands
dirty
with
HTML
• Edit
the
CSS/Layout
(we
can’t
help
you
there)
Structure of a Search Box
Don’t Edit This – contains FormID and Action
Form
Name
and
AcCon
connecting your form with backend
Input
Field
Types
and
Names
Javascript
Form
Checker
Remove these or change their input types
(by default search forms will come with every field in the web-app)
Edit with care
Customizing Web App Search
• • • • Remove
all
the
fields
you
don’t
need
Convert
the
remaining
fields
to
dropdowns
NoCce
how
numeric
fields
have
a
min/max
input
field
Minimizes
‘User
Errors’
Our 3 Remaining Fields (Keywords, Make, Driveaway Price)
<tr>
<td><label for="CAT_txtKeywords">Keywords</label><br />
<input type="text" name="CAT_txtKeywords" id="CAT_txtKeywords" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_73239">make</label><br />
<input type="text" maxlength="255" name="CAT_Custom_73239" id="CAT_Custom_73239" class="cat_textbox" /></td> </tr>
<tr>
<td><label>driveway_price Min/Max:</label><br />
<input type="text" maxlength="255" name="CAT_Custom_73240_Min" id="CAT_Custom_73240_Min" class="cat_textbox" /> And <input
type="text" maxlength="255" name="CAT_Custom_73240_Max" id="CAT_Custom_73240_Max" class="cat_textbox" /></td>
</tr>
Converting max/min into 1 Dropdown
Default HTML Code for
<tr>
<td><label>driveway_price Min/Max:</label><br />
<input type="text" maxlength="255" name="CAT_Custom_73240_Min" id="CAT_Custom_73240_Min" class="cat_textbox" /> And <input type="text"
maxlength="255" name="CAT_Custom_73240_Max" id="CAT_Custom_73240_Max" class="cat_textbox" /></td>
</tr>
End Result:
<tr>
<td><label>driveway_price Min/Max:</label><br />
<select id="CAT_Custom_73240" name="CAT_Custom_73240">
<option selected="true" value="0,10000000">Any</option>
<option value="10000,20000">$10,000 - $19,999</option>
<option value="20000,29999">$20,000 - $29,000</option>
<option value="30000,39999">$30,000 - $39,999</option>
<option value="40000,49999">$40,000 - $49,999</option>
<option value="50000,1000000">$50,000 +</option>
</select>
</td>
</tr>
CSS Customization is up to you
now…
Using WebApp Search Boxes Creatively
• Create
a
‘Find
Similar
Items’
box
by
using
Web
Apps
form.
• Example:
Centro
Property
(not
the
pre9est
site
but
technically
advanced)
http://centroproperty.com.au
Example Code (Combining JS and Tags)
By this Suburb: Other properties in Guildford
<tr>
<td bgcolor="#f6f3f0"><strong>By this Suburb: </strong><br />
<a class="searchitem" onclick="suburbsearch();"> Other property's in Guildford</a></td>
</tr>
Other properties in {tag_suburb}
SuburbSearch() Javascript function
function suburbsearch() {
var frmSuburb = document.getElementById("frmSuburbSearch");
frmSuburb.submit();
}
frmSuburb form
<form id="frmSuburbSearch" name="catcustomcontentform44336" method="post" action="/Default.aspx?
CCID=743&amp;FID=7619&amp;ID=/buying/searchresults.htm”>
<input type="hidden" value="On The Market" name="CAT_Custom_16175”>
<input type="hidden" name="CAT_Custom_15963" value="Guildford”>
</form>
value= {tag_suburb}
{tag_suburb}
Allowing Customers To Add and Edit Items
We might’ve touched on this in the Core Web-Apps Course.
1. Create a backup List template with {tag_edit} – this renders into an edit link.
Allowing Customers To Add and Edit Items
2. Create a New Page and use the Module Manager to add a list of Web-App items
belonging to the current user. Use ‘Backup Template’ can be found in the customize
options.
3. You’ll also need to make the page secure to force the user to
Login before they can access the page
Charging Customers For Listing
• Example:
hVp://www.searchmysuburb.com.au
Look at their instructions…
What you need to do to enable this:
Step
1
–
Create
a
Secure
Zone
for
Members
(RegistraCon
Page)
Step
2
–
Add
Login
Box
How to do this?
Step
3
–
Add
a
LisCng
Submission
Form
(with
Payment)
Step
4
–
Setup
Web
App
on
Website
Charging Customers For Listing
Tick Payment Required in Customer Options (Step 1 of Build Web App)
When you insert the Web-App Submission Form it will have credit card payment
options enabled.
Charging Customers For Listing
You’ll need to customize the form so the ‘Amount’ field is already filled and cannot
be changed
<td><label for="Amount">Amount</label><br />
<input type="text" readonly="readonly" value="20" name="Amount" id="Amount"
class="cat_textbox" />
All Links to the Listing Form page (with payment) need to point to the
worldsecuresystems.com domain to make the payment form secure:
Thank You!
Questions?