Configuring action for panels and panel elements | Zoho Creator Help

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.
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. Setting up action for panels

1.1. Action types

 

1.2. See how to configure


1.3. Steps to configure action

You can configure an action for panels as a whole, for panel containers, or for specific panel elements. The action will be initiated when they are clicked on in the live mode of the application.

1. Navigate to the page builder of the required page and click Panel on the left pane.
2. Drag and drop a panel template from the list that appears alongside onto the building space. The Panel Configuration pane opens.
Notes
Note: If the panel was previously created, select the panel from the page builder and click Configure to open the Panel Configuration pane. Alternately, double click the panel to open the configuration pane.
3. Navigate to the Action tab on the section on the right. If you've selected a panel container or the panel as a whole, you will land on the Action tab by default.
4. Click the dropdown under Action type, and choose one of the following actions to be associated with the panel, panel container, or a panel element:
Action type
Properties
Description
None
The element will not have any action or navigation upon a click.
Open URL
i. Enter the URL link that needs to be opened.
ii. Choose if you want the URL to open in a New window (default value), Same window, or as a Popup. If Popup is chosen, you can customize the Width and Height in pixels.
Open form
i. Select a form, from any of the applications listed under your Creator account, that needs to be opened.
ii. Add necessary query parameters in the formats:
  1. <field_link_name>=${<page_variable>}
  2. <field_link_name>=<value>
This opens the form with the required field values auto-filled in the live mode.
Notes
Note: Use the "&" separator to pass multiple query parameters.
iii. Choose if you want the form to open in a New window (default value), Same window, or as a Popup. If Popup is chosen, you can customize the Width and Height in pixels.
Open report
i. Select a report, from any of the applications listed under your Creator account, that needs to be opened.
ii. Add necessary query parameters in the formats:
  1. <field_link_name>=${<page_variable>}
  2. <field_link_name>=<value>
This opens the target report in the live mode, with only the records that meet the query parameter's values.
Notes
Note: Use the "&" separator to pass multiple query parameters.
iii. Choose if you want the report to open in a New window (default value), Same window, or as a Popup. If Popup is chosen, you can customize the Width and Height in pixels.
Open page
i. Select a page, from any of the applications listed under your Creator account, that needs to be opened.
ii. Add necessary query parameters in the formats:
  1. <field_link_name>=${<page_variable>}
  2. <field_link_name>=<value>
This opens the target page in the live mode, with specific information displayed based on them.
iii. Choose if you want the page to open in a New window (default value), Same window, or as a Popup. If Popup is chosen, you can customize the Width and Height in pixels.
Execute function
i. Choose a function, from any of the applications listed under your Creator account, that needs to be executed.
Notes
Note: If a function that includes arguments is chosen, click the dropdown alongside the argument to choose an appropriate page variable that will supply a value to it. You can also supply any other value of your choice instead.
ii. Choose if you want the execution to be initiated:
  1.  At Once - Immediately on the click of the element.
  2. After Confirmation - After a confirmation popup is displayed, on the click of an element. 
Notes
Note: If you choose After Confirmation:
  1. Draft a Confirmation message. The default value is "Are you sure you want to execute the action?".
  2. Enter a value for the Confirmation execution button. The default value is "Yes".
  3. Enter a value for the Cancel execution button. The default value is "No".
iii. Draft a Success message that will be shown as a toaster on the page after the function is executed.
The configurations are automatically saved and will reflect in the live mode of the application.
  1. Understanding panels
  2. Adding and managing panel elements
  3. Configuring display for panels and panel elements
  4. Configuring style for panels and panel elements
What's next
Previous
What's next
Learn to configure the style properties of your panels to make them look visually appealing and aligned with the branding theme of your application.
Previous
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.