Zoho Creator

  • Getting Started
  • Application
  • Account Setup
  • Zoho Creator On-Premise
  • Zoho Creator for Google Apps
  • Zoho Creator Market Place
  • Zoho Creator Pricing
  • Migration Tools
  • Known Issues and Limitations
  • Troubleshooting

Help Application Pages Creating Pages

Creating Pages

Table of contents down, steps in defining a new page, inserting html and deluge tasks, inserting image in html view, embedding form/report, embedding widgets, adding parameters to the page, about page tags.

  • Sample Page

Related Topics

  • Select Create New - Page option in Edit mode.
  • In the New Page screen , specify a meaningful name for the page. The page name can contain alphanumeric and special characters.
  • 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.
  • Click Create to create the page.
  • 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.
  • 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.
  • Click Save Script to save the page.
  • Use the Show Preview tab to preview the created page.
  • 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 .

how to create html page in zoho creator

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

how to create html page in zoho creator

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.

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.

how to create html page in zoho creator

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

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:

how to create html page in zoho creator

The report embed code will be inserted in the HTML view within the <div> tag as 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> <%}%>

  • 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>
  • While accessing a published page, all the forms/reports embedded into it should also be published to avoid errors/conflicts.

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,

  • Drag-n-drop the Embed -> Widget task from the left-side tree to the editor area.
  • Specify the width, height, scrolling, iframe border options and widget URL in the Emded widget dialog.

how to create html page in zoho creator

  • The embed widget code will be inserted in the HTML page within the <iframe> tag as given below, based on the options selected.

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

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

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

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.

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

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

how to create html page in zoho creator

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

how to create html page in zoho creator

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.

how to create html page in zoho creator

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

Print HTML View | Export HTML to PDF  |  Fetch data from two forms and update it in an HTML view

© 2016, Zoho Corporation,版权所有.

Article Read Time:

Stay connected.

how to create html page in zoho creator

How To Style Your Zoho Creator Pages Using HTML & CSS

  • Posted on January 21, 2023

Looking to customize your Zoho Creator pages beyond the default choices? We’ve got you covered. In this tutorial, Josh walks you through how to customize and style your Creator pages using HTML/CSS.

Key Takeaways

Customize an html snippet with embed & customizable page elements.

Start out with a blank Creator page, open up the editor in a new tab and open up the page builder. Add the HTML snippet. When creating an HTML element, there are a few tags that are needed. You can have both HTML and Deluge on the same page. You just need to make sure to separate the tags so that you know where Deluge starts and then where the HTML code starts.

how to create html page in zoho creator

In the editor, drag and drop any elements that you would like to add to the page. In this example, we are embedding a form and a report on the page. When the element is added, it will provide the key parameters needed within the code. The first parameter is elName=’zc-component’ which has to be there for any Zoho Creator components. Once you’ve added the API name of the element you are trying to embed it will show up on the Creator page after saving and refreshing! The rest of the parameters in the line of code are prepopulated style-based URL parameters. Use this article to find what parameters are available within Creator! However, we like to start with no style parameters and add those later into creating the page.

automate your business ad

Tip: Say you have another application within Creator and you want to reference a report or form from that other app. To do so, the trick is to add another parameter called appLinkName with the name of the page and the report/form you are looking to add.

how to create html page in zoho creator

Style Using CSS

One of the reasons why you may want to embed elements directly into an HTML page is you might want to style these elements separately. This can be done with the use of CSS in two different ways. The first is simply adding the style to the line of code using style=’ ‘ with inline style tags and using CSS commands to style it.

how to create html page in zoho creator

The other way is to add the style outside of the div in its own style brackets. This way makes it a little bit more organized as far as controlling the style and the CSS. CSS is the key feature for making HTML pages look pretty!

Modifying HTML with Deluge

Another great way to customize your HTML page is to use Deluge. In this example, we have records with data in an application in which we would like to surface that data within an HTML page. In our first few lines, we state what parameters we are trying to meet and then use the HTML to say what we would like to display on the page. To make the formatting a bit more organized, you can use HTML to add bullets, links, and much more!

Adding Page Parameters

A page parameter is a URL parameter you can add to specify what information you want to see when using a specific URL. Within the page property settings, you can simply add the parameter by entering a parameter name. Then in the HTML block, you’ll add input. so that it will reference the setting you just entered. Now, whenever you enter the parameter into the URL it will show the information you are looking for.

Variations of Styling with CSS

There seem to be endless ways to customize your HTML page with different styles using CSS. Here are some more examples of styling you can add to your page!

  • margin: auto; – this will center the content
  • width – changes the width of the content
  • padding – adds padding on either side of the content
  • background-color – simply changes the color of the page’s background

Keep in mind that when you embed an element into a page, they don’t natively work on a mobile app out of the box. However, you can use another parameter to make sure that it does work on mobile. The parameter that you will want to add is zc_mobileView=’inline ‘. This won’t change anything on the desktop view!

Additional Resources

Want to learn more about Zoho Creator?  Check out our other resources which include videos, articles, and guides by clicking here to visit the  Zoho Creator resource page . 

how to create html page in zoho creator

US Headquarters Aliso Viejo, CA 92656

Canada Calgary, T2P 2V6

Brazil Belo Horizonte, Minas Gerais 30110-044

Stay In Touch

Billy bates, senior web developer.

Billy is a Wordpress Developer with an eye for design. His knowledge will help our company website and client sites meet their goals. Billy and his young family have just moved to Ashland Oregon, and are looking forward to exploring the area’s amazing beer, wine, and food. He also has a passion for synthesizers and drum machines.

Lucas Sant'Anna

With a background in Operations Research and Data Analysis, Lucas is a Brazilian programmer that likes to get stuff done quickly and reliably. In previous jobs, he implemented industrial job scheduling, fleet management and detailed long-haul route optimization – among other data-driven processes – to reach objectives of increased profit and reduced wasted resources. His goal is to make Zoho fully automated and with more meaningful data for spot-on decisions.

Creator Scripts.

  • YouTube Channel
  • Zoho Deluge Scripts
  • Zoho Online Courses
  • Zoho Custom Development
  • Zoho Resources
  • Zoho Support
  • Zoho In Spanish
  • GPT for Zoho One
  • CRM Implementation
  • GPT for Zoho CRM
  • Zoho Sites: Easy Website Builder
  • Zoho Campaigns: Email marketing software
  • Zoho Social: Social media management software
  • Zoho Survey: Create online surveys and questionnaires for free
  • Zoho SalesIQ: The Customer Engagement Platform
  • Zoho Backstage: Holistic Event Management Software
  • Zoho Commerce: Online Store Builder
  • GPT for Zoho Creator
  • QR Code Menu Generator
  • QR Code Google My Business
  • QR Code for Spotify
  • YouTube Chapters
  • Zoho Analytics: Business Intelligence Platform
  • Zoho Invoice: Hassle-Free Invoicing
  • Zoho Books: Online Accounting Software
  • Zoho Expense: Travel and Expense Management Software
  • Zoho Inventory: Inventory Management Software
  • Zoho Sign: Complete digital signature solution for businesses
  • Zoho Mail: Secure Business Email Hosting
  • Zoho WorkDrive: Online file management for teams
  • GPT for Zoho Projects
  • Zoho Cliq: Team Communication Software
  • Zoho Assist: Free Remote Support Software
  • Zoho Meeting: Online Meeting Software & Platform
  • GPT for Zoho Desk
  • Zoho People: HR Software Solutions | Cloud based HRMS
  • Zoho Creator
  • Zoho Projects
  • Zoho Analytics
  • Zoho Technology
  • Zoho Assist
  • Zoho Campaigns
  • Zoho Expense
  • Zoho Survey
  • Zoho Social
  • Zoho Office Suite
  • Zoho People
  • Zoho Recruit
  • Zoho Invoice
  • Zoho SalesIQ
  • Zoho Commerce
  • Zoho Inventory
  • Frequently Asked Questions
  • Terms of Service
  • Privacy Policy
  • Become an Affiliate
  • AppWearCo Shop
  • Zoho Partners USA
  • Zoho Partners Canada
  • Zoho Partners Germany
  • Developers Portal

How to add an image to an HTML View ( page ) in Zoho Creator

19.07.13 01:13 PM By FMRR

Zoho Creator Notes

What does Zoho Creator do?

Is zoho creator worth it, how much does zoho creator cost, is zoho owned by google, what are the benefits of zoho creator.

  • Custom application creation without coding
  • Automation of work processes and streamlined workflow
  • Reduced time and resources required for application development
  • Flexibility and scalability to meet changing business needs
  • Integration with other Zoho and third-party applications

Is Zoho hard to learn?

Does zoho require coding, do hackers use zoho, is zoho completely free.

  • Zoho Creator tutorials
  • Zoho Creator app development
  • Zoho Creator tips and tricks

OPEN ITERATION © 2023 | All rights reserved  | Terms of Service   |    Privacy Policy    |                                                          Powered By  C re ator Scripts

IMAGES

  1. Zoho Creator: Create Pages, Create HTML Pages, Custom Report Format

    how to create html page in zoho creator

  2. Create HTML Pages in Zoho Creator, part 1

    how to create html page in zoho creator

  3. Create Pages

    how to create html page in zoho creator

  4. Create page

    how to create html page in zoho creator

  5. Zoho Creator Home Page

    how to create html page in zoho creator

  6. Create and Edit a Page

    how to create html page in zoho creator

VIDEO

  1. Create First HTML Page using Visual Studio Free Learning

  2. Zoho Creator app examples

  3. Create HTML page form Android mobile and view page with UC browser

  4. How to create a website on zoho

  5. Embedding a Zoho Creator form inside Zoho CRM using widgets

  6. How To Connect Zoho To WordPress Tutorial

COMMENTS

  1. Zoho Creator: Create Pages, Create HTML Pages, Custom Report Format

    Table of Contents Down Steps in defining a New Page Inserting HTML and Deluge Tasks Inserting image in HTML view Embedding Form/Report Embedding Widgets Adding Parameters to the Page About Page Tags Sample Page Related Topics Steps in defining a New Page Select Create New - Page option in Edit mode.

  2. Tip 23: How to create a custom page using HTML

    1. Users enter their information using the User Details form. 2. Whenever users access your application, their data will automatically be displayed in the dashboard, as shown below. Step 1: Creating the User Detail form

  3. Create HTML Pages in Zoho Creator, part 1

    Create HTML Pages in Zoho Creator, part 1 A or B or C Technologies Pvt Ltd 600 subscribers Subscribe 78 Share 19K views 6 years ago This video walks you through the basics of building a...

  4. Create and Edit a Page

    Developer Guide Pages Create and manage pages Create and edit a page Pages in Creator enable you to create customized pages, embed data from your application and display it in your page. You can use various page elements to embed forms, reports, buttons, charts, and custom data. Pages can be created for a new or an existing application.

  5. Creating Pages

    Creating pages Enhance the visual experience of users by bringing together various components in a single space using pages. With a simple drag-and-drop interface, a page builder helps you acquire aggregate data to monitor and analyze overall information for a holistic view of your organization's data. 00:33 - Why Pages? 04:56 - Creating a Page

  6. Creating Pages

    Pages display vibrant-looking data, customized using HTML and ZML tags, Deluge scripts, and other built-in elements, where data refers to the data stored in ...

  7. How To Style Your Zoho Creator Pages Using HTML & CSS

    Intro How To Style Your Zoho Creator Pages Using HTML & CSS Zenatta Consulting 14.5K subscribers Subscribe Subscribed 5.3K views 11 months ago Zoho Creator Tutorials Looking to customize...

  8. How To Style Your Zoho Creator Pages Using HTML & CSS

    Start out with a blank Creator page, open up the editor in a new tab and open up the page builder. Add the HTML snippet. When creating an HTML element, there are a few tags that are needed. You can have both HTML and Deluge on the same page.

  9. Understand HTML snippets| Zoho Creator Help

    Navigate to the Design tab and open the page builder . In the page builder, click Snippets on the left, then drag and drop the HTML Snippet on to the required position on your page. The HTML Snippet editor will appear. Add the required HTML code.

  10. Pages

    Home Building Your First App 8. Pages 8. Pages Learn to customise Pages in your Application. Pages let you create interactive dashboards, search interfaces and so on. As the name suggests, the dashboards provide a plausible overview of our entire application.

  11. Understand Pages

    Pages in Zoho Creator help you in achieving this objective. Using pages, you can aggregate and extract values from the data collected, convert them into manageable chunks of visual information and create a detailed overview of your business on a single screen. Dashboard built using Zoho Creator Pages

  12. 6. Creation of HTML pages with Zoho Creator

    This Friday, the Zoho Creator University Degree online session will be taught. In this session, the "Creation of HTML pages" will be explained. In this sessi...

  13. Zoho Creator Help Centre

    Quickstart Guide A brief guide to help you get started with Zoho Creator and quickly understand its concepts. Learn More Pre-built Apps A quick overview to the pre-built apps in Zoho Creator to summarize their modules and functionality. Learn More Videos Our videos will help you learn the finer aspects of building custom apps with Zoho Creator.

  14. Create HTML Pages in Zoho Creator, part 2

    0:00 / 34:13 Create HTML Pages in Zoho Creator, part 2 A or B or C Technologies Pvt Ltd 618 subscribers Subscribe Subscribed 52 Share 8.4K views 6 years ago Zoho Creator Tips This video is a...

  15. Introducing Page Variables and Page Scripts

    #creator tech connect #fetch #autopopulate #page elements #page scripting #html #zml In this session we will elucidate the essential role page variable and scripts play in fetching and populating the desired records dynamically across all the page elements.

  16. Page script and variables

    1. What does this page cover? Learn about page scripts, their creation and subsequent usage inside the pages component to populate dynamic values in your page elements, thereby minimizing the need for multiple snippets in your page. 2. Availability Page scripts is available in all the data centers.

  17. How to add an image to an HTML View ( page ) in Zoho Creator

    Zoho Creator is a low-code platform that enables businesses and individuals to create custom applications and automate their work processes without the need for coding. Zoho Creator provides a drag-and-drop interface, pre-built templates, and a range of tools and features to help users build custom applications quickly and easily.

  18. HTML pages in Zoho Creator

    HTML pages in Zoho Creator allow you to display data from Zoho Creator forms however you like using HTML and CSS to style the data. They can also be useful a...

  19. Create your first widget

    Learn more Click here to know about the limitations while creating a widget. To create a widget: Open the terminal. Run the following command to create a new project: $ zet init A list of Zoho Services will be displayed. Select Zoho Creator as the required service. Enter the Project Name.

  20. Page parameters

    Knowledge Base Creator Developer Guide Pages Create and manage parameters Understand passing parameters to a page Note: Page parameters are now improvized as page variables ! All your existing page parameters have been moved to the Page Variables and Script tab at the top-right of the page builder.

  21. Create Forms

    2. Create Forms In this video, you will learn to create forms from scratch. It is the primary component in building an application. A form collects the information or data that you need for your application, and all consequent actions in your app will be based only on the form you create.

  22. Create Application from Scratch

    Knowledge Base Creator Developer Guide Applications Create Application from Scratch Go to the homepage of Zoho Creator. Navigate to Solutions module. Click the Create Solution button in the top right corner. Three kinds of solutions will be displayed - Applications, BI & Analytics, and Integration flows. Click Select button in Applications.

  23. ZOHO creator Tutorials

    About Press Copyright Contact us Creators Advertise Developers Terms Privacy Policy & Safety How YouTube works Test new features NFL Sunday Ticket Press Copyright ...