Building extensions #5: Integrating applications with Zoho Projects through Connections

Building extensions #5: Integrating applications with Zoho Projects through Connections

In our last post, we discussed the essential features that a Zoho Projects extension can provide. Starting with this post andin every subsequent post going forward, we'll go through each of those features in depth, one by one, with an example use case.
In this post, we'll explore the Connections feature in detail.

Connections: When and why?

Creating a tightly coupled integration requires the establishment of a secure connection between applications. To achieve this secured connection, the Sigma platform provides the Connection feature that can be used to establish a secure link and perform data operations across applications seamlessly and efficiently through an extension.

Use case

Working on development-related tasks might require dealing with a variety of files, such as code snippets, help documents, or service level agreements. While several file management applications are available to securely store and organize data, manually handling file storage between applications remains challenging.

For our example, let's use Zoho Projects to manage all tasks, and Dropbox to manage and store data.

What is the difficulty faced?

Dropbox offers a file request feature that allows you to collect files and organize them into folders. However, as we talked about in our previous post, manually categorizing and uploading task-related files to their respective file request folders in Dropbox would be a time-consuming and laborious activity. Instead, it would be more efficient to integrate Dropbox with Zoho Projects so that uploading task files to Dropbox file request folders can be done instantly from within Zoho Projects.


How can it be sorted?

You can create a connection between Zoho Projects and Dropbox. With the secure connection setup, the file request folders available in Dropbox can be listed on the task details page of Zoho Projects through an extension. You may then easily upload files from Zoho Projects to their corresponding folders in Dropbox, saving time and making you more organized.

What are the components required to achieve this use case?

  1. A connection between Zoho Projects and Dropbox.
  2. An extension configuration that includes:
  • Creating an extension
  • Configuring the plugin manifest
  • Setting up the widget code to display the Dropbox file request folders inside the Zoho Projects task details page.
Now, let's see how we can achieve each of these components.

1. Creating a secure connection using the Connection feature

  • Log in or sign up into developer.zoho.com.
  • Go to Sigma and access your workspace.
  • Once you enter your workspace, select the Connections section in Sigma.
Note: Connections created in Zoho Projects are also accessible within the Connections section in Sigma. These connections can be used in extensions to connect with other applications.

  • Choose the service as Zoho Projects and select your Zoho Projects organization. Click on Create Connection.

  • Sigma offers a list of default services from which you can choose and easily connect with Zoho Projects. If the application you want to integrate isn’t in the default list, you can add and build a connection with it using the custom services option.
Note: If you’re looking to connect Zoho Projects with another Zoho Product that also follows the OneAuth authentication mechanism, select the service Zoho OneAuth from the Default Services list to create the connection.

  • In our example, the application to connect with Zoho Projects is Dropbox, and because it’s in the Default Services list, go ahead and choose Dropbox.

  • After choosing the service, enter the connection name. A connection link name will be populated automatically.
  • Toggle Use credentials of login user to Yes if you want every user installing the extension to access the connection using their own login credentials, or No if admin credentials are enough to access the connection.
  • In our example, we'll proceed with the former. So toggle to Yes, and then click Create and connect.
Note: For services in which the option to choose the scopes is displayed, choose the necessary scopes, and then click Create and connect.

  • You’ll be directed through a series of authorization steps before being prompted to connect with Dropbox by entering your login information.
  • The connection will be established successfully once you sign in with Dropbox, and you will be redirected to the Connection Summary details page in Sigma.
  • To access this connection as part of an extension, you’ll need to configure the sample code provided under the JSON section in the plugin-manifest.json file. We’ll explore this in the next section.

2. Extension configuration

Now that we've successfully established our connection, let's look at how we can achieve our use case feature of displaying the Dropbox file request folder within the Zoho Projects task detail page. As mentioned earlier, to accomplish this, we’ll need to implement the following measures.
A. Create an extension

B. Configure the plugin-manifest.json file

C. Set up the widget code
Let's explore these steps in order.

A. Create an extension
B. Configure the plugin-manifest.json file
  • As previously stated, to access the connection established between Zoho Projects and Dropbox, the connection must first be configured in the plugin-manifest.json file.
  • Copy the JSON sample code from the Connection Summary Details page and paste it into the plugin-manifest.jsonfile as the value for the connections key.

  • You will also need to white list the Dropbox domain for Dropbox calls to be processed without being blocked.
  • Include the domain in the plugin-mainfest.json file as the value for the whiteLitsedDomains key.

  • As we saw in our earlier post, the plugin-manifest.json file includes a widget called Projects Extension by default. For our example, because we’re connecting with Dropbox and constructing a widget that will include Dropbox request folders to upload files, enter the widget name and location.

  • The final configured plugin-manifest.json file for our example would be as follows:
  1. {
  2. "connectors": [{
  3. "connectionLinkName": "dropbox",
  4. "userAccess": true,
  5. "sharedBy": "xxxxxxx",
  6. "connectionName": "dropbox",
  7. "serviceName": "dropbox",
  8. "isUserDefinedService": false
  9. }],
  10. "whiteListedDomains": ["https://api.dropboxapi.com"],
  11. "service": "PROJECTS",
  12. "cspDomains": {
  13. "connect-src": []
  14. },
  15. "storage": true,
  16. "locale": ["en"],
  17. "config": [],
  18. "modules": {
  19. "widgets": [{
  20. "name": "Dropbox - File Upload",
  21. "location": "taskdetails_rightpanel",
  22. "url": "/app/dropbox.html"
  23. }],
  24. "triggers": []
  25. }
  26. }

C. Setting up the widget code

Now, that we’ve created an extension and configured the plugin manifest file, let's finally set up the widget code in order to display all Dropbox file request folders inside our task details right panel.

Dropbox.html widget code: Please find the widget code snippet as an attachment in this post.
  • In this widget code, we’ve invoked the Dropbox API to list file request folders by constructing and passing the required data along with the connection we had established for Dropbox.
  • The API will be invoked and return all of the file request folders in the task details right panel, from which users can click on the link and directly upload files to Dropbox from within a task in Zoho Projects itself.
Sample output
  • Once the code is setup, publish and install the extension to check the functionality in the Zoho Projects portal.
  • Enter a task and click the extensions icon in the right panel.

  • From the lists of your Dropbox file requests, select the requests to which you wish to upload files.

  • The file will be successfully uploaded in the respective Dropbox file request.


We’ve demonstrated how to upload files directly to Dropbox file request folders from within Zoho Projects in this example. As part of your extension, you can use the Connections feature to do a variety of tasks, some of which are highlighted below.
  • View and update files associated with a certain request.
  • Create Dropbox folders and share them with collaborators.

Connections, therefore serves as a powerful tool that assists you in establishing a connection with other apps and performing smooth data transactions across your applications, thereby improving business functions and optimizing your work.

We hope this information was useful to you. Continue to follow us for further updates!

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

SEE ALSO


Next>>