Web app
From Online Business Wiki
Click on + to expand the category
Introduction
|
Web Apps framework allows anyone who is not technical to create powerful web-based applications. For example a real-estate listings application can be created where listing can be displayed on any web page. You have complete control on the look and feel and the layout of listings. Listings can also be searched through using a point-n-click search builder functionality which can be added to any web page. Customers searching through real estate items can add them to their "favorites" list and easily retrieve these in the future. You can create just about any Web Apps including book reviews, travel packages, job listings, customer testimonials or car catalogues (as shown on the right). In fact, you can use Web Apps to create almost anything.
|
|
Key Web App Concepts
The most important thing when designing your web app are the items that make up your web app. Each web app is defined by its name and the data fields in its items. Each data field has:
- A name, which should be descriptive of what the field means
- A type, which indicates what type of information the field holds - such as free form text, or a set of options, or a date.
So before you create your web app, you would first consider what information you need to store. For example, let's consider a Real Estate agent wanting to create searchable listings of properties. An item in this case would be a property, so the information we might want to store would include:
- Address - Multiple lines of Text
- Price - Text
- Photo - Image
- Description - Text
- Date Available - Date
- Property type List, e.g. Freestanding, Unit, Townhouse
- Number of bedrooms, List, e.g. Studio, 1,2,3,4,5
Every Web App Item has a default "Name" field.
If in the future you think of more fields to add (e.g. Agent Name) to your web app you can do so easily. The only thing that cannot be changed is the field type - once a field is set as type "Date", for example, it cannot be changed.
Creating a Web App
Creating a Web App is simple. Go to Admin -> Build Web Apps and click the Build a new Web App link. Give your Web App a name, for example Property Listings
We'll create the Web App described in the section above as an example. For each field, we type in the name and select its type.
Now we can customize how to display the property listings. There are two templates that we can use to customize the layout of our web app items on our web pages. These include the browse-able list or the details template which is used to display a single web app item. First we'll customize the list template to show the property type, the number of bedrooms, an excerpt from the description and the price.
Now in the details template we will display all of the details of the property, including the picture of the property and the full description.
Note: Unlike other forms of content, Web Apps have a third template which is a backup list template. Often you may want to display the list of items for a particular web app on your home page as well as another web page. You can use the list template and the backup list template to display the same web app items differently on various web pages.
Deleting a web app
To delete a web app, all you have to do is go to Admin -> Build Web Apps -> click on the name of the web app you wish to delete and then click Delete button on the bottom of that window.
Linking to the detailed view from the list view
By default, the item name and the image, link to the detailed view from the list view. Sometimes you may want to not show these or disable the links and create different links to the detailed view (to disable the links you simply add _nolink to the tag to make something like {tag_image_nolink} from {tag_image}).
So, to create an alternative link you can use {tag_button} in your list view. Here is the format you need to use -
{tag_button,Your Text} - replace Your Text with your own text, e.g. "Click for more information"
Another way to link to it is to use the following URL inside the list view -
<a href="/CustomContentRetrieve.aspx?ID={tag_itemid}">Your Text</a>
The above link can be used for linking text, images or anything else.
Linking two web apps together
The way to create a relationship between the two web apps is through use of Data Source field type. If you go to Admin -> Build Web Apps -> Add Custom fields to Web App, you will see that there is a field type there called Data Source. A field of this type will allow you to link two web apps together.
When you select this field you will be able to choose the web app, you wish to link the web app you're in, from the Data Source dropdown.
Finally, once you start creating the web app items in that web app, you will be able to select the items from the other web app.
Managing a Web App
Once we've created our Web App we are ready to add items to it. As this is a Real Estate web app, we are now ready to add property listings. In fact once you create your web app and customize it, you are unlikely to work with the web app again. Hence forward you will be dealing with Web App Items, e.g. you will be adding and removing properties.
Adding Items
First we need to add a new property. We go to Modules -> Web Apps -> Property Listings and then click Create a new Web App item link.
First we provide a name for the Property Listing in the default "Name" field. Now fill in each of the other details, completing the listing for that property.
Making Web App Items Browse-able on your site
Now that you have created your web app, you can enable your clients to browse or search your items on your site. You can:
- Insert a single web app item on a web page
- Insert a list of web app items on a web page
- Add a search box so visitors can search through web app items
Adding a single Web App item to a web page is a simple process. Select any Web App Item and click Add item to a web page link and choose the web page to drop the module on.
To insert a list of Web App Items, go to Website -> Web Pages and choose the web page you want your list of items to be on. You may have already created a web page called "Properties". Click on the web page and go to the Editor tab. Now click on the Module Manager and choose Web Apps - in this case "Property Listings"
Now choose your display requirements, and click OK.
Displaying Web Apps
Web app items can be displayed as a list of all items according to the list layout, individual items and all items that belong to a particular category.
Displaying web apps that belong to a category
Web app items can be classified and then can be displayed according to their classification. The easiest way to insert a web app module that will display a list of web apps that belong to a certain category is to go to a web page where you want to display that module and click on Module Manager.
The module manager will open in the separate frame on the right. You need to click on Web Apps -> Web apps -> choose your web app form the "Select Web App" dropdown -> choose All items in a category classification from "Select Display Criteria" dropdown -> select the category name from "Choose Classification Category". Finally click insert to insert the web app module into a web page.
Making Items Searchable
Go to Website -> Web Pages and choose the web page you want your search box to be on. We've called this web page "Property Search". Click on the web page and go to the Editor tab, then click on the Module Manager and choose Web App Search.
Choose your web app - in this case "Property Listings", and click OK.
This search form will enable your customers to search through all the Properties. You can customize the search form significantly. You can do this by removing the fields you don't want to search on, and include only the ones you want to search on.
Note: The search results will appear under the search form. Refer to advanced features to have them appear on a separate web page.
Web App Search
How does the searching work
Its important to understand how the search works when customers search through the items of a particular web app.
By default all search forms contain a Keywords field. This field will search through the Name and Editor content of the web app item. You can remove this field from the search, although it is not recommended.
When the search query is constructed, an AND is used between the criteria of each field. However when multiple values are selected from one field such as a checkbox or listbox field, then the conditions in the field are ORed whilst conditions between fields are ANDed.
Looking at the criteria selected in the web app search form below, the search would retrieve all Training consultants who are (either in VIC OR NSW) AND have expertise in Agriculture.
Placing Search Results on a different web page
By default, the search results for a web app search module are displayed on the same web page where the search module was inserted. You will notice {module_webappsresults} appended below the web app search form. However you can customize and have the search results appear on a different web page. If you add the module to a template, then you must customize the form to specify the web page to display the results on.
To customize, add your web app search form to any web page and go into the HTML view. Locate the opening with this action URL:
action="/Default.aspx?CCID=X&FID=Y&PageID={module_oid}"
Replace PageID={module_oid} with ID=URL of your results page. Your web page URL must start with a slash (/). E.g.
action="/Default.aspx?CCID=X&FID=Y&ID=/Results.htm"
You can customize the Web App search results:
{module_webappsresults,notUsed,targetFrame,useBackup}
notUsed - leave empty
targetFrame - e.g. _blank. Specify the frame you want the item to open in
useBackup - specify True if you want to use the backup list template or leave empty
e.g.
To use the backup list template when displaying search results:
{module_webappsresults,,,true }
Advanced web app search customization
In an earlier topic we discussed how to easily add a web app search form to any web page. You can make a number of customizations to this search form:
- You can re-arrange the fields to suit yourself
- You can add your own CSS classes to each field
- You can remove fields that you don't want to appear
- You can change the format of any date or numeric field. By default these fields appear as a range in the search form, e.g.:
This the Default search layout for date and numeric fields
In this example the Price field has been changed from a range to a drop down.
By default number and date fields will appear as:
Price between
<input class=cat_textbox maxLength=255 name=CAT_Custom_11125_Min> And
<input class=cat_textbox maxLength=255 name=CAT_Custom_11125_Max>
You can change this to:
Price between
<select class=cat_textbox maxLength=255 name=CAT_Custom_11125>
<option value=”0,10000”>Up to $10,000</option>
<option value=”10001,20000”>$10,001-$20,000</option>
<option value=”20001,30000”>$20,001-$30,000</option>
<option value=”30001,40000”>$30,001-$40,000</option>
</select>
You can similarly apply the above technique to date fields:
Manufacture Date
<select class=cat_textbox maxLength=255 name=CAT_Custom_11126>
<option value=”1-Jan-1900,31-Dec-1989”>Older than 1990</option>
<option value=”1-Jan-1990,31-Dec-1999”>1990-1999</option>
<option value=”1-Jan-2000,31-Jan-2010”>Newer than 2000</option>
</select>
With date fields you can also use this approach:
Manufacture Date
<select class=cat_textbox maxLength=255 name=CAT_Custom_11126>
<option value=”today”>Today</option>
<option value=”yesterday”>Yesterday</option>
<option value=”lastweek”>Last Week</option>
<option value=”lastmonth”>Last Month</option>
</select>
Note: Ensure you use the correct name for each field. With date and numeric fields the two fields associated for each field end with _Min and _Max. If you are using the above approach then this ending is removed.
Making the search match exact words
By default, the search will match the partial words. Example is the case where you have a custom field with values of Male and Female. If someone selects Male, the word Female will also be included in the search.
You can avoid this by appending &Exact=true to the form's action URL.
Example:
<form action="/Default.aspx?CCID...&Exact=true">
Please note that this option doesn't apply to the "keywords" field.
Changing the No results found message displayed when web app item is not found
{module_webappresults} is the module that displays the web app search results. When the web app item is not found, the following message is displayed:
“No results found.”
Firstly, the web app results will be wrapped by a div so you can easily target the item using JavaScript. For an example:
<div id="webappsearchresults3785" class="webappsearchresults">No results found.</div>
Please note that the id of the div changes according to the web app. If you wish to change the no result message for this web app simply follow these steps:
<script type=”text/javascript”>
var div = document.getElementById(‘webappsearchresults3785’);
If (div.innerHTML == “No results found.”) {
div.innerHTML = “There is definitely no results!”; // or do something else
}
</script>
Advanced Topics and Techniques
Web App Module Parameters
By default the List template is used when displaying Web App items on a web page. You can make small changes to this module in order to customize the list of Web App items displayed on a web page.
For details of this see the modules article
The previous and next links can be customized using CSS. Each link has its own custom CSS class. To see the CSS class assigned to these links view the web page source where these links appear. The CSS class name format is: WebAppIDPrev and WebAppIDNext where ID is the internal ID assigned to your Web App.
Working with Images and Flash files
If you've added an Image field to your web app, then all image fields will have a link if the tag is used in the list template. The following is a list of advanced options relating to image fields:
- To remove the link behind image tags simply append _NoLink e.g. change {tag_myimage} to {tag_myimage_nolink}
- You can set a width and height for every image used for web app items. When you are adding a new web app item and have picked the image, make the following change: /Images/MyImage.png to /Images/MyImage.png,200,100.
- You also put flash files (.swf) in any image field. The system will correctly display the flash. You can also use the same width/height technique discussed in the previous point for your flash files.
Using Alternate Row CSS tag
When displaying a list of web app items on a web page you can use a technique that applies an alternating style sheet class for each alternating row.
For example, imagine a simple list template for a particular web app:
<div class=”{tag_rowcss,myclass}”>{tag_name}</div>
When the list of items for this web app is displayed, the above template will render out as follows:
<div class=” myclass”>Item 1</div>
<div class=” myclass_alternate”>Item 2</div>
<div class=” myclass”>Item 3</div>
<div class=” myclass_alternate”>Item 4</div>
Note: The style sheet class “myclass” can be any class name that you specify.
Web App Customer Input Form
The Web App Customer Input Form allows your customers to securely submit items for any Web App via your website.
Implementing this functionality is extremely easy to do. Simply insert this form into any secure web page.
Please keep in mind that all items are disabled when submitted and must be enabled/approved by you. To be notified when new items are submitted ensure you choose the Role Responsible when creating your Web App (Admin -> Build Web Apps).
Using Web App Item Name in URLs (SEO Friendly)
All Web App item URLs in the system are in the format of: http://www.yourdomain.com/CustomContentRetrieve.aspx?ID=XYZ. Although the URL for every Web App item is permanent and does not change, you can choose to use a different format for your item URLs to ensure a higher level of SEO friendliness.
When creating links to your Web App items from any web page or your navigational menus you can use the following format:
http://www.yourdomain.com/_webapp_12345/WebAppItemName
So if your Web App item is called Grilled Fish Recipes and it's ID is 1234, then your URL would be:
http://www.yourdomain.com/_webapp_1234/Grilled Fish Recipes
Web Apps Addresses / Store Locator
You can give each web app item its own address. Web Apps Addresses allows you to create functionality such as Store Locator with ease. Giving customer the ability to search for items within a certain radius.
Adding ability for CUSTOMERS to CREATE, EDIT and PUBLISH web apps
Creation
You create a web page and put that page within a secure zone. Then you click on Module Manager, go to web apps, select "Web App Input form for customers", select the Web App form and insert it into a page. Now you can customize the look and feel of the form.
Giving the customer ability to assign a web app item to a category
You need to add the following code to your web app creation form manually by going to the page it resides on and going into the HTML mode and adding it to the form. Please note reinserting the web app input form will not add this feature to it.
This is the code you need to place into the form to give customer ability to choose 1-category only:
<select name="cat_category">{module_categorylist}</select>
This is the code you need to place into the form to give customer ability to choose more than 1-category:
<select multiple="true" size="4" name="cat_category">{module_categorylist}</select>
Editing
To access the edit layout, you need to go to a web page that's within a secure zone (usually you'd use the same web page for entry and editing) and you need to place "Web App Items submitted by a customer (must be logged in)" module on that page using a Module Manager. You also need to place {tag_edit} inside the list view which will render the edit link. Now when customer logs in to that secure zone and lands on that web page, they will see the "Edit" links next to their Web Apps. When they click on edit link, the Edit Layout will come up. To populate the edit layout with edit form you need to click on Reset To Original button and save the layout.
Please note: The character limit of web app fields is 1024 characters and the only field that does not have the limit is the editor window.
Attaching Files
To enable file upload feature in the web app, you will have to follow these steps.
1.You will have to tick the "Allow Upload File" check box for that web app and you will see a drop down list which shows you the folder where the uploaded file is going to be saved. If you would like to assign your own folder, you can simply select the folder name in that drop down list and hit save button.
2.Then you will need to create a custom file with the field type "Image". Now insert the web app input form into the page, and you will notice that the custom field (field type Image) will create an upload control where the users can upload their content to your website.
If you would like to create more upload controls then simply create more custom fields with field type "image".
Assigning a web app item to the customer
If a customer creates a web app item, that item is automatically assigned to them and when they login into a secure zone they'll be able to see that item and edit it.
Site admin can also assign the web app item to a particular customer by going to Modules -> Web Apps and clicking on the item. Then they need to click on Show More Options and click Edit under Submitted By.
Admin then needs to type in the full name into the Entity Picker or just a part of the name and click Search. The search will then display the results and you can select the customer you want to assign the item to from the list by clicking on their name.
Then, back in the Item Details you will see to whom the web app item is assigned.
Directing the user to a different page after submitting a new web app item
You can alter the form submission process used to create new Web App items in order to send them to a different page as opposed to the standard confirmation page. To do this, look at the form used to create new Web App items. Find the <form> tag and add in the following to the action url (action="..."):
&PageID=/Results.htm
In this case, Results.htm is the page you want the customer to land on after creating a new web app item.
Opening a web app item detail in new window
Firstly, there is a neat way of composing a link to a detailed view of a web app item from a list view. The way to do it is to use {tag_itemid} and compose a URL with it.
<a href="/CustomContentRetrieve.aspx?ID={tag_itemid}">See Details</a>
If you want to open that link in the new window then here is the HTML code you need to use:
<a onclick="wopen('/CustomContentRetrieve.aspx?ID={tag_itemid}', 'popup', 640, 480); return false;" target="popup"
href="/CustomContentRetrieve.aspx?ID={tag_itemid}">See Details </a>
Please note that this window will be 640x480px. You can adjust the size by changing the height and width in the above code.
And here is the JavaScript you need to place into the Detailed Web App Layout"
<script>
<!--
function wopen(url, name, w, h)
{
w += 32;
h += 96;
var win = window.open(url,
name,
'width=' + w + ', height=' + h + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=no, resizable=no');
win.resizeTo(w, h);
win.focus();
}
// -->
</script>
Web app pagination
Note that the web app pagination is automatically rendered when you limit the number of items on the page. The pagination is rendered as an unordered list. Below is the CSS code that will style the pagination:
Note that 5354 in the ID is a web app ID and will be different from web app to web app.
/* Web App Pagination */
#webapp5354pagination, #webapp5354pagination ul {
padding: 0;
margin: 0;
list-style: none;
}
#webapp5354pagination li {
float:left;
padding:3px;
}
li.pag-next {
padding-left: 5px;
}
