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

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.

SEE ALSO







            Zoho DataPrep Resources


                Zoho CRM Plus Resources

                  Zoho Books Resources


                    Zoho Subscriptions Resources

                      Zoho Desk Resources

                        Zoho Projects Resources


                          Zoho Sprints Resources


                            Zoho Orchestly Resources


                              Zoho Creator Resources


                                Zoho WorkDrive Resources




                                    Zoho Campaigns Resources

                                      Zoho CRM Resources

                                                  Design. Discuss. Deliver.

                                                  Create visually engaging stories with Zoho Show.

                                                  Get Started Now




                                                      Zoho Writer Writer

                                                      Get Started. Write Away!

                                                      Writer is a powerful online word processor, designed for collaborative work.