Integrating applications with Zoho Projects through Connections | Community | Zoho Projects

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?

A connection between Zoho Projects and Dropbox.
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

Create an extension for Zoho Projects using the Sigma cloud editor.

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:

{
"connectors": [{
"connectionLinkName": "dropbox",
"userAccess": true,
"sharedBy": "xxxxxxx",
"connectionName": "dropbox",
"serviceName": "dropbox",
"isUserDefinedService": false
}],
"whiteListedDomains": ["https://api.dropboxapi.com"],
"service": "PROJECTS",
"cspDomains": {
"connect-src": []
},
"storage": true,
"locale": ["en"],
"config": [],
"modules": {
"widgets": [{
"name": "Dropbox - File Upload",
"location": "taskdetails_rightpanel",
"url": "/app/dropbox.html"
}],
"triggers": []
}
}

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!

<<Previous

Next>>

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Topic Participants
Nanditha Somasundaram Somasundaram

Sticky Posts
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
Building extensions #6: Custom user interfaces with Widgets
Welcome to our post on Widgets for Zoho Projects! In our last post, we explored the significance of the connections feature, showed how to use it, and provided an example use case. In this article, we'll look at the importance of widgets, another feature
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.
Building extensions #4: Fundamental features of a Zoho Projects extension
Hello everyone! Thank you for visiting our Building Extensions series. As part of this series, we've already covered how to use the Sigma cloud editor and the ZET CLI to create, test, and publish extensions for Zoho Projects. You can refer to our earlier
Announcing the Zoho Projects API
Today we're excited to announce the API for Zoho Projects where any developer can extend the project management and collaboration capabilities through our APIs and can build their own customized applications for their business needs. We've tried to make the API follow the REST (Representational State Transfer) principles and generate a XML/ JSON object which allows you to access / read / write Zoho Projects data from third-party systems like Google/Yahoo gadgets, web sites, billing & invoicing systems,