Understand Pages | Zoho Creator Help

Understand Pages

1. What Does This Page Cover?

Learn about pages and how they are used to create user-friendly, customized dashboards for your applications. Via these dashboards, you can display dynamic elements and visually represent the data stored in Creator.

2. Availability

  1. Pages can be created in all plans of Creator.
  2. Only the super admin, admins, and developers can create and manage pages.

3. Overview

Dashboards are user interfaces that display information that a user may need to monitor and keep track of. They help in displaying data from various sources in various formats. They are particularly effective for analyzing and monitoring various data points and deriving insights for optimization and efficiency.

A dashboard (called a Page in Creator) is usually a combination of HTML, CSS, and JavaScript that forms a single view. The browser renders this combination to display the user interface. However, Creator lets you create dashboards using pre-defined configurable elements and an easy drag-and-drop UI.

4. Pages in Creator

In Zoho Creator, pages help you in achieving data-loaded and functional dashboards for your users. Using pages, you can aggregate and extract values from the data collected through your forms and convert them into manageable chunks of visual information that can be manipulated. This enables you to create a detailed overview of your business on a single screen. Each element placed within a page is unique in representing the data that it is affixed with.

To achieve this, Creator offers unique page templates that suit different business scenarios. These templates have page elements which can be configured or customized further. If you want to indulge in a newly customized dashboard and have more control over it, you can build one from scratch by including different elements from the builder such as panels, buttons, HTML snippets, widgets, and more such features.

Creating and configuring these elements is made easy using the drag-and-drop page builder that Creator provides. The page builder is the place where different properties, both common to the page as a whole and specific element, can be customized.

4.1. See How It Works


4.2. Use Case

1. Say you've created a Doorstep Package Delivery application to handle your business.

To create a dashboard for your delivery representative, you need to include various elements that they might want to look at:
  1. Panels that display aggregate metrics like their total count of orders delivered in a day, due of their current delivery, number of returns that need to be picked up, and more.
  2. A gauge to visually check if the delivery representative is achieving their daily target and track progress.
  3. An Order Backlogs report to check for undelivered orders due to address detail errors, no-show of customer, and so on.
  4. A Verify Delivery form can be embedded to enter the OTP from the customer to close the order.
  5. A HTML snippet to add a Quick Links table.
  6. A bar chart can display completed monthly deliveries to track their year-round performance for bonuses.

2. You've created a Zylker Game Management application to conduct and manage one's own playing slots. It also keeps account of the games they participate in that are conducted by others.

The dashboard will have:
  1. The name of the logged-in user is displayed in the start of the page using page variables and page script.
  2. Panels that showcase the number of upcoming games they are a participant of, the number of games they are conducting, the total games played, their rating as a player, and so on.
  3. A search bar that lets them search and filter the different sports that are happening in the upcoming week.
  4. An embedded report of the playing slots of the user.

4.3. Navigation Guide for Creation of Pages

In the edit mode of the application, when the + button is clicked, the screen shows the different components that can be created in the application. Here, when Page is clicked, the screen displays the two types of page creation that Creator offers.

4.4. Types of Pages in Creator

Zoho Creator enables you to create pages in the following ways:
  1. Blank - Create a page anew and customize it by including all the different elements that Creator offers to build a live and dynamic view for your applications.
  2. From a template - Create a page from a predefined template that Creator offers to suit your business needs.The library of these page templates provides you with 10 different layouts, each using different elements such as panels, charts, embedded reports, forms, and more. Choose one that is most fitting for the purpose that your page serves. You can customize them further, add new elements, or remove existing ones, if deemed unnecessary. 

4.5. Elements of a Page

The different page elements that can be used in an interactive page are listed below.

Page Element
Page Element in Live Mode
Description
Scenarios
A panel is a tile-like container used to display key metrics. Images or icons can also be placed above the metric for visual reference.

Panels can be used to display key aggregates like Sum, Count, Average, and more using the data added in any of the applications present in a Zoho Creator account.
In an Order Management application, a panel can be configured to display:

Average Order Cost for a selected region
Maximum Invoice Value for the week
A chart is a graphical representation of the data in an application. The chart gallery provides a large variety of chart types including column charts, bar charts, and more. They represent patterns and trends comprehensively, and also help in drawing quick comparisons.
In a Project Timeline Dashboard, a chart can display the number of Ongoing projects, New, and Finished projects according to the different departments.
A gauge might visually represents a goal/target and how your business metric is progressing towards that goal/target. It can also be used as an indicator that displays a predefined state/range.
In an Employee Dashboard, a gauge can be used to display:
Revenue performance for the year-to-date or other marketing and sales goals.
A sales metric can be represented as poor, average or good sales; where poor, average and good are the ranges or states.
The search element in a page enables your users to search for data across the applications in your Zoho Creator account.

The search results are shown by filtering the data stored in your application using the search input.
In an In-House Doctors page, when a search element is included, it helps you search for doctors whose specializations will be displayed in an All Doctors report.
A form can be embedded in a page from any of the applications in your Zoho Creator account. You can also embed it as a button which when clicked, will open the form.
In an Asset Management application, an Add Asset form can be embedded alongside an All Assets in Possession embedded report. Every time a user submits the form, the records are appended in the report.
A report can be embedded in a page from any of the applications in your Zoho Creator account. You can embed a report into the page to view a detailed account of highlighted findings in the data.
In a Payroll Dashboard, a report that displays the pay slip history of the employee can be embedded in their dashboard.
Snippets are used to embed chunks of code that let you add your own tools/elements to a page and not be confined to the predefined elements we offer. Some of their uses are to insert creative tables, fetch and list specific data from reports, add headers with dynamic values from a form, and more.

The three kinds of snippets Creator offers to create customized elements are:

ZML Snippet- Use Zoho Markup Language and Deluge to render snippets in all devices.
HTML Snippet- Use HTML and Deluge to render snippets in web applications.
Embed - Insert external media like images, videos, or other links using their iframe embed codes.
Note: ZML snippets are rendered in all devices by default.  For HTML snippets, you need to write responsive codes for each device (except for web) separately if needed, for it to be rendered.

In a Project Management application, a live timer can help you track the duration you take to finish your tasks. Tracking this timeline helps you manage your time and effort more efficiently. A HTML snippet could be used to insert this live timer.
Buttons are used to perform a specific function on click by associating actions to it. You can choose from the pre-defined button actions such as opening reports or executing workflows, or add your own custom action to the button.

In an online drugstore, Zylker, a page might display various sections of drugs and products (Cosmetics, Child Care, Mother Care, Oral Supplements, etc). A Shop Now button can be embedded in each section that, when clicked on, redirects to the broad page that displays all related products for shopping.
(Available only in the paid plans of Creator)
Widgets enable you to create and customize niche features, extend interface customization beyond the built-in features, and also incorporate third-party apps into your pages.
They boost your control over the front-end design of your application and help you mirror the uniqueness of your brand.

A live tracking widget can be inserted in the Delivery application's Customer Dashboard. This will allow them to track the position of the delivery representative on a map.

In a Ticket Booking platform, after you've filled out information using a form, you are redirected to a page where a timer displays the time left to complete payment. This live timer can be inserted using widgets.
(Available only in the paid plans of Creator)
Viewer enables you to use your mobile's camera to scan a marker for your AR sets.

The output can be wholly seen on your application's page. You can move the device to get a better view.

A viewer can help you to include try-it-outs in an online Furniture Store. You can scan a place using your mobile and let the AR viewer help you visualize the product in that space.

4.6. Customize the Outlook of Page

Customize the overall outlook of the page by using the options provided by Creator:

Icon
Icon Name
Description
Setting a theme for your application applies the chosen theme to all the components of your application including your pages. This includes choosing a layout, setting a color, choosing a font, and more.

Sections
Manage the sections of your pages, set icons that make them look distinct, and much more.

For browser:


For phone/tablet:

Define the alignment of page elements with each other and the way they are displayed. You can either choose to show them as separated cards or as attached sections. This option is available for the UI of browser, phone, and tablet.

In a browser's UI, you can set margin value on all four sides in pixels.
For a phone or tablet's UI, you can choose a suitable layout that decides the arrangement of the page elements.

Further, you can also customize the page elements inside your page to give a more sophisticated outlook by:
  1. Using the styling options provided while configuring page elements such as charts, gauges, search, and more.
  2. Using the ZML editors provided while configuring page elements such as  panels and buttons.
  3. Inserting styled snippets and widgets that add more visual appeal.

5. Points to Note

  1. Users added to an application with a permission set that includes Access permission for specific pages will be able to view them.
  2. Page variables can be used to perform custom tasks inside your pages, such as loading data based on the login user. For example:
    1. The name of the user can be displayed at the top.
    2. The number of hours an employee has worked for in a week can be displayed.

6. Related Topics

  1. Create and Manage Pages
  2. Configure Layout Customization for a Page
  3. Understand Page Builder

    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION








                                You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                    Manage your brands on social media

                                      Zoho Desk Resources

                                      • Desk Community Learning Series


                                      • Digest


                                      • Functions


                                      • Meetups


                                      • Kbase


                                      • Resources


                                      • Glossary


                                      • Desk Marketplace


                                      • MVP Corner


                                      • Word of the Day


                                        Zoho Marketing Automation

                                          Zoho Sheet Resources

                                           

                                              Zoho Forms Resources


                                                Secure your business
                                                communication with Zoho Mail


                                                Mail on the move with
                                                Zoho Mail mobile application

                                                  Stay on top of your schedule
                                                  at all times


                                                  Carry your calendar with you
                                                  Anytime, anywhere




                                                        Zoho Sign Resources

                                                          Sign, Paperless!

                                                          Sign and send business documents on the go!

                                                          Get Started Now




                                                                  Zoho TeamInbox Resources



                                                                          Zoho DataPrep Resources



                                                                            Zoho DataPrep Demo

                                                                            Get a personalized demo or POC

                                                                            REGISTER NOW


                                                                              Design. Discuss. Deliver.

                                                                              Create visually engaging stories with Zoho Show.

                                                                              Get Started Now







                                                                                            You are currently viewing the help articles of Sprints 1.0. If you are a user of 2.0, please refer here.

                                                                                            You are currently viewing the help articles of Sprints 2.0. If you are a user of 1.0, please refer here.



                                                                                                  • Related Articles

                                                                                                  • Understand Portal Pages

                                                                                                    This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. What Does This Page Cover? Learn about the Sign Up, Sign In, and Reset Password pages of your portal. They act as the input ...
                                                                                                  • Understand portal

                                                                                                    This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. A Portal is a great way for an organization to allow its external users to log in to their dedicated internal system and ...
                                                                                                  • Create and Manage Pages

                                                                                                    1. What Does This Page Cover? Learn the steps to build intuitive pages and to perform various actions, including managing your page's properties, renaming, duplicating, and deleting a page. 2. Availability Pages can be created in all plans of ...
                                                                                                  • Customize Portal Pages

                                                                                                    This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. What Does This Page Cover? Learn to customize portal pages using a sophisticated designer that allows you to tailor every ...
                                                                                                  • Understand publish

                                                                                                    This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. Publishing components of an application will enable anyone to access it, even if they don't have a Zoho creator account. The ...
                                                                                                    Wherever you are is as good as
                                                                                                    your workplace

                                                                                                      Resources

                                                                                                      Videos

                                                                                                      Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                      eBooks

                                                                                                      Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                      Webinars

                                                                                                      Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                      CRM Tips

                                                                                                      Make the most of Zoho CRM with these useful tips.



                                                                                                        Zoho Show Resources