Understanding the zc_LoadIn parameter
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.
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.
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 | 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 | 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 | 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. |
Open as popup (zc_LoadIn=dialog)
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.
The iframe embed works similar to HTML embed in case of using Creator components. If you've specified an external URL, then the resource will be opened in the specified window by replacing the current URL.
Using the open form action
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.
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
Configuring the zc_LoadIn parameter
To learn more about the zc_LoadIn page parameter, click here. Open as popup Open in HTML/iframecontainer To open your app component as a popup You can use the zc_LoadIn parameter to load your app components in a popup when the page loads by following ...Understanding Requests
1. What Does This Page Cover? Learn about requests and understand the crucial role they play in initiating and guiding the acquisition of required goods or services. 2. Overview In the procurement process, requests play a pivotal role in initiating ...Understanding Projects
1. What Does This Page Cover? Learn about the significance of Projects, why they are essential, and the impact they make in streamlining the procurement process. Understand more about the procurement process in detail. 2. Overview The concept of ...Understanding Procurement Process
What Does This Page Cover? Learn how you can create a procurement request and the various stages involved in the process for organizations. Overview Procurement is a constructive method used to streamline an organization’s procurement process to ...Understanding Quotations
What Does This Page Cover? Learn about Quotations in the procurement process, Request for Quote (RFQ), and how they help users with effective quote comparison and to complete the purchase successfully. Overview Quotations in procurement refer to the ...
New to Zoho LandingPage?
Zoho LandingPage Resources