Configure navigateParentURL() method
To use navigateParentURL() method in a widget
Create a widget
1. Download and install Node.js source code from this link https://nodejs.org/en/download/
2. Run the following commands to confirm that the installation was successful. The commands return the version of the package.
Note: When entering commands, there is no need to enter the dollar sign ($) explicitly; it will already be present by default. Commands can be run in Terminal for Mac OS and in Command Prompt for Windows.
- $ node -v
- $ npm -v
3. Run the following command to install the zapps cli node package.
- $ npm install -g zoho-extension-toolkit
Note: Use the following command in the event of any permission issues:
sudo npm install -g zoho-extension-toolkit
4. Run the following command to confirm that the installation was successful. It will return the version of the package.
- $ zet -v
5. Create a project using the following command:
- $ zet init
Note: Use the following command in the event of permission issues:
sudo zet init
6. Select Zoho Creator.
7. Specify a project name. Hit Enter.
Note:
The project is basically a folder which is used to store files that are required to render the widget. It can contain only alphanumeric and underscore characters.
8. Type cd <project/folder_name> and hit Enter to navigate to the project directory.
9. Run the following command.
- $ zet run
Note: This will run the HTTP server in your local machine in port number 5000. The port should not be occupied with any other process before starting the server. A relevant note may appear as a result of the above command.
10. To verify if the server has started successfully, navigate to widget.html and open it in a browser. The widget.html file will be present in the folder (project) created earlier.
Note:
By default, this file will be present in the App folder.
You can also access the widget.html file by following the below steps:
1. Open the local host URL (https://127.0.0.1:5000) in a new tab and authorize the connection by clicking Advanced->Proceed to 127.0.0.1.
2. Append /app/widget.html to the local host URL as follows: https://127.0.0.1:5000/app/widget.html
You should see the following screen:
11. Open the app folder in your project folder. Find the widget.html file in the same folder.
12. Enter your code in the widget.html file, save and download it. Any third-party app, for example Sublime, VS Code, or Eclipse, can be used to add or modify code in the html file. The widget.html file contains the structure, design, and components of the widget.
You can copy the below sample code in the widget.html file to navigate to the User Details form upon choosing the correct option inside the Verify widget in this example.
- function addData() {
- ZOHO.CREATOR.init()
- .then(function() {
- config = {
- action : "open",
- url : "https://creatorapp.zoho.com/megan/zylker-online-tutorials/#Form:User_Details",
- window : "same"
- }
- ZOHO.CREATOR.UTIL.navigateParentURL(config);
- });
- }
13. Navigate to the Settings page of the app in which you need to embed your widget. Select Widgets.
14. Click Create button.
15. The New Widget pane will appear.
16. Enter a name for your Widget.
17. Choose Internal option in the Hosting drop down list.
18. Upload the packed zip file from the dist folder in the Widget File field.
19. Enter /widget.html in the Index File field. The /widget.html file is the index file i.e., this file will be incorporated as the widget in your page.
20. Click Create. The created widget is added to the Widgets page.
21. This widget will appear as a drag-and-drop element in the page builder for all the pages present in your application.
Add widget to a page
1. Navigate to the Edit mode of your app.
2. Open the builder of the required page.
3. Select Widgets from the left pane. The created widget will appear.
4. Drag and drop the widget into the builder area.
5. Click Done to exit the builder.
Get started with sample data
To help you get started quickly, we've provided sample data that you can download and use to start creating widgets!
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
Understand navigateParentURL() method
This method is applicable to widgets. 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 ...Configure push notifications for your iOS app
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. As part of your Creator application’s workflows, you can configure push notifications. For these to work in your iOS app, ...Configure average
Average option in a panel allows a user to calculate and display the median value of a field in the selected form. Also, you can evaluate the average for all the records containing the chosen field or based on a set criteria. To configure average in ...Configure sum
The Sum option in a panel allows a user to calculate and display the Total/Sum of a field in a selected form. Also, you can evaluate the sum for all the records containing the chosen field or based on a set criteria. To configure sum in a panel Drag ...Configure count
Count option in a panel allows a user to calculate and display the count of total entries available in the selected form. Also, you can evaluate count for all the records containing the chosen field or based on a set criteria. To configure count in a ...
New to Zoho LandingPage?
Zoho LandingPage Resources