Extension pointers: Working with widgets to power-up extension capabilities (Part-2)

Widgets simplify work and enhance the functionality of Zoho CRM by contextually embedding third-party services and adding new features to Zoho CRM.

In the previous post (Part 1), we mentioned what widgets are, the basic steps to install ZET CLI, and how to create a widget. Here's a quick summary of those pointers before we move into further detail with our current post.

Widgets help embed applications in Zoho CRM and seamlessly synchronize application data into native CRM components.
It also helps to add new features to Zoho CRM and create customized UI interfaces using the HTML, CSS, and JS library.
Zoho Command Line Interface (ZET CLI) can be used to create, validate, package, and locally run your widgets.

After packing the widget you can embed it inside Zoho CRM as a connected app and host the widget either internally or externally on the server to get it running. As a continuation of the previous post, let's see the different ways to host widgets and how widgets can be embedded in Zoho CRM.

A widget application can be hosted either internally or externally.

Internal Hosting

Zoho's Servers are used to host an application internally. In order to host the application you created internally, you will need to upload the packed and zipped file of your project.

External Hosting

External hosting enables you to host your app externally with third-party web hosting solutions.

Where can widgets be embedded in Zoho CRM?

A widget can be embedded into different components in Zoho CRM

➤ Custom button

➤ Related list

➤ Web tab

In this post, we'll explain the steps involved in hosting a widget internally in Zoho using a connected app and embedding it in Zoho CRM Components while building an extension.

Steps to associate the Widget with a connected app of your extension and host it

1. Go to the Extension's Detail page of your extension.

2. Choose Connected Apps from the left panel of the Zoho Developer console under Utilities.

3. Provide the name and a description for the connected app. To host an application internally,

Choose Internal Hosting
The sandbox Zoho server URL is predefined and serves as the base URL.
Upload the zipped file of the widget from the dist folder of your project's directory

Click Save

Steps to Embed the widget

Once a widget is associated with your extension as a connected app, the next step is to embed and position the widget in the CRM components where you want it to serve its purpose.Now, let's see where you can embed the widgets.

Custom Button

Choose Components from the left panel of the Zoho Developer console under Build. Select the Links & Buttons tab and click Create New Button.

Provide the necessary details and select Invoke a Widget as the action you would like the button to perform.

Specify the HTML file location by appending it with the sandbox URL and click Save.

Once the custom button has been created successfully, you can test it in the sandbox testing environment to check if the functionality is working as intended. Later, when the extension is installed, the custom button will perform the functionality as defined in the widget in your Zoho CRM account.

Custom Related List

Similar to a custom button, it is possible to embed a widget into any module as a related list.

Choose Components from the left panel of the Zoho Developer console under Build. Select the Related Details tab and click Add Widgets.

Specify the sandbox URL of the widget along with the necessary details and click Save.

Web Tab

Choose Modules from the left panel of the Zoho Developer console under Build. Select the Web Tabs tab and click Create Web Tab.

Choose Type as Widget and specify the sandbox URL of the widget along with the necessary details and click Save.

Once you've embedded the widget in the required location, you can test it using the sandbox testing environment to see if the functionality is working as intended. Customize and enhance the widget's functionality as needed.

Up to this point we've explained in detail the process to install CLI, create a widget, associate the widget with a connected app, and embed it in Zoho CRM. In our upcoming post we'll see a working example of this process. Keep following this space for more information.

<<Previous

Next>>

Tout forum

France ZUGs

Zoho SalesIQ Resources

Sticky Posts
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select
Extension pointers - Simple yet significant pointers #11: Testing an extension in sandbox
After developing an extension using the Zoho developer platform, developers will want to test it before publishing it and making it available to end-users/customers. The Zoho developer platform includes a sandbox testing environment, which is a simulated
Extension pointers - Simple yet significant pointers #10: Publishing
Publishing an extension An extension can be created for an internal organizational purpose or to meet a common business need. In either case, an extension can only be made available to users after it has been published. Types of extension publishing Private:
Extension pointers: Working with widgets to power up extension capabilities (Part-3)
Widgets are useful for exchanging data between the third-party applications and Zoho CRM, as well as for displaying the data on a customized basis within Zoho CRM. They let you create customized UI interfaces that allow the data to be showcased through