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

      • 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

      • Cliq Bots - Post message to a bot using the command line!

        If you had read our post on how to post a message to a channel in a simple one-line command, then this sure is a piece of cake for you guys! For those of you, who are reading this for the first time, don't worry! Just read on. This post is all about how

      • Cliq Bots - How to make a bot respond to your messages?

        Bots are just like your buddies with whom you can interact. They carry out your tasks, keep you notified about your to-dos and come in handy when you need constant updates from a third party application.  So, how can you make your bot respond to a message? The bot message handler is a piece of code triggered when a message is sent to the bot. Message handlers help you customise your bot responses to make it look conversational. The message input from the user can be either a string or an option selected

      • Cliq Bots - Get notifications about any action on an application with the incoming webhook handler!

        Webhooks can be used to get notified about events happening in other applications inside Cliq. All bots in Cliq have their own incoming webhook endpoint. This makes it simple to post messages to the bot from external applications. Unlike the send message

      • The Slash Command Series - Types of Command Suggestions

        Hi Everybody! I hope you guys tried the /zdocs command and now have an idea of how command suggestions with click to execute work. If you have no clue of what command suggestion is, I recommend you to take a look at all the Slash Command Series posts, especially the one on Command Suggestions ! This post is all about the different types of command suggestions.  Customise your command suggestions  Did you know you could customise your command suggestion list with a title, description, image? Well,