Understanding the zc_LoadIn parameter | Zoho Creator Help

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
  1. Open as popup 
  2. HTML/Iframe embed 

Things to know

  1. 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.
  2. You need to specify a name for the div embed container. This name can contain only alphanumerics and underscores
  3. 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&amp;zc_SuccMsg=Data Added Successfully!&amp;zc_SubmitVal=Submit&amp;zc_ResetVal=Reset'>Loading Form...</div>
  4. 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:
    1. 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.
    2. 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>.
    3. 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.
    4. 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.
  5. You can mention the div container's name in the open Url() task, or use it in the href tag inside HTML/iframe embed. 
  6. You can also configure the zc_LoadIn parameter in the following button element actions: open url, open form, open report, and open page.
  7. 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. 
  8. 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.
  1. openUrl
  2. href
NoteIn the below table, the following are used as examples:
  1. Order_Details is the name of the form.
  2. same window is the window type.
  3. 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>
<a href="www.zylker.com? zc_LoadIn=embed-orderFormDiv&zcHeader=true"> </a>

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.

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. 

    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 CRM Training
      Redefine the way you work
      with Zoho Workplace

        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 CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION








                                    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.




                                        Manage your brands on social media

                                          Zoho Desk Resources

                                          • Desk Community Learning Series


                                          • Digest


                                          • Functions


                                          • Meetups


                                          • Kbase


                                          • Resources


                                          • Glossary


                                          • Desk Marketplace


                                          • MVP Corner


                                          • Word of the Day


                                            Zoho Marketing Automation

                                              Zoho Sheet Resources

                                               

                                                  Zoho Forms Resources


                                                    Secure your business
                                                    communication with Zoho Mail


                                                    Mail on the move with
                                                    Zoho Mail mobile application

                                                      Stay on top of your schedule
                                                      at all times


                                                      Carry your calendar with you
                                                      Anytime, anywhere




                                                            Zoho Sign Resources

                                                              Sign, Paperless!

                                                              Sign and send business documents on the go!

                                                              Get Started Now




                                                                      Zoho TeamInbox Resources



                                                                              Zoho DataPrep Resources



                                                                                Zoho DataPrep Demo

                                                                                Get a personalized demo or POC

                                                                                REGISTER NOW


                                                                                  Design. Discuss. Deliver.

                                                                                  Create visually engaging stories with Zoho Show.

                                                                                  Get Started Now









                                                                                                      • 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 Approvals

                                                                                                        What Does This Page Cover? Learn about approvals in the procurement process, why, they are required, and the teams involved in timely approvals and rejections of PRs and POs. Overview An approval refers to a formal process of granting consent, ...
                                                                                                        Wherever you are is as good as
                                                                                                        your workplace

                                                                                                          Resources

                                                                                                          Videos

                                                                                                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                          eBooks

                                                                                                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                          Webinars

                                                                                                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                          CRM Tips

                                                                                                          Make the most of Zoho CRM with these useful tips.



                                                                                                            Zoho Show Resources