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

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)

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

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.

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:
   

➤ url: https://sprintsapi.zoho.com/zsapi/team/6*******4/projects/579*******2001/sprints/57900*******055/item/579*********089/?action=details

➤ 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.

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.