Create HTML Views

Description

One of the most powerful feature in Zoho Creator is support for creating HTML views. The HTML view enables you to create customized views by combining HTML code and Deluge Script. You can create a static HTML page as a view and use this page to deliver dynamic content from your database using Deluge Script. The HTML Builder provides an intuitive drag-n-drop user-interface to easily create the required HTML view. Knowledge of HTML is not necessary. You can use the HTML view to,

• Create dashboard pages that contains a list of reports to provide your users with quick access to the information they need. For example, display the required reports on the left side of the page, and a table that contains information about the application on the right side.
• Create customized bills and invoices based on the data stored in your application.
• Embed forms, views and third party widgets in your HTML view and generate dynamic views by passing form data as parameters to the view.

Steps in defining a new HTML view

1. Select Views -> New View option in Edit mode.
2. Select the HTML page icon as the view type.
3. In the Specify View Name text box, specify a meaningful name for the view. The view name can contain alphanumeric and special characters.
4. The Place this view under list box will be displayed if you have added new sections from the Customize tab. Refer the topic, Layouts for more information. Select the section under which this view will be placed in live mode. By default, the view will be placed under "Home".
5. Click Done to create the HTML view.
6. The Script Builder will be displayed with the HTML, Embed and Deluge tasks on the left-side and the text-editor on the right-side.
7. You can create your view based on a template by selecting the Choose Template button or create your own view from scratch by inserting HTML/Deluge Tasks, Embedding Forms/Views and Embedding Widgets. If you are well-versed in HTML and Deluge Scripting, you can straight away use the Free-flow script tab to write the HTML view.
8. Click Save Script to save the view.
9. Use the Show Preview tab to preview the created view.

Inserting HTML and Deluge Tasks

1. Drag-n-drop the Insert Html task to insert HTML tags to your view.
2. Click on the Edit button and select the Rich text mode or the Plain text mode from the Insert HTML dialog, to insert the required HTML.
3. Use the Insert Expression button to add expressions to your view, using the Deluge Expression Builder.
   
4. Drag-n-drop the Deluge Tasks to fetch and display the records at the required positions in your view. For example, in the screen-shot given below, the for each deluge statement is placed after the table row header. For each iteration of the add new income form, a new row is created to display the Date and Amount stored in each record (r).
   

Embedding Form/View

The Embed Form/View task enables you to embed Zoho Creator forms and views within your HTML view.

To do this,

1. Drag-n-drop the Embed -> Form/View task to embed Zoho Creator forms and views within the HTML view.
2. The Embed dialog lists all the applications created in your accout, in the Select Application list. Select the required application.
3. Select the Form componenet to embed a form or the View component to embed a View.
4. Select the Form/View to be embedded in the HTML view.
5. The Form Embed properties enables you to specify if the form header is required, specify the next url to take you to another page on form submit, specify customized success message and customized submit/reset button display names.
6. Click Done to add the embed code to the HTML builder, with the given configurations.
   

   

7. The Form embed code will be inserted in the HTML view within the <div> tag, as given below:

   htmlpage Sample_HTML_View()
   displayname = "Sample HTML View"
   content
   <%{%>
   <div elName='zc-component' formLinkName='Monthly_Report_Pie_Chart' params='zc_Header=true&zc_SuccMsg=Data Added Sucessfully!&zc_SubmitVal=Submit&zc_ResetVal=Reset'>Loading Form...</div>
   <%}%>

8. While embedding a view, view properties provides options to enable/disable the display of view header, footer, secondary header and add/edit record links, as shown below:

   

9. The View embed code will be inserted in the HTML view within the <div> tagas given below, based on the options selected.

   htmlpage Sample_HTML_View()
   displayname = "Sample HTML View"
   content
   <%{%>
   <div elName='zc-component' viewLinkName='Expense_Report_By_Category' params='zc_Header=true'>Loading View...</div>
   <%}%>

Embedding Widgets

Widgets are embeddable chunks of code that can be embedded within an HTML page. For example, advertisements, links and images from third party sites. Generally widgets are third party originated and are also known as modules, snippets, and plug-ins.

To insert widgets to your HTML view,

1. Drag-n-drop the Embed -> Widget task from the left-side tree to the editor area.
2. Specify the width, height, scrolling, iframe border options and widget URL in the Emded widget dialog.
3. Click Done to add the embed widget code to the HTML builder.
   
4. The embed widget code will be inserted in the HTML view within the <iframe> tag as given below, based on the options selected.

Adding Parameters to the HTML View

To pass parameters to the HTML view, use the Add Parameter button displayed in the top-right corner of the text editor. The specified parameters will be added to the view definition, as shown in the format given below. In the following code, two parameters named From and To are passed to the "Expense Report By Date" HTML view.

About HTML View Tags

1. The tags used to begin and end the HTML view will be in the following format. For example, in the HTML view given below, "Sample HTML View" is the name of the html view. The view will insert a table with caption "Income vs Expenditure"

2. The tag that will set the Deluge tasks apart from the HTML are the <% and %> tags. If Deluge expressions are used within an HTML, the <%= and %> is used to differentiate it from the HTML. For example, in the code given below:

- the Deluge for each task is inserted in between the HTML task to iterate each record, held by the variable r in the add_new_income form.
- the Deluge for each task is enclosed within the <% and %> tags to differentiate it from the HTML tags.
- for each iteration, a new row is created using the <tr> </tr> html tags.
- r.Date_field and r.Amount are the Deluge expressions used to display the data for each column in the row. The Deluge expression is enclosed within the <%= and %> tag.

Sample HTML View

Let us take the example of a Feedback Application that facilitates the creation and assigning of bugs related to software. The Submit Feedback form given below is used to submit and assign issues to team members belonging to a module. The Module Name is a lookup of the Modules form and the Assign To field is a lookup of the Team Member form.

Given below is the screen-shot of a list view that displays the issues submitted through the above form and assigned to team members

But assume that you want to create a summary view of the total issues assigned to each module or total issues assigned to each team member. This is not possible with the default views supported by Zoho Creator like list view, grid view, or summary view. The HTML view can be used in such scenarios to create customized mashup pages using a combination of HTML and Deluge Scripting.

A simple HTML view that displays the summary of issues assigned to a specific module/team member.

HTML View Code

The following code creates the HTML view shown above. The HTML tasks ( in green color) and Deluge tasks (in blue color ) are inserted to create the required view. The <% and %> tags are used to identify the Deluge tasks. If Deluge script is used within an HTML, the <%= and %> is used.