Create Your First Widget

Create Your First Widget

Using the widgets feature, you can directly embed UI components in a CRM and use the data form a third-party application to perform actions as per requirement.

Creation of a Widget

Once the Zoho CLI is installed, you can create your own widget.

Step 1

Once the CLI is installed, run this command to create a new project.

  1. $ zet init

Step 2

Select a Zoho service and give a Name for the widget which you want to create. In this case, select Zoho CRM as the service.

The sample project will be created in the respective folder directory.


Step 3

To open the sample project, run the following command:

  1. cd {Project_name}

Now, you can start desiging and including the UI components for the Widget.

 

Note

You can find the HTML file for the widget in the app folder, named "widget.html" by default.

Step 4

The 'widget.html' file contains the structure, design and components of the Widget. To use the Zoho CRM APIs in the widget, you can use the API helpers provided in the JS SDK.



Note

You can add additional designs and functionality to the Widget by creating the necessary js files and stylesheets (optional).

Step 5

Once you have created the widget, you can host the widget locally and test.

To host the widget locally

  1. $ zet run

Once you've tested the widget and find no problems with it, you can package the widget and host it internally or externally.

Register Listeners

And in some cases where contextual data should be passed to the widget, you need to register for the appropriate events. Registering an event means defining a function that will be executed when a certain event is triggered by your application. Event can be something that the browser does or something a user does. Following are examples of some events:

  • DialerActive - Triggered everytime softphone window is toggled.
  • Dial - Triggered when Call icon inside ZohoCRM is clicked.
  • PageLoad - Triggered when ever an entity Page (Detail page) is loaded.

The sample code given below can be used to subscribe to a PageLoad event in your widget

  1. ZOHO.embeddedApp.on("PageLoad",function(data){
  2. console.log("Page Loaded with data");
  3. console.log(data);
  4. })
  5. The below code snippet is used to initialize your widget and start listening to events in your CRM application:
  6. ZOHO.embeddedApp.init()
  7. ZOHO.CRM.CONFIG.getCurrentUser() is the API that returns the user infomation such as name, Id, role, profile etc.The code to invoke an API is
  8. ZOHO.CRM.CONFIG.getCurrentUser().then(function(data){
  9. console.log(data);
  10. });

You can find the API helper, JS SDK and some sample widgets in out Github page.




    • Related Articles

    • My timesheet widget

      My Timesheet is an interface in Zoho Projects where you can access and manage your time logs across different projects in one go. We shall learn how to make the best use of the My Timesheet widget and the Timesheet Reports here. Feature Availability: ...

    • How to create my first signup form?

      Once you create your Zoho MarketingHub account, we’ll take you to our welcome page, where you can start with creating your first signup form. To create a signup form, On the Welcome page, click the Create signup form. Signup form creation is divided ...

    • Creating your first mailing list

      Once you create your Zoho Campaigns account, you'll be redirected to our welcome page, where you can create your first mailing list. You can create email list/mailing list to organize your contacts and perform different actions on them.  To create a ...

    • Creating your first email campaign

      In this section, you’ll learn how to create and send a successful email campaign. Name your campaign On the Welcome page, click the Create Campaign button. The Basic Info page will open. Enter these details: Name - Select an easily recognizable ...

    • Create the first Java Application

      Let us quickly walk through the sequence of steps to use Java SDK.       1. Register a Zoho client as described in the page link.       2. Create the File hierarchy in your eclipse project as shown below:              3. Create a folder ...