Understanding panels | Zoho Creator Help

Understanding panels

In a nutshell
Panels are visual containers embedded in pages and are used to display key information, such as dynamic metrics, statuses, and KPIs in a structured and visually appealing format. They help users grasp critical insights from the dashboard and can include call-to-actions (CTA) like opening URLs, executing predefined functions within Creator, and more.
Availability
  1. Panels can be created in all plans of Creator.
  2. Only the super admin, admins, and developers can create and manage panels.

1. Overview

In Zoho Creator, panels are intuitive elements that can be inserted in a Page component to display both static and real-time data from an application’s records. They provide a consolidated view of dynamic key metrics, progress, and trends at a glance. They can be customized using the panel builder to enable tailored, focused displays in a minimalistic and functional design for effective data analysis.
The panel elements that can be incorporated into a panel are:
  1. Text - A textual content that is displayed on a panel. They can be static texts or dynamic values such as page variables, aggregate of record data, data fetched from other Zoho services, etc.
  2. Image - A pictorial element that displays an image. They add a touch of personalization to match the intent of the panel. This can be done by inserting a built-in icon, retrieving an image from your local storage, setting the logged-in user's profile picture, or using an image's public URL.
  3. Button - An interactive element that can initiate or perform actions such as executing prebuilt functions or opening Creator components such as forms, reports, and more.
The configuration sections for a panel include:
  1. Display - A value for the static/dynamic text, image, or button that is embedded on the panel.
  2. Action - An action that can be initiated on the click of the panel or a specific panel element.
  3. Style - The visual properties such as padding, color, margins, and so on, for the panel or panel elements.

1.1. Use cases

1. Key metrics in a dashboard - Say you’ve created a dashboard in a Claim Request application to monitor claim activity over a year. To provide a quick summary of claim performance, key metrics are displayed using panels. The dashboard includes the following panels:
  1. Total Claims Submitted - Shows the total count of distinct claim records submitted during the selected period.
  2. Approved Claims - Displays the count of claims whose status is marked as "Approved" based on the criteria which is set.

  3. Total Amount Settled - Calculates the sum of the settlement amounts for all approved claims based on the above criteria.
  4. Largest Claim Amount - Highlights the maximum settlement amount recorded among all claims based on the above criteria.
Each panel is configured with its own criteria and aggregation function to ensure that only the relevant claim records are considered, providing an at-a-glance view of claim volume and settlement trends.

Clicking on each panel will open a report to display the list of claims in that segment.

2. Dynamic welcome sign for customers - For example, let's say you've built a student dashboard that provides a personalized experience for each user. A welcome sign panel personalizes the student experience by displaying a greeting that dynamically displays the logged in student's name, using a page variable. Further, their basic details, including the student's name, class, roll number, and unique ID, are displayed. The text panel elements used to display these pull real-time data from the student’s profile stored in a Student Details form, and an icon is placed to denote the school's logo. This panel ensures a comprehensive academic biography is included for immediate reference and accessibility.

3. Pending tasks summary with CTA to relevant report - In an HR Management application, there is a Pending Tasks panel displayed on the HR employee’s dashboard. This panel provides a dynamic count of the tasks that are yet to be started, as well as those that are in progress. To achieve this, the tasks are categorized using specific criteria while configuration, allowing employees to track their workload easily. When the HR employee clicks on the Pending Tasks panel, a filtered popup report is triggered, showing a comprehensive list of the pending tasks specifically.

1.2. Navigation guide for panels

After you've created a page in the edit mode of your application, you can find the panel element on the left pane of the page builder. When Panel is clicked, different layouts of a panel are displayed alongside from which you can drag and drop the desired one onto the building space.

1.3. Display

In a panel, when a text, image, or button is added, you can individually customize their display properties. The Display customizations for each panel element are listed below.
Panel Element
Image
Displayed Data
Text
Static Text - An alphanumeric text element that can communicate information. If required, page variables can be included to provide dynamic values for different users.


Presets:
  1. Built-in Presets - You can choose from a built-in panel preset of a panel you might have saved already while creating a panel on any page within the Creator account. It will be of the same configurati
    on and can be modified further if necessary.
  2. Page Variables - You can choose a page variable that you might have already created in the same page to display dynamic values.
Zoho Creator - Use the data stored in the forms of any of the Creator applications in the same account to do arithmetic operations such as:
  1. Sum - The sum value of all relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Prediction, OCR, Integration)
  2. Minimum - The minimum value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Time, Date-Time, Prediction, OCR, Integration, and system fields such as Added Time, Modified Time)
  3. Maximum - The maximum value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Time, Date-Time, Prediction, OCR, Integration, and system fields such as Added Time, Modified Time)
  4. Median - The median value of all the relevant entries made in a form field. The resultant value will be the middle value when the numbers are arranged in ascending order. If the number of entries is even, the average of the two middle values will be displayed. (Supported field types: Number, Percent, Decimal, Currency, OCR, Prediction, Integration)
  5. Average - The average value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, OCR, Prediction, Integration)
  6. Count - The count of the records entered using a form. You can either display the overall count or use a criteria to show a filtered count. This operation will not be performed based on a specific field since it only provides a count of records.
  7. Distinct Count - The count of the unique field values found in the records entered using a form. For example, say you've chosen an Office Location dropdown field while configuring a distinct count. A total of 30 records have Boston, Texas, Phoenix, and Japan (4 unique values) as the office locations repeatedly. Then, the distinct count value displayed on the panel will be 4.
Note: The following fields are not supported for distinct count: Multiselect, Checkbox, Subform or subform fields, Add Notes, Section, Lookup (only when the display format is chosen as Multiselect or Checkbox).
These operations provide a dynamic numeric value that will be displayed on the panel.
Notes
Note: After configuring a text element with an arithmetic Zoho Creator operation, (such as Sum, Minimum, Count, etc) you can save it as a preset from within the Display section. This built-in preset can be reused with the same configuration in any other page component within the same Creator account.


Zoho Sheet - You can use the value stored in a Zoho Sheets spreadsheet's cell to display a dynamic value on the panel.
Notes
Note: Fetching values from the spreadsheet requires a connection between Zoho Creator and Zoho Sheets. You can either choose an existing connection or create a new one, while configuring the property.


Zoho Projects - You can use data stored in Zoho Projects such as the number of tasks, bugs, or milestones to display a total count on the panel.
Notes
Note: Fetching values from a project requires a connection between Zoho Creator and Zoho Projects. You can either choose an existing connection or create a new one, while configuring the property.
Image
An image can be displayed on the panel. It can be sourced from:
  1. My library - Images from your local storage. They can be of the formats JPEG, JPG, PNG, and a maximum of 2MB.
  2. Weblink - Images from a specified public URL.
  3. Profile picture - The logged-in user's profile picture is fetched from their Zoho Account and displayed on the panel.
Notes
Note: In the following cases, a placeholder image () will be displayed instead of their profile picture:
  1. When public users or portal users access the page
  2. When the page is exported as a PDF
  1. Icons - The built-in icons provided by Creator. They can either be outlined icons or solid icons.
Button
  1. Label - A text that will be displayed on the button. It can denote the action that the button might perform. If required, page variables can be included as labels to provide dynamic values for different users.

1.4. Action

You can associate an action to a panel as a whole, to panel containers, and panel elements which will be triggered when they are clicked on. The action types that can be linked to them are:
  1. Open URL - A public or private URL that the user might have access to, can be opened in the same window, a new window, or as a popup.
Note: The permalink of published components present in a Creator application can also be specified for this action.
  1. Open Form - A form from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
  2. Open Report - A report from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
  3. Open Page - A page from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
  4. Execute Function - A function from any of the applications in your Creator account can be triggered.

1.5. Style

You can customize the style properties of the panel as a whole, the panel containers within it, and the panel elements.
Section


Properties
Panel Elements
Text
  1. Font family - A font that applies to the content present inside the text element. You can choose from six different font families.
  2. Style - The content of the panel element can be emboldened, italicized, underlined, and changed to upper/lower case.
  3. Color - The color of the text and the background color of the panel element
  4. Font size - The font size that will run throughout the content of the panel element. The preset font sizes range from 12px to 40px.
  5. Margin - The spacing between two panel elements.
  6. Prefix - You can attach a prefix to a dynamic value in the panel element. For example, if you want to display the number of pending tasks, the prefix can be "Count:" to display the dynamic count as a label-value pair.
  7. Suffix - You can attach a suffix to a dynamic value in the panel element. For example, if a panel displays the count of children present in a class, the suffix can be "students".

Image
  1. Shape - The shape of the image can be a circle, square, or a square with rounded edges.
  2. Shape size - The shape size can be small, medium, large, or a custom size.
  3. Icon size - If the image is chosen to be an icon, its size can be selected from a preset range of 12px to 40px.
  4. Color - The color of the icon can be chosen.
  5. Margin - The spacing between two panel elements.

Button
  1. Button type - The displayed button's type can be rectangular or rounded.
  2. Font family - A font that applies to the content present inside the button. You can choose from six different font families.
  3. Style - The content of the button can be emboldened, italicized, underlined, and changed to upper/lower case.
  4. Color - The color of the text displayed on the button and its background color.
  5. Font size - The font size of the content displayed on a button. The preset font sizes range from 12px to 40px.
  6. Margin - The spacing between two panel elements.
  1. Panel Container (more than one panel element can be clubbed within a container)
  2. Panel (as a whole)

You can define the various properties of the panel container and the panel as a whole, including:
  1. Column align - The panel elements housed within a panel/panel container can be aligned to different positions such as Top, Bottom left, Center, etc.
  2. Swap - The panel containers that are situated right beside each other can be interchanged.
  3. Height - The height of a panel container can be chosen to Fill or to any custom height in pixels.
  4. Padding - The space between a panel element and its border can be customized in pixel values.
  5. Background color - The color that runs through the background of the panel/panel container.
  6. Background image - The image that runs through the background of the panel/panel container.

  1. Adding and managing panel elements
  2. Configuring display for panels and panel elements
  3. Configuring action for panels and panel elements
  4. Configuring style for panels and panel elements
  5. Understanding pages 
What's next
Previous
What's next
Learn how to add and manage panels and panel elements to represent key metrics and record data visually.
Previous
Learn more about the Pages component that serves as dashboards where you can add multiple elements such panels, gaugeschartssnippets, and more.

      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 FormsEnterpriseOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceAccessible Forms
                              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

                              Intake FormsLegal
                              Mobile App
                              Form DesignerHR
                              Mobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic Forms
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsFormstack alternativeEncrypted Forms

                              Wufoo alternativeSecure Forms

                              TypeformWCAG


                                          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


                                                                  • Desk Community Learning Series


                                                                  • Digest


                                                                  • Functions


                                                                  • Meetups


                                                                  • Kbase


                                                                  • Resources


                                                                  • Glossary


                                                                  • Desk Marketplace


                                                                  • MVP Corner


                                                                  • Word of the Day


                                                                  • Ask the Experts


                                                                    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

                                                                                                                            • Configuring display for panels and panel elements

                                                                                                                              What does this page cover Learn to configure the display properties of panels and panel elements to showcase static and dynamic data, visual images and icons, and CTA buttons on a Page component. Availability Panels can be created in all plans of ...
                                                                                                                            • Configuring style for panels and panel elements

                                                                                                                              What does this page cover Learn to configure the style properties of your panels to make them look visually appealing and aligned with the branding theme of your application. Availability Panels can be created in all plans of Creator. Only the super ...
                                                                                                                            • Adding and managing panels

                                                                                                                              What does this page cover Learn to add and manage panels to display actual and aggregate key metrics in your dashboards. Availability Panels can be created in all plans of Creator. Only the super admin, admins, and developers can create and manage ...
                                                                                                                            • Configuring action for panels and panel elements

                                                                                                                              What does this page cover Learn to configure an action that will get executed when a panel or panel element is clicked on in the live mode of the application. The types of actions include opening an URL, form, report, page, and executing a function. ...
                                                                                                                            • Understanding gauge

                                                                                                                              In a nutshell Gauges are intuitive dials or meters that dynamically represent Creator form data as metrics, performance levels, and key performance indicators (KPIs) on pages. They enable users to assess progress, thresholds, and status against ...
                                                                                                                              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