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
- Panels can be created in all plans of Creator.
- 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:
- 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.
- 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.
- 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:
- Display - A value for the static/dynamic text, image, or button that is embedded on the panel.
- Action - An action that can be initiated on the click of the panel or a specific panel element.
- 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:
- Total Claims Submitted - Shows the total count of distinct claim records submitted during the selected period.
- Approved Claims - Displays the count of claims whose status is marked as "Approved" based on the criteria which is set.

- Total Amount Settled - Calculates the sum of the settlement amounts for all approved claims based on the above criteria.
- 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:
- 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.
- 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:
- Sum - The sum value of all relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Prediction, OCR, Integration)
- 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)
- 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)
- 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)
- Average - The average value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, OCR, Prediction, Integration)
- 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.
- 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.
These operations provide a dynamic numeric value that will be displayed on the panel.
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.
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.
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:
- My library - Images from your local storage. They can be of the formats JPEG, JPG, PNG, and a maximum of 2MB.
- Weblink - Images from a specified public URL.
- Profile picture - The logged-in user's profile picture is fetched from their Zoho Account and displayed on the panel.
Note: In the following cases, a placeholder image ( ) will be displayed instead of their profile picture:
- When public users or portal users access the page
- When the page is exported as a PDF
- Icons - The built-in icons provided by Creator. They can either be outlined icons or solid icons.
|
|
Button
|
|
- 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:
- 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.
- 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.
- 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.
- 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.
- 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
|
- Font family - A font that applies to the content present inside the text element. You can choose from six different font families.
- Style - The content of the panel element can be emboldened, italicized, underlined, and changed to upper/lower case.
- Color - The color of the text and the background color of the panel element
- Font size - The font size that will run throughout the content of the panel element. The preset font sizes range from 12px to 40px.
- Margin - The spacing between two panel elements.
- 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.
- 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
|
- Shape - The shape of the image can be a circle, square, or a square with rounded edges.
- Shape size - The shape size can be small, medium, large, or a custom size.
- Icon size - If the image is chosen to be an icon, its size can be selected from a preset range of 12px to 40px.
- Color - The color of the icon can be chosen.
- Margin - The spacing between two panel elements.
|
|
|
Button
|
- Button type - The displayed button's type can be rectangular or rounded.
- Font family - A font that applies to the content present inside the button. You can choose from six different font families.
- Style - The content of the button can be emboldened, italicized, underlined, and changed to upper/lower case.
- Color - The color of the text displayed on the button and its background color.
- Font size - The font size of the content displayed on a button. The preset font sizes range from 12px to 40px.
- Margin - The spacing between two panel elements.
|
- Panel Container (more than one panel element can be clubbed within a container)
- Panel (as a whole)
|
|
You can define the various properties of the panel container and the panel as a whole, including:
- Column align - The panel elements housed within a panel/panel container can be aligned to different positions such as Top, Bottom left, Center, etc.
- Swap - The panel containers that are situated right beside each other can be interchanged.
- Height - The height of a panel container can be chosen to Fill or to any custom height in pixels.
- Padding - The space between a panel element and its border can be customized in pixel values.
- Background color - The color that runs through the background of the panel/panel container.
- Background image - The image that runs through the background of the panel/panel container.
|
- Adding and managing panel elements
- Configuring display for panels and panel elements
- Configuring action for panels and panel elements
- Configuring style for panels and panel elements
- Understanding pages
Previous
Learn more about the
Pages component that serves as dashboards where you can add multiple elements such panels,
gauges,
charts,
snippets, and more.