Widgets are used to extend the capabilities of your Zoho Creator application, helping you perform tasks that couldn't be accomplished using the built-in features, as well as enhance the front-end capabilities of your app. You can create a feature, configure it as a
widget, and add it to your
page to attain the kind of usability you are looking for.
You can also incorporate third-party apps that cater to your Creator app's requirements in your pages as widgets. In these widgets, you might want to configure certain navigation actions to be performed upon clicking any of the buttons. For example, upon clicking the Previous button, users must be redirected to the previous URL; upon clicking the Cancel button, the widget popup must be closed while users remain in the parent page. These actions will be executed when the domains of both the parent and child windows are the same. Currently, if the parent and child windows operate in different domains, then the respective actions will not be executed due to cross-domain restrictions.
With the navigateParentURL() method, you can perform an action in the parent window from the child window itself. In other words, this method can be used to control only the parent container and the actions executed for the parent URL.
How to identify parent window and child windows?
The parent window is the main window on which your user has currently landed and will perform any operation. For example, the Dashboard page in your application is the parent window. All the windows that open inside your main window are the child windows. For example, an Email Subscribe popup that opens inside your Dashboard page is a child window.
Note: There can be multiple child windows in your parent window.
Let's say you've created an application named Food Delivery Management, in which you've built a form titled User Details. Users will enter their details and, upon checking the Verify Details field (decision box), a Verify Phone Number popup will open. This is actually a third-party service incorporated as a widget. Users can either enter their phone number and click Verify or close the popup.
After closing the popup window, we need to explicitly switch back to the parent window (here, its a form). In this case, since we've used a third-party service that belongs to a different domain, the close action will not be executed. This is because widgets cannot execute URL actions when the parent and child windows operate in different domains. This is where navigateParentURL() method comes into the picture.
Syntax
- var param = {
- action:${ACTIONVALUE}
- url: ${URL}
- window: ${WINDOWTYPE}
- }
- ZOHO.CREATOR.UTIL.navigateParentURL(param)
Note: This method is case-sensitive. In case of two or more words as its value, camel case is accepted.
For example, the above syntax can be used as follows.
To open a URL
- ZOHO.CREATOR.init().then(function (data) {
- var param = {
- action: "open",url: "https://www.zoho.com/widgets.html", window: "new" };
- ZOHO.CREATOR.UTIL.navigateParentURL(param);
- });
To close a URL
- ZOHO.CREATOR.init().then(function (data) {
- var param = {action: "close" };
- ZOHO.CREATOR.UTIL.navigateParentURL(param);
- });
Label | Value |
Action | - open - to open the specified URL in new/parent window . If values are not passed for 'url' or 'window' parameters, then the specified action will not be executed.
- reload - To load the previously visited page.
- back - To reloads the parent window.
- close - To close the last opened parent container.
- close all - To close all open dialog parent containers in the parent window.
|
|
URL | You can specify any URL link here. Also, you can include Creator component URls appended to hash (#). Example: #Report: Report_Name |
Window type | "new" , "same" |
Example
Let's assume you've created a quiz management app named Zylker Tutorials, in which users can attend quizzes on topics of their choice.
Once a user completes the quiz and clicks the Next button, they'll be taken to the Verify Captcha page that contains a widget. This third-party widget is configured to display images from which users need to check the relevant options to prove that the quiz answers haven't been automated (entered by a robot). If the wrong option is checked, an error will be displayed on the same page. After checking the correct option, users will be redirected from the widget to the User Details form. This redirection is achieved using the navigateParentURL() method configured to perform an open action (opens a form). Upon entering the required details, users can submit the form.
Info: Additionally, you can add a decision box field named Captcha Verified and enable it to be visible only to the users .You can configure a worklow to run a check and ensure that the entered email address matches with the logged-in user's email address. Upon verification, the Captcha Verified field's value can be set to true.
To learn how to configure the above use case, click here.
Limitations
Currently, while specifying the window type, popup window is not supported.