ZML Examples | Zoho Creator Help

Getting started with ZML

Being new to ZML, it can be hard for any user to know where and how to start. It's easy to get stuck somewhere wasting a lot of your time and efforts (and of course, Money!). The aim of this guide is to show you ‘how’ to create your first panel without focusing too much on the “why.” By the end of this, you will have the know-how to create a basic panel and we hope that this will inspire you to delve further into the ZML. 

Overview

A ZML snippet is generally used to construct a panel component along with some business logic (that can be achieved by combining Deluge). Following is the essential structure of a panel in ZML.


Each panel must contain:
  • <panel> Tag: The <panel> tag defines the primary container-like structure that holds some data. 
  • <pr> Tag: The <pr> tag or panel-row defines a logical row within every panel.
  • <pc> Tag: The <pc> tag or the panel-column defines a logical column within every <pr>.
  • Panel Element: Panel elements include, text, image or a button. Every panel can hold one or more of these elements in it. 

Deconstructing the structure of a panel

Now that the structure of a panel is defined, we need to understand how each element contributes to forming a complete panel with some content and business logic in it. 

The image given above gives a 3-D view of the different layers of a ZML panel. There are three logical layers that form a panel. As defined in the structure of a panel, the <panel> tag defines the primary container. Followed by <pr> and <pc> which are the logical rows and columns that are not visible.

Panel rows and panel columns help organise elements in a panel. This means that each element like a text, image or button is enclosed within a cell-like container which facilitates adding style and arrange each element individually.

 

Building a panel in ZML

Let us consider the panel in the image below and build it in parts using a top-down approach.

This panel is a collection of:

  • Text Data - Static and Fetched Data
  • Background Color and Text Positioning
  • Two Columns
  • Image - Icons
  • An action associated text
Step 1: Creating a panel and adding a simple text content in it:
Here's how a simple ZML panel will show up on your page: 

To create a simple panel:

<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' padding='20px'>
<text value='Projects' size='4' color='#000000'> </text>
</pc>
</pr>
</panel>
Step 2: Aligning the text content:

Output after aligning text:

To align text in a panel:

<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' padding='20px' hAlign="left">
<text value='Projects' size='4' color='#000000'> </text>
</pc>
</pr>
</panel>
Step 3: Displaying text data fetched from an application:

Output:

To display application data (text) in a panel:

<panel>
<pr height='fill' width='fill'>
<pc width='80%' padding='20px' hAlign='left'>
<text type='Text' value='Projects' size='4' textAlign='left'> </text>
</pc>
<pc width='20%' padding='20px' hAlign='right'>
<text type='Form Data' value='thisapp.New_Project.ID.count' size='8' bold='true'> </text>
</pc>
</pr>
</panel>
Step 4: Adding a background color to the panel:

Output:

 

<panel>
<pr height='fill' width='fill'>
<pc width='80%' bgColor='#20B2E3' padding='20px' hAlign='left'>
<text type='Text' value='Projects' size='4' color='#FFFFFF' textAlign='left'> </text>
</pc>
<pc width='20%' bgColor='#20B2E3' padding='20px' hAlign='right'>
<text type='Form Data' value='thisapp.New_Project.ID.count' size='8' color='#FFFFFF' bold='true'> </text>
</pc>
</pr>
</panel>

Step 5: Adding more rows within the panel and adding an image/icon:

Output: The icon here is '>' symbol

<panel>
<pr height='fill' width='fill'>
<pc width='100%'>
<pr height='fill' width='fill'>
<pc width='80%' bgColor='#20B2E3' paddingTop='10px' paddingLeft='40px' paddingRight='10px' paddingBottom='10px' hAlign='left'>
<text type='Text' value='Projects' size='6' color='#FFFFFF' textAlign='left'> </text>
</pc>
<pc width='20%' bgColor='#20B2E3' paddingTop='10px' paddingLeft='10px' paddingRight='40px' paddingBottom='10px' hAlign='right'>
<text type='Form Data' value='thisapp.New_Product.ID.count' size='8' bold='true'></text>

</pc>
</pr>
<pr height='fill' width='fill'>
<pc width='100%' paddingTop='10px' paddingLeft='40px' paddingRight='10px' paddingBottom='10px' hAlign='left'>
<pr height='auto' width='auto'>
<pc>
<text type='Text' value='Show List' size='3' textAlign='left'> </text>
</pc>
<pc>
<image color='#20B2E3' bgColor='#FFFFFF' width='52px' height='52px' type='icon' value='arrows-1-bold-right' size='1' cornerRadius='10px' iconType='solid' /> </pc>
</pr>
</pc>
</pr>
</pc>
</pr>
</panel>
Step 6: Complete Panel with text,image and actions:

Output:

<panel>
<pr height='fill' width='fill'>
<pc width='100%'>
<pr height='fill' width='fill'>
<pc width='80%' bgColor='#20B2E3' paddingTop='10px' paddingLeft='40px' paddingRight='10px' paddingBottom='10px' hAlign='left'>
<pr height='auto' width='auto'>
<pc>
<text type='Text' value='Projects' size='6' color='#FFFFFF' textAlign='left'> </text>
</pc>
</pr>
</pc>
<pc width='20%' bgColor='#20B2E3' paddingTop='10px' paddingLeft='10px' paddingRight='40px' paddingBottom='10px' hAlign='right'>
<pr height='auto' width='auto'>
<pc>
<text type='Form Data' value='thisapp.New_Product.ID.count' size='8' color='#FFFFFF' bold='true' textAlign='right' displayType='actual'> </text>
</pc>
</pr>
</pc>
</pr>
<pr height='fill' width='fill'>
<pc width='60%' paddingTop='10px' paddingLeft='40px' paddingRight='10px' paddingBottom='10px' hAlign='left'>
<pr height='auto' width='auto'>
<pc>
<text value='Show List' size='3'> </text>
</pc>
<pc>
<image color='#20B2E3' bgColor='#FFFFFF' width='52px' height='52px' type='icon' value='arrows-1-bold-right' size='1' cornerRadius='10px' action='OpenForm' componentLinkName='New_Product' target='new-window' iconType='solid' /> </pc>
</pr>
</pc>
<pc width='40%' paddingTop='10px' paddingLeft='10px' paddingRight='40px' paddingBottom='10px' hAlign='right'>
<pr height='auto' width='auto'>
<pc>
<image color='#20B2E3' bgColor='#FFFFFF' width='20px' height='18px' type='icon' value='ui-2-fat-add' size='1' cornerRadius='0px' iconType='solid' /> </pc>
<pc>
<text value='Add' size='3' color='#20B2E3' bgColor='#FFFFFF'> </text>
</pc>
</pr>
</pc>
</pr>
</pc>
</pr>
</panel>

Additional functionalities

In addition to the above, you can add a custom function from any of your applications to an action.

To associate a custom function to an action:

<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' padding='20px'> <text type='Text' value='Projects' size='6' color='#FFFFFF' textAlign='left' action='Function' functionName='leadDetails.getLeadName' parameters='&apos;${view}&apos;'> </text>
</pc>
</pr>
</panel>



      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        Access your files securely from anywhere

          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







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsRetailOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceForms for Solopreneurs
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              Forms for Government
                              Intake FormsLegal
                              Mobile App
                              Form DesignerHR
                              Mobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic FormsInsurance
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsWufoo alternativeEncrypted Forms
                              Accessible FormsTypeform alternativeSecure Forms

                              WCAG

                                          Create. Review. Publish.

                                          Write, edit, collaborate on, and publish documents to different content management platforms.

                                          Get Started Now






                                                            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

                                                                  Use cases

                                                                  Make the most of Zoho Desk with the use cases.

                                                                   
                                                                    

                                                                  eBooks

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

                                                                   
                                                                    

                                                                  Videos

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

                                                                   
                                                                    

                                                                  Webinar

                                                                  Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                                   
                                                                    
                                                                  • Desk Community Learning Series


                                                                  • Meetups


                                                                  • Ask the Experts


                                                                  • Kbase


                                                                  • Resources


                                                                  • Glossary


                                                                  • Desk Marketplace


                                                                  • MVP Corner



                                                                    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 Demo

                                                                                                      Get a personalized demo or POC

                                                                                                      REGISTER NOW


                                                                                                        Design. Discuss. Deliver.

                                                                                                        Create visually engaging stories with Zoho Show.

                                                                                                        Get Started Now









                                                                                                                            • Related Articles

                                                                                                                            • FAQs: Zoho Creator - Starter Guide

                                                                                                                              This page covers essential insights into Zoho Creator, a low-code platform offering support for multiple languages, shared responsibility models, and the unique Deluge coding language, providing comprehensive assistance for your business needs. What ...
                                                                                                                            • ZML - An Overview

                                                                                                                              ZML or Zoho Markup Language is a simple markup language used to create pages in your Zoho Creator Application. Using ZML, you can build various elements of your page, create a display structure to arrange these elements on the page, add descriptive ...
                                                                                                                            • FAQs: Pricing Plans

                                                                                                                              This page covers essential details about Zoho Creator, including its free trial, pricing plans, customer support options, add-ons, and storage limits, providing a comprehensive understanding of how it can elevate your business processes. Does Creator ...
                                                                                                                            • FAQs: Setup Process

                                                                                                                              This page covers essential steps for Zoho Creator users, including registration, sign-in processes, confirming your Zoho account, email address verification, and options to request a demo or contact our dedicated support team. How do I register for ...
                                                                                                                            • FAQs: Basic Privacy and Security

                                                                                                                              This page covers essential aspects of Zoho Creator, delving into its security features, official certifications, audit reports, and authentication mechanisms, providing comprehensive insights into data safety for your business workflows. Note: A ...
                                                                                                                              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