Requirement

Use Case

Steps to follow

Note: When entering commands, there is no need to enter the dollar sign ($) explicitly, it would already be present by default. Commands can be run in Terminal for Mac OS and in Command Prompt for Windows. 

Note:   

You will be prompted to enter the system password. When typing in the password, the characters won't be visible.

Note: Use the following command in the event of permission issues:

sudo zet init

Note: 

The project is basically a folder which is used to store files that are required to render the widget. The project name can contain only alphanumeric and underscore characters. 

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. 

Note: 

1. By default, the widget.html file will be present in the App folder.
   
2. 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 i.e., https://127.0.0.1:5000/app/widget.html

You can use the attachment provided at the end of this tutorial to build the application. Copy the contents from the attached widget.html file and paste it into the widget.html file created on your machine. Copy and paste the CSS and JS files into the app folder of your project (parent folder). Each file has a specific use. For example, the css file contains code related to the design of the cards, and the JS file contains the code to define the elements in the card.

Note: In the JS file (Widgets -> App -> Assets -> JS), search for creatorapp.zoho.com/<app_owner>/, and replace the placeholders with the actual app owner name and the application link name. Similarly, ensure that the report names are mentioned correctly.

Note: The previous command will result in exiting the project directory. You have to navigate back to the project directory and run the following command.

Note: The zip file can be found in the dist folder of your project directory. This is mentioned earlier in step 13.

See how it works

Points to note

1. When entering commands, there is no need to enter the dollar sign ($) explicitly, it would already be present by default.
2. Ensure the image fields are visible in the quickview of the List report.
3. node and npm are predefined package managers that are used to run zet - zoho extension toolkit
4. If the widget.html file does not open in Sublime or Visual Studio, move it to another accessible folder.
5. Index file should be in the format /<widgetfilename>.html.
6. You can use permissions to hide the Add Mobile component from customers.

Related Links

1. Widgets
2. Pages