Opening a Form in Popup Mode from an HTML Button in Zoho Creator
The Challenge
When embedding buttons on a Zoho Creator page using HTML, you might want to open a form in a popup window when the button is clicked. Simply using an <a> tag with zc-popup attributes doesn't always produce the expected popup behavior.
Solution: Use Page Redirection with the openUrl() Function
Solution: Use Page Redirection with the openUrl() Function
To reliably open a form in popup mode, follow this two-step approach:
Step 1: Create an Intermediary Page with openUrl() Function
- Create a new page (e.g., "OpenScript") that contains a Deluge script with the
openUrl()function - Configure the function to open your target form with any required parameters
- Example script for your intermediary page:
openUrl("#Form:Scripts_Notes?CID=" + input.CID + "&Type_field=" + input.Type, "popup window", "width=800px,height=600px");
Step 2: Link to the Intermediary Page Instead of Directly to the Form
In your HTML button or link, reference the intermediary page instead of the form itself:
<a href="#Page:OpenScript?CID=<%=prov.ID%>&Type=<%=type.ID%>" class="add-note-btn">
<i class="fas fa-plus"></i>
Add Script
</a>
How It Works
- When a user clicks the button, it opens the intermediary page
- The intermediary page executes the
openUrl()function - The
openUrl()function then opens the actual form in a popup window with the specified parameters
Important Notes
- Make sure all required parameters are passed correctly between pages and forms
- You can customize the popup dimensions in the
openUrl()function's third parameter - This approach works because the
openUrl()function has direct access to Zoho Creator's internal methods for handling popups
By using this approach, you can ensure consistent popup behavior for forms accessed from HTML buttons in your Zoho Creator applications.
Related Articles
How to properly set Subforms in Zoho Creator Part 2
To build a robust Order form in Zoho Creator you need to be able to automatically "fetch" the information about a product and let the system pre-populates the subform with pre-existing data in the Products Table. First, you need to have a Products ...How to properly set Subforms in Zoho Creator Part 3
The first step is to have the Subtotal or Total field value in the Order Form. Normally this would be a currency field or decimal field if you need to consider 1 or more decimals into your calculations. If not you can also set it the field as a ...How to properly set Subforms in Zoho Creator Part 1
This is the most important step in the process of setting up your Zoho Creator database. A properly linked setup will enable your information to run smoothly and avoid wasting space ( MB ) First, you need to create at least 2 Forms. For example.- ...How to define number of subform rows dynamically using script in Zoho Creator?
It´s important to highlight that this post assumes you are already familiar with proper subform creation in Zoho Creator. If you are not please check out our Master Zoho Creator Subforms course in the url below before implementing this custom ...What configuration do we need to provide Zoho one users so they can manage the customer portal app in Zoho Creator?
Users added as developers in the application level cannot access all features. Add them as service admin under the Zoho One panel to access all features in Zoho Creator Homepage.