Understanding snippets | Zoho Creator Help

Understanding snippets

In a nutshell
Snippets are custom blocks within a Page component that can be built using ZML (Zoho Markup Language), HTML, or iframe codes. Deluge can be incorporated into the code blocks to make them interactive and display application data. They let you embed highly enhanced dynamic elements like tailor-made headers, custom tables with data views, messages, and more.
Availability
  1. Snippets can be created in all plans of Creator.
  2. Only the super admin, admins, and developers can create and manage snippets.

1. Overview

Snippets in Zoho Creator are inline blocks of code added within a Page component to render page elements that are customized beyond native page elements. Apart from creating custom page elements, you can style them and add logical properties such as UI interactions, calling Deluge functions, and more. For example, you can create a snippet that embeds a form from an application and customize its looks to suit your branding and application theme.
The three types of snippets that can be embedded in a page are:
  1. ZML snippets
  2. HTML snippets
  3. Embed iframe

1.1. ZML snippets

ZML snippets are code blocks that use Zoho Markup Language (ZML) to design and build highly extensive panels within a page. These panels can host a variety of elements such as custom tables, interactive CTAs, and more, arranged using flexible display structures. Further, its contents can be fully styled according to the theme of your application.
Additionally, Deluge scripting can be integrated into ZML snippets to define logic, including validations, data manipulation, and API call triggers, enhancing the interactivity of the panels. For example, you can open a Creator form or trigger a function on the click of an element inside an ZML snippet.
Example - You can build a custom panel with a header and dynamically updates with application data and includes interactive arrows for navigation or expansion.

1.2. HTML snippets

HTML snippets in Zoho Creator are used to build fully customized interactive user interfaces using standard HTML tags and CSS styling. They are primarily used for advanced responsive design requirements (more than what can be achieved using ZML) or when third-party integrations are needed. HTML snippets allow developers to create interactive dashboard UI elements, embed external UI elements like maps, charts, or payment gateways, and apply precise styling control to them.
Integrating Deluge scripting within HTML snippets in Zoho Creator greatly enhances the functionality and interactivity of custom dashboard components. By embedding Deluge code directly into HTML snippets, you can create dynamic, data-driven elements that respond in real-time to user actions. This allows actions such as form submissions, data validations, and API calls to be triggered seamlessly from within a custom-designed interface. For example, clicking a button in an HTML snippet can open a Creator form, update records, or fetch external data without needing to reload the page.
Example - You can create an advanced panel like the one below, with charts, KPI metrics, trends, an iframe that displays a formatted view of the search results, and more.


1.3. Embed

An Embed snippet in Zoho Creator is used to embed external content, such as videos, websites, dashboards, and more, by inserting an <iframe> code. This allows you to display content from within Zoho products using their own embed codes. Further, third-party resources can also be directly embedded inside your custom dashboard. Therefore, it enables in-application viewing of content like YouTube videos, blogs, Google Maps, websites, external analytics tools, web apps, and more, without redirecting users outside the application. While embedding it, you can choose to set the dimensions of the embedded asset and preview how it will look in the live mode of the application.
Example - A Zoho Writer document or a video uploaded on Zoho WorkDrive can be inserted through an embed snippet by adding the <iframe> code of their published version. The snippet will then serve as a container that loads the external URL in place inside the dashboard.
Security Tip: Ensure to embed content only from trusted resources to avoid CORS issues and protect your application from security risks.

1.4. Use cases

1. ZML Snippet to display custom column chart on dashboard - In a Project Management application’s dashboard, a highly customized metrics summary is implemented to provide real-time insights. A ZML snippet is embedded on the dashboard page with the code given below to design this summary panel. This summary includes a chart that compares outgoing monthly projects against their expenses, allowing users to monitor financial performance closely. Additionally, dynamic health indicators display the positive or negative flow of projects and expenses within the month, offering immediate visual feedback on project health.
  1. <%{
  2. %>
  3. <panel>
  4. <pr width='fill' height='fill' bgColor='#ffffff'>
  5. <pc>
  6. <pr width='fill' hAlign='left'>
  7. <pc>
  8. <text paddingTop='15px' paddingLeft='15px' color='#000000' colorType='solid' size='19px' bold='true' type='Text' value='Project vs Expense'> </text>
  9. </pc>
  10. </pr>
  11.   <pr width='fill'>
  12.     <pc padding='10px' bgColor='transparent' bgColorType='noFill' width='100%' hAlign='center' vAlign='middle'>
  13. <pr width='fill' height='10px'>
  14. <pc>
  15. </pc>
  16. </pr>
  18.       <pr width='fill' height='auto'>
  19.         <pc padding='20px' bgColor='transparent' bgColorType='noFill' borderColor='#E4E9FA' borderColorType='solid' borderWidth='1px' width='50%' hAlign='center' vAlign='middle' cornerRadius='10px'>
  20.           <pr width='auto' height='auto'>
  21.             <pc>
  22.               <text marginLeft='0px' marginRight='50px' marginBottom='0px' marginTop='0px' padding='0px' color='#333333' colorType='solid' size='16px' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' value='Total Tasks'> </text>
  23.             </pc>
  24.             <pc>
  25.               <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='18px' bold='true' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='458'> </text>
  26.             </pc>
  27.             <pc>
  28.               <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' paddingTop='6px' paddingLeft='10px' paddingRight='10px' paddingBottom='6px' color='#115E59' colorType='solid' size='14px' bold='true' type='Text' bgColor='#CCFBF1' bgColorType='solid' cornerRadius='10px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='+17%'> </text>
  29.             </pc>
  30.           </pr>
  31.         </pc>
  32. <pc width='10px'>
  33. </pc>
  34.         <pc paddingLeft='10px' paddingRight='10px' paddingTop='20px' paddingBottom='20px' bgColor='transparent' bgColorType='noFill' borderColor='#E4E9FA' borderColorType='solid' borderWidth='1px' width='50%' hAlign='center' vAlign='middle' cornerRadius='10px'>
  35.           <pr width='auto' height='auto'>
  36.             <pc>
  37.               <text marginLeft='0px' marginRight='5px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='16px' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' value='Average Expense'> </text>
  38.             </pc>
  39.             <pc>
  40.               <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='18px' bold='true' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='$19,888'> </text>
  41.             </pc>
  42.             <pc>
  43.               <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' paddingTop='6px' paddingLeft='10px' paddingRight='10px' paddingBottom='6px' color='#991B1B' colorType='solid' size='14px' bold='true' type='Text' bgColor='#FEE2E2' bgColorType='solid' cornerRadius='10px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='+1%'> </text>
  44.             </pc>
  45.           </pr>
  46.         </pc>
  47.       </pr>
  48.     </pc>
  49.   </pr>
  50.   <pr width='fill' height='auto'>
  51.   <pc >
  52. <chart elementName='Month vs. Expenses' height='fill' type='Column' bgColor='#ffffff' theme='theme' cornerRadius='0px' legendPos='none' appLinkName='thisapp' formLinkName='Expenses' xfield='Expense_Date' yfields='sum:Amount' showDataLabel='true' dateGrouping='month_year'/>
  53. </pc>
  54. </pr>
  55. </pc>
  56. </pr>
  57. </panel>
  58. <%

  60. }%>
2. HTML snippet that displays dynamic capacity levels of a flight - In an Airline Management application, an HTML snippet is embedded to display a real-time flight capacity indicator. Deluge is used to fetch data from the Ticket Bookings report, which feeds a custom progress bar and up/down arrows to visually represent current capacity levels and fluctuations, providing users with immediate insights to avoid overbooking risks and aid seat allocations.
  1. <%{
  2. counts = Passenger_Details[ID != null].count();
  3. maxPassengers = 50;
  4. percent = toNumber((counts/50)*100);
  5. %>
  6. <style>
  7.   .scorecard {
  8.     width: 320px;
  9.     padding: 1.5rem;
  10.     border-radius: 16px;
  11.     background: rgba(44, 44, 44, 0.95); /* dark neutral glass */
  12.     backdrop-filter: blur(20px);
  13.     -webkit-backdrop-filter: blur(20px);
  14.     border: 1px solid rgba(255, 255, 255, 0.3);
  15.     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  16.     color: #e0e0f8;
  17.     font-family: Arial, sans-serif;
  18.     text-align: center;
  19.     position: relative;
  20.   }
  21.   .scorecard h2 {
  22.     margin: 0 0 0.5rem;
  23.     font-size: 1.4rem;
  24.     color: #FFFFFF;
  25.   }
  26.   .score {
  27.     display: inline-block;
  28.     font-size: 2.8rem;
  29.     font-weight: bold;
  30.     color: #6147e5;
  31.     vertical-align: middle;
  32.   }
  33.   .trend {
  34.     display: inline-block;
  35.     font-size: 1.6rem;
  36.     font-weight: bold;
  37.     color: #2ecc71;
  38.     margin-left: 0.5rem;
  39.     vertical-align: middle;
  40.   }
  41.   .progress-container {
  42.     margin: 1.2rem auto 0;
  43.     height: 18px;
  44.     border-radius: 9px;
  45.     background: rgba(255, 255, 255, 0.2);
  46.     overflow: hidden;
  47.     width: 100%;
  48.     position: relative;
  49.   }
  50.   .progress-bar {
  51.     height: 100%;
  52.     width: <%=percent%>%;
  53.     background: linear-gradient(90deg, #8f74e5, #6147e5);
  54.     position: relative;
  55.   }
  56.   .progress-indicator {
  57.     width: 14px;
  58.     height: 14px;
  59.     background: #fff;
  60.     border: 3px solid #6147e5;
  61.     border-radius: 50%;
  62.     position: absolute;
  63.     top: 50%;
  64.     transform: translateY(-50%);
  65.     right: -7px; /* Half of indicator width to center */
  66.     box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  67.   }
  68.   .progress-text {
  69.     position: absolute;
  70.     top: calc(50% + 20px);
  71.     right: 1.5rem;
  72.     font-size: 1rem;
  73.     opacity: 0.8;
  74.     color: #fff;
  75.   }
  76. </style>

  78. <div class="scorecard">
  79.   <h2>Passenger Capacity</h2>
  80.   <span class="score"><%=percent%>%</span><span class="trend">⬆︎</span>
  81.   <div class="progress-container">
  82.     <div class="progress-bar">
  83.       <div class="progress-indicator"></div>
  84.     </div>
  85.   </div>
  86.   <div class="progress-text"><%=percent%>/100%</div>
  87. </div>
  88. <%

  90. }%>

1.2. Navigation guide for snippets

After you've created a page from the edit mode of your application, you can find the snippet element on the left pane of the page builder. When Snippets is clicked, the three types of snippets are displayed, allowing you to drag and drop the desired one onto the building space.
 
  1. Creating and managing ZML snippets
  2. Creating and managing HTML snippets
  3. Creating and managing embedded iframe snippets
  4. Understanding pages
What's next
Previous
What's next
Learn to create ZML, HTML, Embed snippets to introduce interactive panels, UI elements, external embedded elements, and more into your pages.
Previous
Learn about embedded reports can be inserted within pages to serve as part of a centralized dashboard, making form data easily accessible and organized with other relevant page elements.