Convert a message on Cliq into a task on Zoho Connect

Convert a message on Cliq into a task on Zoho Connect

Message actions in Cliq are a great way to transform messages in a conversation into actionable work items. In this post, we'll see how to build a custom message action that'll let you add a message as a task to board on Zoho Connect. 

If you haven't created a board in Zoho Connect, then head over to this help document to know how to create one. 

For this example, we've created a board for the Zylker Campaigns team in Zoho Connect. The board has three sections: User Interface, Content Marketing, Customer Support. We'll see how the marketing team discusses about upcoming marketing initiatives and keeps track of tasks in their connect board. 



The workflow behind creating this message action is pretty simple. 

1. Once a user clicks on the Add Connect Task message action, the action's handler is triggered to display a form. 
2. The user fills all the information required. We use the form change handler to modify the form field values based on the users' inputs. For example, display networks that the user is a part of by default and on selecting a specific network, we'll show the list boards that the user is a part of under the selected network. The same applies for sections as well. 
3. On choosing the respective network, board and section, the user can add the task title, description, due date, assignee and more. Note that, the message on which the action was performed will be displayed as the task title by default. This can be modified.
4. On clicking Add Task, the form submit handler is invoked to create a task in Connect with all the provided details. 

Prerequisites
Create a connection between Cliq and Connect: 
You'll need an active connection between Cliq and Connect. To create a connection, 
  1. Click on your display picture. This will open up the user panel. Now, click on Bots & Tools. 
  2. Click on the Connections icon present on the left side menu of the Bots & Tools page. 
  3. Now, click on Create Connection. 
  4. In the Add Connections view, select the Zoho Oauth option. 
  5. Name your connection. For example you can name your connection: zoho_connect or zohoconnect and choose the following scopes: zohopulse.networklist.READ, zohopulse.tasks.READ, zohopulse.tasks.CREATE
  6. Make sure the Use Credentials of Login User option is enabled. 
  7. Click on the Create and Connect button to generate the invoke URL task with the connection name. 
We'll be using this invoke URL task in our code. 

Create a message action 

To create a message action on Cliq, 

  1. Click on your display picture. This will open up the user panel. Now, click on Bots & Tools. 
  2. Click on Message Actions in the left pane.
  3. Click on the Create Message Action button and fill in the required details. 
    Action Name: Provide your message action name. This field is mandatory.
    Hint: Brief explanation about the message action.
    Access Level: Decide who gets to access your message action. Choose between Organization, Team and Private. Default option is Private.
    Choose what kind of messages should have the message action. Options are Text messages, Attachments and Links. For this example, we're choosing messages of the type Text. 
  4. Click on Save & Edit Code. 
Create a form function

To create a form function on Cliq, 

  1. Click on your display picture. This will open up the user panel. Now, click on Bots & Tools.
  2. Click on Functions in the left pane. Click on the Create Function button and fill in the required details. 
  • Name: Give your function name. Ensure to use the same function name in your form's code as well. 
  • Description: Briefly describe how your function works. 
  • Function Type: Choose the component with which the function should be associated. For this example, we're using the function of the type: Form 

Step 1: Configuring the message action handler
The message handler is triggered to return the Create Task form as a response. 

  1. messageText = message.get("content").get("text");
  2. getNetworks = invokeurl
  3. [
  4. url :"https://connect.zoho.com/pulse/api/allScopes"
  5. type :GET
  6. connection: "" // Give your connection name
  7. ];
  8. getNetworks = getNetworks.get("allScopes").get("scopes");
  9. netWorkOptions = List();
  10. for each  network in getNetworks
  11. {
  12. networkList = Map();
  13. networkList.put("label",network.get("name"));
  14. networkList.put("value",network.get("id"));
  15. netWorkOptions.add(networkList);
  16. }
  17. inputs = list();
  18. inputs.add({"type":"select","name":"networks","label":"Network","hint":"Select a network","placeholder":"Select a network!","mandatory":true,"value":"","options":netWorkOptions,"trigger_on_change":true});
  19. inputs.add({"type":"select","name":"boards","label":"Boards","hint":"Select a board","placeholder":"Select a board!","mandatory":true,"value":"","options":netWorkOptions,"disabled":"true","trigger_on_change":true});
  20. inputs.add({"type":"select","name":"sections","label":"Section","hint":"Select a section","placeholder":"Select a section!","mandatory":true,"value":"","options":netWorkOptions,"disabled":"true"});
  21. inputs.add({"name":"title","label":"Title","placeholder":messageText,"value":messageText,"hint":"Enter your task name","min_length":"0","max_length":"50","mandatory":true,"type":"text"});
  22. inputs.add({"type":"textarea","name":"note","label":"Description","hint":"Describe your task.","placeholder":"To be done by Tuesday","mandatory":false});
  23. inputs.add({"name":"duedate","label":"Due by","placeholder":"Give your task's due date.","mandatory":false,"type":"date"});
  24. inputs.add({"type":"select","name":"priority","label":"Priority","hint":"Choose your task priority","placeholder":"High","mandatory":true,"value":"High","options":{{"label":"No Priority","value":"None"},{"label":"Low","value":"Low"},{"label":"Medium","value":"Medium"},{"label":"High","value":"High"}}});
  25. addTask = {"name":"addTask","type":"form","title":"Add a task","hint":"Add a task to a board in Zoho Connect. ","button_label":"Add Task","inputs":inputs,"action":{"type":"invoke.function","name":"connectTask"}};
  26. return addTask;





Step 2: Configuring the form change handler

The form change handler will be triggered when the user is filling up the form. The handler is responsible for modifying the form field values based on the user's inputs. 

  1. targetName = target.get("name");
  2. inputValues = form.get("values");
  3. networkID = inputValues.get("networks").get("value");
  4. actions = list();
  5. if(targetName.containsIgnoreCase("networks"))
  6. {
  7. getBoards = invokeurl
  8. [
  9. url :"https://connect.zoho.com/pulse/api/myBoards"
  10. type :GET
  11. parameters:{"scopeID":networkID}
  12. connection:"" // Give your connection name
  13. ];
  14. getBoards = getBoards.get("myBoards").get("boards");
  15. boardOptions = List();
  16. for each  board in getBoards
  17. {
  18. boardList = Map();
  19. boardList.put("label",board.get("name"));
  20. boardList.put("value",board.get("id"));
  21. boardOptions.add(boardList);
  22. }
  23. actions.add({"type":"update","name":"boards","input":{"type":"select","name":"boards","label":"Boards","hint":"Select a board","placeholder":"Select a board!","mandatory":true,"options":boardOptions,"trigger_on_change":true}});
  24. }
  25. else if(targetName.containsIgnoreCase("boards"))
  26. {
  27. boardId = inputValues.get("boards").get("value");
  28. getResponse = invokeurl
  29. [
  30. url :"https://connect.zoho.com/pulse/api/boardSections"
  31. type :GET
  32. parameters:{"scopeID":networkID,"boardId":boardId}
  33. connection:"" // Give your connection name
  34. ];
  35. getSections = getResponse.get("boardSections").get("sections");
  36. sectionOptions = List();
  37. for each  section in getSections
  38. {
  39. sectionList = Map();
  40. sectionList.put("label",section.get("name"));
  41. sectionList.put("value",section.get("id").toString());
  42. sectionOptions.add(sectionList);
  43. }
  44. getMembers = getResponse.get("boardSections").get("members");
  45. if(getMembers.isempty() == false)
  46. {
  47. boardMembers = List();
  48. for each  member in getMembers
  49. {
  50. memberList = Map();
  51. memberList.put("label",member.get("name"));
  52. memberList.put("value",member.get("zuid"));
  53. boardMembers.add(memberList);
  54. }
  55. actions.add({"type":"update","name":"sections","input":{"type":"select","name":"sections","label":"Section","hint":"Select a section","placeholder":"Select a section!","mandatory":true,"options":sectionOptions}});
  56. actions.add({"type":"add_after","name":"duedate","input":{"type":"select","name":"members","multiple":true,"label":"Assignees","hint":"Add assignees","placeholder":"Assign task to a member","mandatory":false,"options":boardMembers}});
  57. }
  58. else
  59. {
  60. actions.add({"type":"update","name":"sections","input":{"type":"select","name":"sections","label":"Section","hint":"Select a section","placeholder":"Select a section!","mandatory":true,"options":sectionOptions}});
  61. }
  62. }
  63. return {"type":"form_modification","actions":actions};



Step 3: Configuring the form submit handler

We'll call the create task API in form submit handler. The submit handler typically receives all the inputs filled by the user and will be triggered on form submission. 

  1. response = Map();
  2. formValues = form.get("values");
  3. scopeID = formValues.get("networks").get("value");
  4. boardId = formValues.get("boards").get("value");
  5. sectionId = formValues.get("sections").get("value");
  6. title = formValues.get("title");
  7. priority_value = formValues.get("priority").get("value");
  8. parameters = {"scopeID":scopeID,"boardId":boardId,"sectionId":sectionId,"title":title,"priority":priority_value};
  9. desc = formValues.get("note");
  10. if(desc != "" && !desc.isEmpty())
  11. {
  12. parameters.put("desc",desc);
  13. }
  14. duedate = formValues.get("duedate");
  15. if(duedate != "" && !duedate.isEmpty())
  16. {
  17. duedate = duedate.toList("-");
  18. eyear = duedate.get(0);
  19. emonth = duedate.get(1);
  20. edate = duedate.get(2);
  21. parameters.put("eyear",eyear);
  22. parameters.put("emonth",emonth);
  23. parameters.put("edate",edate);
  24. }
  25. assignee = formValues.get("members");
  26. if(assignee != {} && !assignee.isEmpty())
  27. {
  28. userIds = list();
  29. for each  assgineeID in assignee
  30. {
  31. userIds.add(assgineeID.get("value"));
  32. }
  33. parameters.put("userIds",userIds.toString());
  34. }
  35. addTask = invokeurl
  36. [
  37. url :"https://connect.zoho.com/pulse/api/addTask"
  38. type :POST
  39. parameters:parameters
  40. connection:"" // Give your connection name
  41. ];
  42. if(addTask.get("addTask").get("stream").isEmpty() == false)
  43. {
  44. taskTitle = "[" + addTask.get("addTask").get("stream").get("task").get("title") + "](" + addTask.get("addTask").get("stream").get("url") + ")";
  45. taskpriority = addTask.get("addTask").get("stream").get("task").get("priority");
  46. tasksection = addTask.get("addTask").get("stream").get("task").get("section").get("name");
  47. taskboard = addTask.get("addTask").get("stream").get("partition").get("name");
  48. response = {"text":"Task added in " + taskboard + ". Take a look at the task details below.","card":{"title":"Task Details","theme":"modern-inline"},"slides":{{"type":"label","title":"Task Details: ","data":{{"Title":taskTitle},{"Priority":taskpriority},{"Section":tasksection},{"Board":taskboard}}}}};
  49. }
  50. return response;






End notes: 

Message actions in Cliq are super versatile like all other Cliq platform components. You can choose to create a message action that's specific to a message type. This example can be customized even to suit messages of the type attachments and links. So go ahead and give it a try! You can download the source code file attached with this post or access this link here: https://workdrive.zohoexternal.com/external/6OxchwzzBCF-J8HFH

Useful Links: 
Zoho Connect Rest API Guide: https://www.zoho.com/connect/api/intro.html


    • Sticky Posts

    • Customer payment alerts in Zoho Cliq

      For businesses that depend on cash flow, payment updates are essential for operational decision-making and go beyond simple accounting entries. The sales team needs to be notified when invoices are cleared so that upcoming orders can be released. In contrast,

    • Automating Employee Birthday Notifications in Zoho Cliq

      Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition of

    • Accelerate Github code reviews with Zoho Cliq Platform's link handlers

      Code reviews are critical, and they can get buried in conversations or lost when using multiple tools. With the Cliq Platform's link handlers, let's transform shared Github pull request links into interactive, real-time code reviews on channels. Share

    • App Spotlight : PagerDuty for Zoho Cliq

      App Spotlight brings you hand-picked apps to enhance the power of your Zoho apps and tools. Visit the Zoho Marketplace to explore all of our apps, integrations, and extensions. In today's fast-paced world, seizing every moment is essential for operational

    • Automate your status with Cliq Schedulers

      Imagine enjoying your favorite homemade meal during a peaceful lunch break, when suddenly there's a PING! A notification pops up and ruins your moment of zen. Even worse, you might be in a vital product development sprint, only to be derailed by a "quick

    Nederlandse Hulpbronnen