Creating a Zoho widget

I had a requirement to display a list of related record for a Deal record in Zoho. If you are new to Zoho, I would recommend you to visit the site for more info. Zoho After looking at the details there was one way I could do it. The way was to create a widget that can query and show the result under Deals. It’s not that straight forward. The module structure is as below, so let’s start creating a Zoho widget for the requirement. Build Widgets in Zoho CRM

Sign up for a FREE Zoho account to start with Zoho : Sign Up FREE and reach out to us for any help you need on it.

Requirement

Deal -> Child Submission – > Child Approvals this is the module structure. So you see Deals does not have a direct relationship. So we have to query to get the data.

Setup your development environment

Before you start building the widget you will need to setup your environment, so let’s start that first.

Zet is a command line interface that helps developers build and package widgets in Zoho CRM.

Download the nodejs source code from “https://nodejs.org/en/download/”.

Run the following command to install the zapps cli node package.

$ npm install -g zoho-extension-toolkit

Run the following command to ensure that the installation is successful.

$ zet // Help information about 'zet' command will be shown.

If all these steps were good you are ready for development. Let’s move on to create the project. Create a folder on your local drive :

Create a project

Run the following command to create new project. The below screenshots are shown step wise. Select ZOHO Crm to start with as we will be dealing with Zoho CRM data in this example.

$ zet init

Once the ZOHO crm is selected the prompt will ask for a name. This step will create a folder in your current folder with the name you provided. change your directory using the CD command and type zet run . The run command will run the local server for this page to be hosted. You will need this page to test the widget and publish it to your orgs.

Now if you go to the localhost url you should see the screen like below click on Advanced and proceed to continue

The below screen will come up which means your local setup is all good and you can start coding.

At this point if you go to check the folder we created initially you will see the below folder structure. The code files will be in the app folder. You can find a file called widget.html in there, this if the file you will need to modify as per your need. Go ahead and play around with it.

Once you are satisfied with your code changes you need to distribute this as a package. Run the below command to validate the package

zet validate

Once you see a valid message use

zet pack

to create the package . The package will be placed in the parent folder in a new folder called dist. Now this is the zip file which is ready to be sent to be used as a widget.

Login to the zoho account where you will upload or use this widget. Go to settings and under developer space you should see Widgets . Click on it and follow the steps to fill the information and save it.

Once you filled in the info, you might be asked if you want to host it outside of zoho or on the zoho . In this example I am using zoho to host the code file. Upload the zip file we have received after packaging here.

Now you should be able to go to the module page where you wanted to add this widget and use it. In my case I wanted to show some information on a Deals page. So I went to Deals page and clicked to Add Related List and selected the unused widget. As you can see below this code just shows the deal ID. That’s enough to start the example I guess 🙂

Conclusion

This is the end of the “creating a zoho widget” post. I hope you can start your widget creation journey with this post. If you got stuck anywhere, please let me know and will try to help as much as I can. Till next time.. Keep reading and keep sharing..