Creating Pages

Steps in defining a New Page

1. Select Create New - Page option in Edit mode.
2. In the New Page screen, specify a meaningful name for the page. The page name can contain alphanumeric and special characters.
3. The Place this page under list box will display the sections under which this page will be placed in live mode. New sections can be added from the Settings -> Customize tab. Refer the topic, Sections for more information.
4. Click Create to create the page.
5. 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.
6. 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/Reports 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 page.
7. Click Save Script to save the page.
8. Use the Show Preview tab to preview the created page.

Inserting HTML and Deluge Tasks

• Drag-n-drop the Insert Html task to insert HTML tags to your page.
• 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.
• Use the Insert Expression button to add expressions to your page, using the Deluge Expression Builder.

• Drag-n-drop the Deluge Tasks to fetch and display the records at the required positions in your page. 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).

Inserting image in HTML view

Uploaded images in a form using the Upload field type can be referred in a HTML view.The image/file URL which is stored via the file upload field will be in the format given below:

In your HTML view, you can generate the image URL of the above kind and display it in the HTML view. Below is the sample HTML that you can use in your HTML view.

To fetch the images from your form and insert it in your HTML view, you can use the fetch records task as shown in the format given below, where Input.ImageName is the parameter defined in the HTML view.

Embedding Form/Report

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

• To do this,
• Drag-n-drop the Embed -> Form/Report task to embed Zoho Creator forms and views within the HTML page.
• The Embed dialog lists all the applications created in your accout, in the Select Application list. Select the required application.
• Select the Form component to embed a form or the Report component to embed a report.
• Select the Form/Report to be embedded in the HTML page.
• 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.
• Click Done to add the embed code to the HTML builder, with the given configurations.

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

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

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

• To print a report embedded in the HTML page, place a linked text in the format given below:
  <a href=”http://creatorexport.zoho.com/appOwnerName/appLinkName/print/viewLinkName“>Print </a>
• To export a report, embedded in the HTML page, in CSV format you can place a linked text in the format given below:
  <a href=”http://creatorexport.zoho.com/appOwnerName/appLinkName/csv/viewLinkName“>CSV Export </a>

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 page,

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 page within the <iframe> tag as given below, based on the options selected.

Adding Parameters to the Page

To pass parameters to the HTML page, 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 page.

If no parameters are passed to an HTML view, the parameter will be set as “null“. You need to add a code to set a parameter. For example, add the following code to your HTML view, to set the parameter to current date, if the parameter is equal to “null”.

Note:

Format to pass paramater to an embedded HTML page.

• https://creator.zoho.com/yourname/your_project/view-embed/Your_View_Name/your_parameter=param value

About Page Tags

1. The tags used to begin and end the HTML page will be in the following format. For example, in the HTML page given below, "Sample HTML View" is the name of the html page. The page 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 Page

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 report 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 page that displays the summary of issues assigned to a specific module/team member.

HTML Page Code

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