Developer activities 

• Associate the custom user interface to the custom action. 
  
• Define an action that creates a task in the selected project and also sends an email to the customer based on the values entered by the end user in the custom UI. 

Extension/end-user activities 

Developer activities

1. Creating a connector 

• Create a new connector in your extension for Zoho Projects using the Connectors feature under Utilities in the left panel of the Zoho Developer console. 
  

Note: Zoho Projects follows the OAuth 2.0 protocol for its authentication mechanism. You can refer to this post to learn more about the steps to register Zoho Projects and retrieve your client credentials.

• Add the necessary connector APIs for your functionality. 

• The Zoho Projects REST APIs added for our example are mentioned below.

2. Create a custom user interface: 

• In the HTML code, we have two text fields to get the user inputs for the email subject and body.

• We have also invoked the connector API to get projects from a portal. The response is then populated and displayed as a dropdown list to allow the user to select the project in which they want the deal to be created as a task.
  
• In the HTML code snippet, we have hard coded a static value for the Zoho Projects portal.

Note: Depending on your business use case requirements, you can create custom variables to prompt the user to input their Zoho Project portal ID, or you can create a setting widget that displays the user's portals, allowing the user to choose the portal in which they want to have the deals created as tasks as well.

• ZOHO.CRM.ACTION.setConfig - In this example, we have utilized the setConfig method. This method can be used to set values to variables which can be retrieved later through the widget's page load response. 

➤ For our example, we have used the setConfig method to set various Zoho CRM deal and email (subject and body) user input values to variables. We have later obtained these saved values through the widget's page load response, which contains a configdata key with these set data as its values. 

➤ Sample page load response when ZOHO.CRM.ACTION.setConfig is used in our example:

➤ We have then used the preset saved values available in the configdata key to prepopulate the widget UI every time it loads. 

3. Create a custom action

• Go to the Zoho Developer console and select the extension in which you want to create the custom action.
  
• Create a custom action by navigating through Automate - > Custom Actions, under the Build section in the left panel. Click Create Action.
  
• Enter the Custom Action Name and Description. Click Next.
  

• Provide the location of the html file (widget UI) to complete the resource path. Click Next, then click Create Function.
  

• Enter the Deluge function to perform our use case functionality.
  
• Click Save & Close, then click Save.

• In the above Deluge code, we have performed the functionality of creating the deal as a task in Projects and sending an email to the deal's contact with the input provided by the end user in their CRM account while associating the custom action to a workflow. 

Custom action in effect (End-user):

Create workflows:

• As an end user who has the extension which features the custom action installed in the Zoho CRM account, go ahead and create workflows to define criteria and associate the custom action.
• In our case, we have two workflows:

➤ One for smaller deals where the expected revenue is less than 1000 USD

• Upon choosing the custom action, the custom UI appears where-in you can provide user specific input for email body and subject and also choose the project where you want deal to be created as a task in Zoho Projects. 

                                                       

                                                      

• When a deal with the necessary criteria is satisfied, an email is sent out to the deal's contact with the subject and body provided by the end user. A task is also created in Zoho Projects with some specific deal details.