Page script and variables
1. What does this page cover?
Learn about page scripts, their creation and subsequent usage inside the pages component to populate dynamic values in your page elements, thereby minimizing the need for multiple snippets in your page.
2. Availability
- Page scripts is available in all the data centers.
- They can be created in all the pricing plans of Creator.
- They can only be created by the super admin, admins, and developers, while other users can view them with in live mode with relevant permissions.
3. Overview
In general, a code script refers to a block of code or a function that is created to handle a specific request. In other words, a script executes the configured actions or provides the necessary response when a particular event or condition occurs. For example, you can configure a script to be associated with user actions such as clicking a button or pressing a key. These scripts provide a mechanism to define the desired output when specific events occur and allow developers to control the flow and response of the script in various scenarios.
4. Page scripts and variables in Creator
In Creator, page scripts are functions that can be created to accomplish common tasks inside pages. These functions enable you to write your own logic using Deluge scripting language, enabling you to dynamically fetch and populate required values across all the page elements using page variables.
Page script lets you manage the entire script for a page in one place — the Page Variables & Script tab. Upon accessing your page in live, the script will be executed and values populated in the configured elements.
Note: You can create only one script in a page in your Creator application.
Page variables are used to store values within your scripts. These variables have a data type that determines the kind of data they can hold, such as numbers, strings, or boolean values. These variables allow you to store data, perform calculations, and control the execution flow of your script.
You need to create the page variables in the Variables tab first i.e., you cannot create variables while writing a script.
You can assign a name to these variables, which in turn can be used as variable references inside the script and page elements.
- It is recommended to specify variable names as something meaningful and descriptive, so that they can be easily understood in a complex function.
- You'll be warned when you use a restricted word to name the page variable.
You can assign values to the page variables in the Deluge code editor. Currently, we support the following data types for page variables: string, int, boolean, float, and collection.
Creator supports collection variables such as list and map. A list variable stores a list of values. Eg. list_var = ["john", "smith", "emma"]. The values in the list can be accessed by using its index. In this example, "john" can referred as list_var[0] where 0 is the index. Similarly, "smith" can be referred to as list_var[1] and so on.
A map variable stores values in key-value format. Say map_var = {"name":"stevin","gender":"male","age":"30"}. The values in the map can be accessed by using its key. Here the value for gender can be retrieved by specifying its key as map_var("gender") where "gender" is the key and its value is "male".Creator supports collection variables such as list and map. A list variable stores a list of values. Eg. list_var = ["john", "smith", "emma"]. The values in the list can be accessed by using its index. In this example, "john" can referred as list_var[0] where 0 is the index. Similarly, "smith" can be referred to as list_var[1] and so on.
Note: You can apply display formatting to variables with integer and float data types.
You can verify if the page script you've configured is working as expected by executing the page script. Page variables can be provided with test values in the Execute pop-up or assigned values in page script and executed. This helps to identify errors in your script and rectify them.
5. See How It Works
Let's assume you've built an Employee Management Creator application in which you've created a page titled Employee Dashboard. When employees login to their respective dashboards, this page will list their details including the number of sick and casual leaves available. You (admin/super admin) can configure a page script that dynamically populates these values when employees login. The below video shows how the required details are auto-populated based on the employee's logged-in email address.
6. Syntax
6.1 General syntax
Note: This syntax applies to the following page elements — panel, chart, gauge, search (criteria), embed forms and reports (field values), buttons (query parameters), and embed snippet. Learn more
- ${variable_name}
Here, variable_name refers to the name you had assigned to the page variable.
Depending on the type, a collection variable can be retrieved by providing either a key or index. The syntax for a collection variable is as follows:
- ${collectionVar.get(0)}
where 0 denotes the index.
- ${collectionVar.get("Name")}
where Name denotes the key.
6.2 ZML snippet
The syntax to use a defined page variable inside a ZML snippet is as follows.
- <text type='variable' value='${variable_name}'> </text>
6.3 HTML snippet
The syntax to use a defined page variable inside an HTML snippet is as follows.
- <html tag><%=input.variable_name%></html tag>
6.4 Query Parameters
You can pass collection variables as a query parameter to another page after encoding the values of those variables.
For a map collection variable, pass the query parameter as shown below:
collectionVar = {"name":"stevin", "gender":"male"}
query param: ?collectionVar=%7B%22name%22:%22stevin%22,%20%22gender%22:%22male%22%7D
For a list collection variable, pass the query parameter as shown below:
collectionVar = ["john","smith"]
query param: ?collectionVar=%5B%22john%22,%22smith%22%5D
7. Using page variables
The page elements where variables can be used are listed below:
- Panels:
- Display: The display aspect of text and button in a panel can be configured to display the required data in place of the page variable.
- Action: The action aspect of text, image and button in a panel can be configured to display the required data in place of the page variable.
- Image: The images in a panel can be configured to display the required data in place of the page variable.
- Chart: You can set a filter (criteria) or use ZML attributes to filter the data based on the page variable.
- Gauge: You can set a filter (criteria) or use ZML attributes to filter the data based on the page variable.
- Search: The search element can be configured to display the search results (page or report) based on the page variable.
- Form: You can set the value of the fields in a form to display the data based on the page variable.
- Report: You can set a filter (criteria) or use ZML attributes to filter the data based on the variable.
- Snippets: You can display data inside HTML and ZML snippets based on the variable value.
- Button:
- Display: The display aspect of a button in a panel can be configured to display the required data. Learn how
- Action: The action aspect of a button in a panel can be configured to display the required data. Learn how
- Image: The images in a panel can be configured to display the required data. Learn how
8. Use Cases
- Display data from two different forms - Let's assume that you've created a Sales Management application using Creator. In the Employee Dashboard page, you want to populate the values of the total number of deals won by an employee, along with the individual count of deals won via chat and call. By creating a script that stores the values of the required records from the respective forms inside the page variables, you can display the required values inside a panel element in place of those variables.
- Display populated data upon button click - Let's assume that you've created a Hotel Management application. In the Guest Dashboard page, you've placed a button to enable your patrons to check in and check out with just a single click. You want your guests details, such as their booking ID, name, and email address, to be pre-populated when the Check-In form opens upon clicking the button. To achieve this, you can configure a button action and specify the variable name in the query parameters. When guests who have made room reservations click the Check-In button in your page, they'll be redirected to the Check-In form and can view the populated data as configured.
- Dynamic search using criteria - Let's assume that you've created a Partners Event Management application. In the Dashboard page, you've added a search element that enables partners to search for events. You want them to search for events that are happening only in their respective countries/locations. You can set a search criteria that will search events based on the partner's country and display the desired results. Here, the criteria specified is the page variable that stores details of events happening across countries. You can write a script that fetches and displays events based on partner's countries. This makes it easier for partners to access events details associated with their location.
9. Navigation Guide for Creation of Page Script
In the Edit mode of the application, when the application name at the top-left is clicked, the screen shows the different components created in that application. You need to select the required page and click the Open Page Builder button. Here, you can find the 
icon at the top. Upon clicking it, you can find both the Page Variables and Script tabs.
10. Prerequisites
To write a page script, you need to create variables first. These variables can then be used inside the script.
11. Points to Note
- You can create a maximum of 50 variables for a page.
Note: If you've created page parameters previously, they'll also be counted in the 50 variables limit as mentioned above. For example, lets assume you've created 60 parameters earlier. They'll be listed in the Page Variables tab and will continue to work as per the previous configuration. However, you'll not be able to create new page variables. You need to delete the parameters to accommodate the creation of new page variables.
- A variable name can contain a maximum of 50 characters.
- Page variable names are case-sensitive.
- You can name variables using letters (English), numbers, and the underscore character (_).
- A variable name must start with an alphabet.
- You can pass record ID and date values as page variable values.
12. Limitations
- Currently, you can only create one script (function) per page in your Creator application.
- You cannot call a script across pages inside Creator applications.
- If you had created page parameters previously, they cannot be edited (they would still continue to work according to their configuration). However, you can delete such parameters.
- You cannot perform write operations like adding or updating data using page scripts.
- The following Deluge tasks will not be listed while configuring the script for page script.
- Data Access
- Web Data
- Misc
- Sharing permissions
- You cannot create a custom Deluge function in page scripts.
Related Topics
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
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.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Understand Variables
What Does This Page Cover? Learn about variables that hold values that can be referred to and modified throughout your Creator application. Availability Variables are available for all plans of Creator. Only super admin, admins, and developers can ...Create and Manage Variables
1. What Does This Page Cover? Learn how to create a variable to hold values that can be referenced and modified throughout your Creator application. Learn more about variables and its significance before moving ahead. 2. Availability Variables are ...Configure page scripts
1. What does this page cover? Learn how to add page variables, create page script and subsequently use them inside the pages component to populate dynamic values in the page elements upon loading your page. 2. Availability This feature is available ...Understand Page Builder
1. What Does this Page Cover? Learn about the page builder and how you can customize your page and its elements according to your business needs. 2. Availability Pages can be created in all plans of Creator. Only the super admin, admins, and ...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 ...
New to Zoho LandingPage?
Zoho LandingPage Resources