Building extensions #7: Create custom widgets for a simplified end-user experience

Building extensions #7: Create custom widgets for a simplified end-user experience

Discover the benefits of using widgets!

We explored the significance of widgets, prerequisites, and the availability of JS SDK methods as part of our previous post. In this post, let's go over a detailed example of using widgets along with certain Zoho Projects JS SDK methods.

Use case: A developer is working on a Zoho Projects task and wants to know if there are any existing references that could be used to get a head start on their work.

Goal: Our goal here is to simplify the developer's job by presenting them with articles that are relevant to the task at hand.

Solution: Widgets! To achieve this goal, it would be ideal for the developer to have access to relevant Zoho Desk articles from a tab on the Task Details page. This can be accomplished by developing a custom widget.

Required components:
  1. A connection between Zoho Projects and Zoho Desk.
  2. An extension configuration process that includes:
A. Creating an extension
B. Configuring the plugin manifest
C. Setting up the widget code to display the Zoho Desk articles on the Zoho Projects Task Details tab
We have already explored the steps to establish a connection, create an extension, and configure the plugin-manifest.json file as part of our earlier posts. You can refer to those resources for detailed guidance. In this case, we have already completed most of these steps (screenshots below).

1. Connection

We have created a connection to establish a secure integration between Zoho Projects and Zoho Desk.



2. Extension Configuration
A. Extension creation: We have created a new extension for Zoho Projects.



B. Plugin-manifest.json configuration: Once the extension is created, we next configure the plugin-manifest.json file to include the created connection and a widget.
For our extension use case, the plugin-manifest.json file is configured as shown in the below screenshot.



C. Setting up the widget code:
Now that we have the connection established, the extension created, and the plugin-manifest.json configured, let's go ahead and set up the custom widget code to achieve our goal.

Index.html - Widget code

<!DOCTYPE html>
<html>
<head>
<title>App Default Screen</title>
<style>
div.a {
line-height: 200%;
}
</style>
</head>
<body>
<div class="a">
<ul id="demo" style="font-size:20px"> <b>Article Details</b></ul>
</div>
</body>
<script>
var subject = "";
Util = {};
zohoprojects.init().then(function() {
//Fetching the task subject using the Zoho Projects JS SDK method
zohoprojects.get("task.name").then(function(response) {
subject = response.data;
var articledetails = {
type: "GET",
headers: {
"orgId": "xxxxxxx",
"Content-Type": "application/json"
}
};
//Using the request JS SDK method to invoke and get the Desk articles matching the task subject 
using the connection
zohoprojects.request(url, articledetails, "zohodeskforlistingarticles").then(function(response) {
var list = document.getElementById('demo');
var a = document.createElement("a");
var result = response.result;
var data = result.data;
//Looping through the articles
for (i = 0; i < data.length; i++) {
var title = data[i].title;
var author = data[i].author;
var authorname = author.name;
var weburl = data[i].webUrl;
var entry = document.createElement('li');
entry.innerHTML = title.link(weburl) + " by " + authorname;
list.appendChild(entry);
}
});
});
});
</script>
</html>
  • Here, we utilized the Zoho Projects JS SDK method to extract the task name, which is the task subject.
  • We then used the Zoho Projects Request method to invoke the Zoho Desk API to search for articles.
  • The Request method is used to make requests to third-party applications. It must be invoked with the belowparameters:
  • Third-party API URL: This is the URL of the third-party application's API that needs to be invoked. In our case, we need to fetch articles from Zoho Desk based on a search value, so we used the Zoho Desk Articles Search API. We've included a search query parameter in the API as the title of the help article (wildcard search), and we've set the value of the search query parameter (title) as the task's subject. As a result, the API will look for any Zoho Desk help articles that satisfy a wildcard match with the task subject.
  • Data object: Depending on the type of action being performed, each API requires a method type, body, header, and/or parameters to be invoked. To invoke the third-party application API, a data object with the necessary API details must be created. In our scenario, a header providing the Zoho Desk org ID is required to call the Zoho Desk article search API, which we have hardcoded.
  • Connection: To work on the data of a third-party application safely, we would need to connect to that application. The link name of the connection created for the third-party application is the value of the connection parameter. This value will be available in the JSON code generated when the third-party application connection is established. This connection allows you to invoke the Zoho Desk API securely.
  • Once the API is invoked by providing the necessary parameters for the Request method, the response for the invoked Zoho Desk search articles API is returned. We extract the information we require from the response, like the title, author name, and web URL. We then list and display this data in the Zoho Projects task details widget, Related Articles.
Sample output
  • Access your Zoho Projects portal and enter into a task.

  • Choose the Related Articles task tab, which is the widget we created.

  • The widget displays the available Zoho Desk articles that are related to the task at hand.

  • Finally, click on an article to view its detailed information in Zoho Desk.


Using this method, developers working on Zoho Projects tasks can discover relevant articles and get helpful information to troubleshoot problems.

You can further enhance this use case by including a text box in the widget that allows the developer to enter a keyword and search for related articles using the Zoho Desk search articles API.

You can also accomplish use cases such as creating a task tab widget to associate data with a task. Every time the task loads, task-specific data can be displayed on the Task tab. To accomplish these kind of use cases, the data storage feature is available in Zoho Projects. We look forward to exploring the data storage feature,, and other use cases for custom widgets, in future posts.

We hope you found this information useful. Follow this space for further updates!

Sign up for a Zoho Developer account and start developing extensions for Zoho products using Sigma.

SEE ALSO


Next>>

    • Recent Topics

    • Canvas templates can now be shared with different CRM organizations

      ----------------------------------------Moderated on 14th February, 2023------------------------------------------- Dear all, This feature is now open for all users in all DCs. To learn more about importing and exporting canvas templates, read our help

    • Change Last Name to not required in Leads

      I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for

    • creating an alias

      your instructions for creating an alias are wrong. there is no add alias in my mail account. also i dont have a control panel link just a settings link how do i really make an alias

    • Reply to Email for SO/PO

      Hello, We are new to Zoho Books and running into an issue. Our support@ email is our integration user. When our team is sending out PO/SO's we are updating the sender email, but for some reason many of our responses are coming back to our support@ email

    • ZOHO Payroll Canada

      Any plans on the roadmap for Canada?

    • Zoho Books Sandbox environment

      Hello. Is there a free sandbox environment for the developers using Zoho Books API? I am working on the Zoho Books add-on and currently not ready to buy a premium service - maybe later when my add-on will start to bring money. Right now I just need a

    • Multi-currency and Products

      One of the main reasons I have gone down the Zoho route is because I need multi-currency support. However, I find that products can only be priced in the home currency, We sell to the US and UK. However, we maintain different price lists for each. There

    • ZOHO Writer Folders

      Hi We would love to have ability to create folders on the left hand side. We would then be able create and store our documents within each folder Hope you can provide this feature soon ! dux.centra

    • How can Data Enrichment be automatically triggered when a new Lead is created in Zoho CRM?

      Hi, I have a pipeline where a Lead is created automatically through the Zoho API and I've been trying to look for a way to automatically apply Data Enrichment on this created lead. 1) I did not find any way to do this through the Zoho API; it seems like

    • Escalation request: organization merge and data export (Ticket [154609577])

      Hello Zoho Team, I am posting here because my support ticket has not received substantive responses through the usual channels. Summary of the issue (ongoing for three weeks): I requested assistance with a data migration and a merge of two Zoho organizations.

    • Different form submission results for submitter and internal users

      I'm looking for suggestions on how to show an external submitter a few results while sending internal users all the results from the answers provided by the external user. The final page of our form has a section with detailed results and a section with

    • Formatting and slow

      Creating campaigns are difficult.  I'm fairly computer literate but some of the way Zoho Campaigns formatting works is painful.  Images fail to upload or are very slow. To top it off, syncing the contacts is a pain as well as temperamental links to create Segments. At this rate I'm afraid we might need to migrate back to Mailchimp.

    • Boost your Zoho Desk's performance by archiving tickets!

      The longer your help desk operations are, the more likely it is to accumulate tickets that are no longer relevant. For example, ticket records from a year ago are typically less relevant than currently open tickets. Such old tickets may eventually lead

    • Paste emails to create segment

      We are moving over from Mailchimp to ZOHO. However Mailchimp allows me to create a segment by pasting in emails from excel (or importing a .csv) can I do the same in Mailchimp?

    • Getting the Record ID of a form once it is submitted - so that form can be edited later

      In Zoho Forms, where can I access the record ID of a form once the form is submitted? - Record ID is not available in webhook payloads - It is not available to form fields, including in formulas - It is not available as a parameter in a thankyou page

    • Possible to define default font and size in Zoho Campaigns?

      Is it possible to define a default font (font, size and colour) for the text, H1 and H2 in Zoho Campaigns? For example: In a campaign, I add a text block, and the text is automatically century gothic, size 11, grey (6f6f6e) by default? Thank you!

    • Zoho Sites - General Feedback

      Hi Everyone-- Quick question for discussion: is it me or is working with Zoho Sites like entering the Twilight Zone? I've built many sites over the years, but this platform seems impossible. I've spent an entire day and a half trying to get a simple one-color

    • Zoho People & Zoho CRM Calendar

      Hi, Does anyone know if it is possible to link Zoho People and the calendar in CRM? I would like when holidays are approved they automatically appear in the calendar on CRM. Thanks 

    • File Upload field not showing in workflow

      Hi, I have added a field on Zoho CRM. I want to use it in a workflow where that particular field is updated based on another field, however it is not showing up in the field list to select it in the workflow. Why is this please?

    • You cannot send this email campaign as it doesn't have any eligible contacts in the selected mailing list. You can try adding contacts or choose other mailing lists.

      please help

    • Strengthening the capabilities of CommandCenter in Zoho CRM Plus

      When you look at the prospect-to-customer journey in most businesses 10 to 15 years ago, it was relatively straightforward. Many of us remember walking into a store, sharing our requirements with a sales associate, reviewing a few options, and making

    • Any recommendations for Australian Telephony Integration providers?

      HI,  I am looking for some advice on phone providers as we are looking to upgrade our phone system, does anybody have experience with any of the Australian providers that integrate with CRM Telephony? So far we are looking at RingCentral and Amazon Connect, and would love to hear feedback on any of the other providers you might have tried.  Thank you

    • Zoho Campaigns Workspaces

      Hi, I’m currently working on a Zoho CRM + Zoho Campaigns setup for a franchisee-based organization, where each franchise must only see and use its own contacts. At the moment, franchisees cannot properly access their contact lists in Zoho Campaigns unless

    • Newsletter in multiple languages

      Hi We are planning on starting to use Zoho Campaigns for our newsletters. Since we send our newsletters in three languages, I would need the "unsubscribe page" and other pages related to the NL (Thank you page and so on) to be available in different languages

    • Fixed assets in Zoho One?

      Hi, We use Zoho Books and have the fixed asset option in it. I started a trial for Zoho One and I do not see that as an option. Is the books that is part of zoho one equivalent to Zoho Books Elite subscription or is it a lesser version? Thanks, Matt

    • Set Default Status of Assembly to "Assembled" When Entered in UI

      I've just discovered the new "confirmed" status of Assemblies within Inventory. While I understand the intent of this (allowing for manufacturing planning and raw material stock allocation), it was initially confusing to me when manually entering some

    • I need to Record Vatable amount and non vatable amount separately in zoho books in a single line

      I need to Record Vatable amount and non vatable amount separately in zoho books in a single line give me the customisation option and in invoice copy to customer the total amount should be inclusive 5%vat and no need to show the vatable and non vatable

    • Sort Legend & stacked bar chart by value

      I'd love to see an option added to sort the legend of graphs by the value that is being represented. This way the items with the largest value in the graph are displayed top down in the legend. For example, let's say I have a large sales team and I create

    • Scanned Doc - selecting Item overwrites Rate

      I have a Vendor Invoice which was uploaded to Documents. I select Add To > New Bill. The OCR is actually quite good, but it is reading an Item Description instead of an Item Number. I remove the description and select the correct Item Number... and it

    • Timesheet invalid data error

      Getting the "Invalid Date" error when trying to add a time sheet to an appointment in a work order. I initially though the work order was corrupt or something so I deleted the work order and recreated it. I added the first time sheet to the AP and saved

    • Any update on adding New Customer Payment Providers who support in store terminal devices?

      Currently there is only one Customer payment provider listed for terminal devices in USA- Everyware. They charge a monthly fee of almost $149 minimum. Will you add other providers - like Zoho Payments or Stripe or Worldpay that would allow integrated

    • "Temporary" Field Value?

      I have a custom action in Form A report Detail View that passes the Rec ID and updates a Temp Record ID lookup field in the Form B record via openURL (and opens the Form B report in popup) . The updated Temp Record ID field value in Form B is then used

    • File Upload field automatically replaces spaces with underscores – support experience

      Hi everyone, I want to share my recent experience regarding the File Upload field behavior in Zoho Creator and my interaction with the Zoho support team. When a user uploads a file, the system automatically renames the document by replacing spaces in

    • We Asked, Zoho Delivered: The New Early Access Program is Here

      For years, the Zoho Creator community has requested a more transparent and participatory approach to beta testing and feature previews. Today, I'm thrilled to highlight that Zoho has delivered exactly what we asked for with the launch of the Early Access

    • Queries on Project-Based Inventory Consumption and Proforma Invoice in Zoho ERP

      We would appreciate your clarification on how Zoho ERP plans to handle the following: Project-based inventory consumption without itemized sales orders Accurate project cost tracking along with inventory reduction Proforma Invoice usage We look forward

    • Applying Excess Payments & Conflict Invoices Due to Cancelled Items

      I’m running into several issues that appear to stem from deeper-than-expected overlap between Zoho Finance (Books/Inventory) and Zoho POS. The level of coupling between these systems seems greater than what was originally communicated, and it’s leading

    • Zoho Sprint Backlog View, filter by item status

      Hello, In Zoho Sprints, it would be great to be able filter out specific items in the Backlog based on their status. We would like to track items that were Removed from our backlog without seeing them constantly in the Backlog view, as this view should

    • WATERFALL CHART IN ZOHO ANALYTICS

      Hi Team, I would like to know whether Zoho Analytics currently supports a Waterfall Chart as a built-in visualization type. If yes, could you please share the steps to create one? If not, is there any workaround or recommended method to build a Waterfall

    • Export contacts from Bigin's mobile app to your Android device

      Hello everyone! We're happy to announce that you can now export customer contacts from the Bigin mobile app to your device. Scenario A small-scale business owner has two pipelines in Bigin—one for procuring raw materials and the other for selling his

    • ASAP iOS SDK – Xcode Compatibility Update

      Hello everyone, We have been delivering the ASAP iOS SDK developed using Xcode 16.1 to provide Help Center support within mobile applications. Thus, ASAP iOS SDK versions upto 4.5.8 are compatible with development environments running in Xcode 16.1 and

    • Next Page