Hi, how can we help?

Working with widgets

ZDK CLI can be used for efficient widget management in Zoho CRM. This document serves as your guide for working with widgets in ZDK CLI. With the ZDK CLI, you can:

• Easily pull and manipulate all existing widgets.
• Create new widgets using ZDK CLI command.
• Integrate your widget configurations with version control systems (VCS).
• Export widgets effortlessly to other Zoho CRM orgs.

Creating Widgets in ZDK CLI

Use the zdk meta:create widgets command to create widgets in ZDK CLI.

When the command is executed it asks for user input prompts for:

• name of the widget
• api name of the widget description of the widget
• type of the widget (Web tab, Related list, Custom button, Settings, Home page dashboard, Wizard, and Blueprint)
• hosting type of the widget (Internal, External)
• base url. 

Once the zdk meta:create widgets command is run, a JSON file that contains the details of the widget's settings is created at the path: {ZDK-Project-Name}/crm/meta/widgets. In case of widgets with internal hosting, a widget project directory is created at the path: {ZDK-Project-Name}/crm/widgets. The widget.html file is created at {ZDK-Project-Name}/crm/widgets/{Widget-Name}/app path. Include the logic for your widget into the widget.html file and design your widget. You can also use a different HTML file name other than widget.html for including your widget's logic, but make sure to provide this file name at the "start_url" property in the widget's JSON file.

Let us consider the example of a Geocoding Related List map Widget in Lead Record Details page that includes the features such as lead location display, direction to the lead's location and vicinity leads display. It utilizes the Google Maps JavaScript API for map functionalities.

The sample html code of Geocoding Related List Map Widget is included here: download Geocoding Related List Widget. Make sure to replace the key={API_key} parameter with the API key from your google map's API page.

Directory tree of a widget with internal hosting:

Once the widget.html file is updated, execute zdk org:push and zdk org:push:result commands so that the widget gets reflected in your Zoho CRM org.

<

After successful execution of the zdk org:push:result command, the widget is available in Setup > Developer Hub > Widgets in your org

Navigate to Setup > Customization > Modules and Fields > Leads > Layouts > Standard > Detail View to add the Widget to the Detail View of Lead Module.

The widget shows up as a Map in Lead's details page.

For more details on this widget please refer to our post in the Kaizen series Geocoding Leads' Addresses in ZOHO CRM

Updating Widgets in ZDK CLI

An existing widget can be modified by changing the contents of the corresponding JSON file in the path {ZDK-Project-Name}/crm/meta/widgets. The below fields are modifiable:

• start_url
• description
• active
• base_url(editable in external widgets)
• permissions
• description
• name

To update the logic of an existing widget with internal hosting, you can modify the content of widget.html and execute zdk org:push and zdk org:push:result commands.