Parameters are named values that are appended to your page URL as a query string.
This URL format allows the data to be retained on browser refresh and reload, thereby enabling you to set dynamic values while loading a page. In Creator, page parameters can be configured to pass values to pages (similar to how we pass arguments to functions) and display the desired outcomes inside page elements, such as panels, charts, gauges, forms, reports, and so on. Everytime a parameter is passed, the entire page loads and displays the outcome. However, you might want to load your Creator components in a specific container on the same page, without refreshing it. The zc_LoadIn page parameter enables you to open your Creator application components (forms, reports, and pages) either in a popup window or inside an embed container in the same window. You can also specify a name for the <div> container and use it as a reference in other page elements, such as buttons. - Open as popup
- HTML/Iframe embed
Things to know
- You can load your Creator application components in both HTML embed and iframe embed. These act as containers to hold your components and load them (Creator components) upon execution of a configured action in your page.
- You need to specify a name for the div embed container. This name can contain only alphanumerics and underscores.
- The div container's name must be specified in the name attribute of the embed/iframe container. Below is a sample code where myform is the name of the div container.
<div name="myform" elName='zc-component' formLinkName='Development_Tracking' params='zc_Header=false&zc_SuccMsg=Data Added Successfully!&zc_SubmitVal=Submit&zc_ResetVal=Reset'>Loading Form...</div> - The zc_LoadIn parameter will work only with Creator component URLs appended to hash (#). For example, if you want to open a form as a popup when the page loads, you need to specify the form URL in the below format: openUrl("#Form:Order_Details?zc_LoadIn=dialog", "same window");
Note: - When a Creator component's URL is specified from the hash part, the zc_LoadIn parameter loads the required component by replacing the previous component post the hash. In the above URL, you can use zc_LoadIn to load a report (#Report:All_Orders) in place of the Order_details form.
- If the entire URL of a Creator component or if external URLs such as www.zoho.com (or) www.google.com are specified, the zc_LoadIn parameter will still load the specified URL by replacing the current URL. However, the required action will not be performed i.e., a popup will not be opened in case of zc_LoadIn=dialog or the component will not load in the specified embed container in case of zc_LoadIn=embed-<container name>.
- You can also load other Creator application components (forms,reports,and pages) in the current page by specifying the required component's URL appended to hash.
- In the above case too, if you use the entire URL of a component from another application, then the current page's URL will be replaced by the respective component's URL.
- You can mention the div container's name in the open Url() task, or use it in the href tag inside HTML/iframe embed.
- You can also configure the zc_LoadIn parameter in the following button element actions: open url, open form, open report, and open page.
- If you want to load your application component in a container, but if the required container is unavailable in your page, then the URL will open in a new tab. For example, if you've configured the zc_LoadIn parameter as a button action, but the page in which the parameter is used does not have a container, then the URL will open in a new tab.
- If you've used the same div container name in either more than one HTML/iframe embed or in both HTML and iframe embed, the required content will be loaded only in the first HTML embed container in which the container name is specified.
Syntax
The zc_LoadIn parameter can be used in both
openUrl() tasks and in an
href link. The configured parameter can then be used in
panel actions.
- openUrl
- href
Note: In the below table, the following are used as examples:
- Order_Details is the name of the form.
- same window is the window type.
- orderFormDiv is the div container's name.
openUrl syntax
Open as | Syntax | Syntax creation (creating container to load component) | Used in URL | Used in panel Actions |
Popup/dialog | zc_LoadIn=dialog | NA (no container dependency) | openUrl("#Form:Order_Details?zc_LoadIn=dialog","same window"); | Open form/report/page action: zc_LoadIn=dialog |
Embed container | zc_LoadIn=embed-<container name> | <div name='orderFormDiv' formLinkName='Order_Details' params=''></div> | openUrl("#Form:Product_Details?zc_LoadIn=embed-orderFormDiv","same window"); | Open form/report/page action: zc_LoadIn=embed-orderFormDiv |
Iframe | zc_LoadIn=embed-<iframe name> | <iframe src="order_Details" name="orderFormDiv"></iframe> | openUrl("#Form:Product_Details?zc_LoadIn=embed-orderFormDiv","same window"); | Open form/report/page action: zc_LoadIn=embed-orderFormFrame |
href syntax
Open as | Syntax | Syntax creation(creating container to load component) | Example |
Popup/dialog | zc_LoadIn=dialog | NA | <a href="#Form:Order_Details?zc_LoadIn=dialog"></a>
|
Embed container | zc_LoadIn=embed-<container name> | <div name='orderFormDiv' formLinkName='Order_Details' params=''></div> | <a href="#Form:Order_Details?zc_LoadIn=embed-OrderFormDiv&zcHeader=true"></a> |
Iframe | zc_LoadIn=embed-<iframe name> | <iframe src="<component embed URL>" name="orderFormDiv"></iframe> | |
Expected behavior
Open as | Component type | Behavior |
Popup/dialog | Creator components, such as forms, reports, and pages | Opens the component in a popup window |
Public URLs (eg. www.google.com) | Opens the URL in the same window by replacing the current (parent) URL. However, the required action will not be performed i.e., a popup will not be opened. |
Embed container | Creator components, such as forms, reports, and pages | Opens the component in the specified embed container |
Public URLs (eg. www.google.com) | Opens the URL in the same window by replacing the current (parent) URL. However, the required action will not be performed i.e., the component will not load in the specified embed container. |
Iframe | Creator components, such as forms, reports, and pages | Opens the component in the specified iframe |
Public URLs (eg. www.google.com) | Opens the URL in the same window by replacing the current (parent) URL. However, the required action will not be performed i.e., the component will not load in the specified embed container. |
This query parameter enables you to load your Creator app components in a popup window. This is for situations where you want to open a app component (forms, reports or pages) in your page as a popup, thereby improving the user experience and easing the data entry process.
Example
Let's say you've built a
Hospitality Management app, in which you've created a page named
Dashboard. You've embedded your
Add Complaints form in an
HTML snippet and added a panel containing three buttons—
Water Complaint,
Food Complaint,
Restroom Complaint—and configured each button's action to open the respective complaints form as a popup. This is done by specifying the
zc_LoadIn=dialog parameter in the respective buttons' query parameters.
When you access your page in the live app, you can click any of the following buttons—
Water Complaint,
Food Complaint,
Restroom Complaint—and the respective complaints form will load in a popup window. You can fill the required details and submit the form. Learn how to execute this example
here.
Open in embed container (zc_LoadIn=embed-<component_name>)
This query parameter enables you to load your app components in any embed container in the same window, without refreshing the page. You can now name your div embed container and use it as a reference elsewhere. You can load your Creator application components in both HTML embed and iframe embed.
For example, let's say you've built a
Hospitality Management app, in which you've created a page named
Dashboard. You've embedded your
Add Complaints form in an
HTML snippet and added a panel containing three buttons—
Water Complaint,
Food Complaint,
Restroom Complaint—and configured each button's action to open the respective complaints form in the HTML snippet. This is done by referencing the embed container's name in the buttons' query parameters.
When you access your page in the live app, the Add Complaints form will be displayed in the HTML snippet container. Users can click any of the following buttons—Water Complaint, Food Complaint, Restroom Complaint—and the respective complaints form will load in the HTML snippet container.
Using the open report action
In reports, search is based on individual fields in the records. You can use custom filters to filter the search results. However, these custom filters render the filtered version of the same report without refreshing the current page. If you want to dynamically show the filtered results of the same report, you can use the zc_LoadIn query parameter to load your application reports in any embed container in the same window, without refreshing the page.
For example, let's say you've built a
Hospitality Management app, in which you've created a page named
Dashboard. You've added an
Add Complaints form in this app, which has a dropdown field named
Complaint Type with the three options—
Water,
Food, and
Restroom. You've embedded the
Complaint Details report in an
HTML snippet and added a filter that filters records based on the
Complaint Type chosen. You've also added a panel containing three buttons—
Water Complaint,
Food Complaint,
Restroom Complaint—and perform the configuration for each button as in the above example.
When you access your Dashboard page in the live app, the Complaint Details report will be displayed in the HTML snippet container. Users can click any of the buttons—Water Complaint, Food Complaint, Restroom Complaint—and the respective complaints details will load in the HTML snippet container.
Similarly, you can use also display your application's page inside the embed container.