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

    • 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 ...

    • Create a Web App

      Using Web apps, you can create client based web-applications that use data from CRM and can be used to perform specific tasks. Building a web app Once the Zoho CLI is installed, you can start creating your own web app. Step 1 Once the CLI is ...

    • Working with Widgets

      Widgets are components that bring additional functionality to your CRM. Set up widgets in your CRM to incorporate various external services and make them work in CRM. Currently Zoho CRM supports 4 types of Widgets. They are the ones which are added ...

    • Create Solutions

      How Can I... Create Solutions Create Solutions Individually Attach Documents to the Solution Create Solutions In Zoho CRM, you can create solutions by: Entering data in the solution details form: You can manually fill in the Solution details gathered ...

    • Using OAuth2 - Serverless Functions

      Introduction Functions can be made accessible through OAuth2 protocol. OAuth2 method allows you to share specific data with any application while keeping your usernames and passwords private, by having specific scopes which grant access to specfic ...