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>



    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

                                                                                                  • 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 ...
                                                                                                  • Understand ZML snippet

                                                                                                    Snippets are stand-alone, re-usable code pieces that can add additional functionality. ZML or Zoho Markup Language is a simple markup language used to create pages in your Zoho Creator Appliction. Using ZML, you can build various elements of your ...
                                                                                                  • Building an employee dashboard

                                                                                                    Requirement   Create an employee dashboard with buttons that will help the employees to check in and out, find the total number of logged-in hours and apply for leave. Use Case   An Employee Management application has a dashboard for their employees. ...
                                                                                                  • Page related methods

                                                                                                    The ZCUISDKUtil of Zoho Creator's Android SDK lets you manage the interface of the components of your Zoho Creator applications. Note: Zoho Creator's Mobile SDK is currently a Beta feature. We do not recommend using it for apps in the production ...
                                                                                                  • Configure parameters for page elements

                                                                                                    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. In this tab, you can continue to use these parameters as ...
                                                                                                    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