Creator Help

Creating Pages

Create a new Page

  1. Edit your application.
  2. Click Create New on the left, then select Page. You will be taken to the New Page screen.
  3. Enter a name for your Page. It accepts letters, numbers, and special characters.
  4. Define the Section under which you want to place this Page. You may:
    • Choose to create a New Section. This is the default behaviour.
    • Select one of the existing Sections in your app
  5. Click Create. You will be taken to the Page builder, where you can:

    The Page builder offers two modes: the Script Builder and Free Flow Script. By default, you're shown the Script Builder - a drag-and-drop interface that displays the HTML, Embed and Deluge tasks on the left and the text editor on the right. If you are well versed in the syntax for adding Deluge expressions between HTML code, you can use the Free Flow Script to straight away code your Page.

  6. Click Save Script to save the Page. Ensure to Save Script before switching between the Script Builder and Free Flow Script modes.
  7. Click Preview near the top-right corner of the Page builder to preview your Page.

Insert HTML and Deluge Tasks

  1. Drag and drop the Insert Html task to insert HTML tags to your page.
  2. Click 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 Page, using the Deluge Expression Builder.

Drag and drop the Deluge Tasks to fetch and display the records at the required positions in your Page. For example, in the following image, 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).

Display images

You can display on your Page the images collected using Image and File upload fields. For this, you will require the desired image or file's URL, which will be in the following format:

https://creatorexport.zoho.com/DownloadFile.do?filepath=/&sharedBy=&appLinkName=&viewLinkName=<viewName>

Below is a sample HTML code for displaying an image in a Page:

<img src='https://creatorexport.zoho.com/DownloadFile.do?filepath=/<FileUploadFieldName>&sharedBy=<userName>&appLinkName=<appName&viewLinkName=<viewName>'>

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

rec = Form [Image_Name = input.ImageName];
<img src='https://creatorexport.zoho.com/DownloadFile.do?filepath=/<%=rec.FileUpload%>&sharedBy=userName&appLinkName=app1&viewLinkName=view1'>

Embed Forms and Reports

The Embed Form | Report task enables you to embed in your Page a form or report that is present in any of your apps. To embed a form or report in your Page:

  1. Edit your Page.
  2. Navigate to the Script Builder mode.
  3. Drag and drop the Embed Form|Report task on your Page. The Embed Form|Report window will pop up.
  4. Select the application that contains the required Form or Report. (All apps present in your Account will be displayed)
  5. Select the component that you want to embed: Form or Report.
  6. Select the required Form or Report. (Components will be filtered based on what you select in the previous step)
  7. Define the Embed Form Properties. You can specify if the Form Header is required, specify the NextUrl to take you to another page on form submit, specify customized success message and customized submit/reset button display names.
  8. Click Done.

The Form embed code will be inserted in your Page 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>
<%}%>

While embedding a report, Embed Report Properties provides options to enable/disable the display of view header, footer, secondary header and add/edit record links:

The report embed code will be inserted in your Page within the <div> tag as given below, including the options you selected in the Embed Report Properties:

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>
<%}%>

  • 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>

Note: Before publishing a Page, you must ensure to also publish the Forms or Reports embedded in it.

Access Pages from mobile devices

The applications you build using Zoho Creator are readily accessible from mobile devices. However, when you access your Page via native mobile apps, the Forms, Reports, and widgets embedded in it are displayed as hyperlinks (in iOS devices) and buttons (in Android devices). To display the components in mobile:

  1. Edit your page.
  2. Navigate to the Free Flow Script mode.
  3. Add zc_mobileview='inline' to the <div> or <iframe> tag of the required form, report, or widget.
  4. Click Save Script at the bottom.
Note: To ensure that your Pages are properly rendered on mobile devices, we recommend that you add this parameter to the first-level elements of your HTML code. In other words, the intended <div> or <iframe> should not be nested under any HTML tag like <div>, <table>.

For example, below is the code (as seen in the Free Flow Script mode) of a page that has an Orders form embedded in it. The syntax is similar for <iframe>.

htmlpage Dashboard()
displayname = "Dashboard"
content
<%{
%>
<div zc_mobileview='inline' elname='zc-component' formLinkName='Orders' params='zc_Header=true&amp;zc_SuccMsg=Data Added Successfully!&amp;zc_ResetVal=Rest'>
Loading Form...
</div>
<%
}%>

Below is how the above mentioned Orders form (that's embedded in a Page) will appear in an iPhone. The experience on an Android device will be similar.

In the absence of zc_mobileview parameterOn adding the zc_mobileview parameter

Embed Widgets

The term 'widget' broadly refers to an element in an interface (like a button, check box, etc.) or an app that can display information and/or interact with the user. Generally widgets are third party originated and are also known as modules, snippets, and plug-ins.

To embed a widget in your Page:

  1. Edit your Page.
  2. Navigate to the Script Builder mode.
  3. Drag and drop the Widget task on your Page. The Embed Widget window will pop up.
  4. Set the Width and Height across which the widget is to span on your Page.
  5. Define if Scrolling is allowed in the set width and height. 
  6. Set the FrameBorder (in pixels).
  7. Enter the URL that's responsible for the widget's functionality.
  8. Click Done.

The parameters you specify in the Embed Widget window will be inserted in your Page within the <iframe> tag, as shown below:

htmlpage Sample_HTML_View()
displayname = "Sample HTML View"
content
<%{%>
<iframe name='zohoview' height='100' width='100%' frameborder='0' scrolling='auto' src=' https://www.zoho.com' ></iframe>
<%}%>

Add 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.

htmlpage "Expense Report By Date"(From, To)
<%{%>

...................
..................

}%>

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”.

if (input.parameter == null)
{
input.parameter = zoho.currentdate.toString();
// As parameter is a string value, the date is converted to string
}

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"

htmlpage "Sample HTML View"()
<%{%>

<table width="100%" cellspacing="1" cellpadding="1" border="1">
<caption>Income Vs Expenditure</caption>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

<%}%>

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.

htmlpage "Sample HTML View"()
<%{%>

<table width="100%" cellspacing="1" cellpadding="1" border="1">
<caption>Income Vs Expenditure</caption>
<tbody>
<%for each r in add_new_income
{%>
<tr>
<td><%=r.Date__field%> </td>
<td> <%=r.Amount%></td>
</tr>
<%}%>
</tbody>
</table>

<%}%>

Note:

  • The tag that will set the Deluge tasks apart from the HTML are the <% and %> tags.
  • The tag that will set the Deluge expressions apart from the HTML are the <%= and %> tags.
  • The HTML Builder highlights the Deluge tasks in the HTML page.
  • You can have as many <% and %> tags as you need throughout your HTML page. Just remember to close each tag before you go on!

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.

htmlpage "Summary View"()
<%{%>

<table class=zc-viewtable width="50%" border="1" valign="top">
<caption class="zc-viewtitle">Summary of Assigned Issues</caption>
<tbody>
<tr>
<td valign="top">

<table class=zc-viewtable width=100% >
<caption class="zc-viewtitle">Total issues assigned to each module</caption>
<tbody>
<tr class="zc-row-header">
<td class="zc-viewrowheader">Module Name</td>
<td class="zc-viewrowheader">Total Issues</td>
</tr>

// iterate each record in the Modules form & count the number of records assigned to that module from the Submit_Feedback form

<%for each r in Modules
{
ModuleName = r.Module_Name;
ModuleTotal = count(Submit_Feedback[Module == ModuleName]);%>

// For each module, add a row with module name and total count

<tr class=zc-viewrow>
<td><%=ModuleName%></td>
<td><%=ModuleTotal%></td></tr>
<%}%>

</tbody>
</table>
</td>

 

<td valign="top">
<table class=table zc-viewtable width=100% >
<caption class="zc-viewtitle">Total issues assigned to each team member</caption>
<tbody>

<tr class="zc-row-header">
<td class="zc-viewrowheader">Team Members</td>
<td class="zc-viewrowheader">Total Issues Assigned</td>
</tr>

// iterate each record in theTeam Member form , count the number of records assigned to the team member in the submit_Feedback form

<%for each x in Team_Member
{
MemberName = x.Name;
MemberTotal = count(Submit_Feedback[Assign_To == MemberName]);%>

// For each Team member, add a row with team member name and total count

<tr class=zc-viewrow>
<td><%=MemberName%></td>
<td><%=MemberTotal%></td></tr>

<%}%>
</tbody>
</table>

</td>
</tr>
</table>

<%}%>

To download and install the Feedback Application,

  1. Navigate to this link and click on Feedback_Application.ds to download the .ds file.
  2. Install the .ds file to your account.

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohocreator.com