Creating custom user interfaces using widgets

Creating custom user interfaces using widgets

In our last post, we looked at connections and how they help build a seamless integration with an example. In this post, we'll explore creating widgets in Zoho Sprints and their benefits with a real-time example.

Widgets

What and where?

Widgets are custom graphical user interface components that ease user accessibility within the product. A widget can be created:
  1. To customize a user interface to smooth and enhance the end-user experience
  2. To fetch custom input from the end user and perform the desired functionality based on the input
Widgets are supported in multiple locations while building a Zoho Sprints extension using the developer platform. Check here for more details on widgets and the supported locations.

JS SDKs and the need for them in widgets

When handling widgets, data needs to be communicated between the widget and the extension it's interacting with. In order for this communication to be handled securely, Zoho Sprints offers a defined set of JS SDKs. These JS SDKs help the widget code interact with extension. Take a look at the Zoho Sprints JS SDK bundle.

Prerequisites:

➤ In order to use the JS SDKs as part of your widget, it's necessary to include the JS SDK library CDN URL as a source in your widget code. You can find the CDN URL specific to each DC in this document.
➤ Additionally, you need to invoke the init method in order to use the JS SDKs in your widget code. Only after invoking the init method can the other JS SDK methods be used inside the widget. Learn more about the init method.

Now that we have an overview on widgets, JS SDKs, and the need for both, let's move on to how a widget can be created and utilized in an extension.

Steps to create and use a widget in an extension
  1. Create connections
  2. Create an extension and configure it's plugin-manifest.json file
  3. Design and create the widget (HTML file to be rendered and JS logic)
Let's go over each of these processes in depth using an example.

Consider this scenario. You're the manager of an organization and use Sprints to manage your client projects. Your team members are in charge of work items related to feature enhancements. When they work on a new feature request, you may want to hold a group call with your team to review it before asking them to move on with development. Similarly, if a bug-related work item needs to be completed, you might plan an issue debugging session or a one-on-one conversation with the team member who is identifying and solving the issue.

This can be accomplished by integrating Zoho Sprints with Zoho Bookings using a custom widget. Zoho Bookings is designed specifically to create numerous services, such as one-on-one calls, issue debugging, or group calls, and assign staff to them. When Zoho Bookings is integrated with Sprints, the Sprints user can plan appointments for these services directly from within the work items. For this scenario, let's go ahead and explore the steps to create and use a widget in an extension.

1. Create connections
  1. Go to Sigma and navigate to the Connections section in the left panel of your Sigma workspace.
  2. Choose Zoho Sprints as the service from the dropdown list, then select your Zoho Sprints organization.
  3. Create two default connections: Refer to our previous post on connections for guidance.
➤ Zoho Bookings to fetch services, staff, and available time details and book an appointment


➤ Zoho Sprints to fetch the details of the user who is assigned to the work item



2. Create an extension and configure a widget in the plugin-manifest.json file
  1. Navigate to the Extensions section in the left panel of your Sigma workspace.
  2. Click the New Extension button and create a new extension. You can refer to this post for detailed guidance on creating a new extension.
  3. In the plugin-manifest.json file of the extension, include the sample JSON code that was generated for the Zoho Bookings and Zoho Sprints connections.
  4. Configure a widget by providing the name, embedding location, and the URL path of the HTML file to be rendered. For our example, a widget with the following details has been created.
➤ name: Book an Appointment
➤ url: The location of the Bookevent.html file (inside app folder) that will render the user interface required for our widget. We'll be creating this file in the next section of this post.
➤ location: The work item's right navigation bar.
➤ logo: The location of a standard Zoho Sprints logo (logo.svg) that is by default available while creating the extension. You can include and use your customized logo as well.


3. Design and create the widget

Now that the extension has been created and its plugin-manifest.json file has been configured, let's go ahead and handle the widget design and the logic required to book an appointment.

Bookevent.html - The html code for booking an event is attached in the post.
  1. In the code snippet, first the init method is invoked. As mentioned earlier, this is mandatory in order for any other JS SDK to be used as part of the widget code.
  2. Next, the JS SDK method to get the current location details (for our example: work item) is invoked. This JS SDK returns the details of the current location, including the extension ID, team ID, project ID, Sprints ID, user ID, and work item ID.
  3. Now, using the retrieved details, the Zoho Sprints API that gets the work item details is invoked. This API returns the details of the work item including the owner or user assigned to the work item. In order to invoke any HTTP request API in your widget code, use the request SDK method provided by Zoho Sprints.
  4. The request method requires certain details like the API URL, method type, connection link name, and certain parameters or payloads to be passed to invoke the API. For the "get work item details" API, use the following parameters:
➤ connection: The connection link name of the Zoho Sprints connection created and configured in the plugin-manifest.json file
➤ method: The HTTP request type of the API (in this case it's the "GET" method)
  1. Using the work owner ID retrieved from the work item details API, the get workspace users API is invoked to fetch the details of that particular user, including their name and email. This API is also invoked using the request JS SDK method by passing the URL, connection created for Zoho Sprints, and method type as GET.
  2. Next, the Zoho Bookings APIs to get staffs and get services are invoked using the request method. Here, the connection created for Zoho Bookings is passed as a parameter to the request method.
  3. Once you click the Check Availability button, the fetch availability Zoho Bookings API is invoked, and the available time slots of the selected staff and service are returned.
  4. Next, using the Book Appointment button, based on the time slot chosen from the list of available slots for the selected staff and service, a new appointment is booked by invoking the book appointment API. The staff ID, service ID, time, and user details (the work item owner details) are sent as parameters to the book appointment API.
This will successfully book an appointment with the work item owner for the selected service, staff, and time.

Testing the extension
  1. Now, you can test the widget using the Run option in the Sigma cloud editor. For detailed guidance on testing the extension, read our post here.
  2. Once you enter into the test environment, install the extension and authorize the connections.
  3. Next, enter into the work item and access the Book an Appointment widget. Choose the staff, service, and date, and click Check Availability. The available time slots will be displayed. Choose a time slot and click Book Appointment. An appointment will be successfully booked in Zoho Bookings.


In this post, we have explored widgets and JS SDKs along with an example. We hope you found this information helpful. Stay tuned for more updates!


SEE ALSO