Cards & Functions: An inside view into how Cliq's custom buttons work!

Cards & Functions: An inside view into how Cliq's custom buttons work!

Message cards are simple templates which can be used to customise messages. In other words, responses on triggering an integration component (commands/ bots/ message actions) can be customised as a message easily with the templates. A message card can be styled with a title, image, buttons, table and so on! Adding a button helps in making the message more interactive and also provides a call to action. 

So where does a function fit here? 

A button can be triggered to perform an action on click, only when a function is associated with it. A function is a piece of code invoked when a button action is performed. The list of attributes triggered when a function is invoked, is explained in our functions handler help page. 

Sample use case scenario: Triggering functions on /issues command execution

Tracking issues is a great way to record bugs reported in a module of a product. The /issues command for instance will get a list of issues reported under the user's name. Each issue will have a button, on clicking which more information about the issue will be displayed. 

Pro Tip: Cliq offers a variety of message cards. Check them out here . You can also try building one using our message builder

/issues command workflow 

When a user executes the /issues command, the below given workflow is triggered
  1. Command suggestion handler is triggered and shows the user a list of portals
  2. Upon selection, the suggestion handler is triggered again to show a list of projects for the user to choose from
  3. Once the portal and project is selected, the command execution handler is invoked to get the list of issues for which the user is responsible for!
  4. Clicking on a button associated with each issue will get more details about the issue and display it as a separate card for the user to see. 
Watch this tutorial video on what functions are and how the /issues command execution and response works



Sample Functions Execution Code 

  1. response = Map();
  2. if(target.get("name") == ":bug: Info")
  3. {
  4. apiid = arguments.get("key").toList("-");
  5. portal = apiid.get(0);
  6. project = apiid.get(1);
  7. ID = apiid.get(2);
  8. bugdetails = invokeurl
  9. [
  10. url :"https://projects.zoho.com/restapi/portal/" + portal + "/projects/" + project + "/bugs/" + ID + "/"
  11. type :GET
  12. connection:" insert_your_connection_name "
  13. ];
  14. response = {"text":"Details about " + bugdetails.get("bugs").toMap().get("title"),"card":{"theme":"modern-inline"},"slides":{{"type":"label","data":{{"Reported By":bugdetails.get("bugs").toMap().get("reported_person")},{"Issue Status":bugdetails.get("bugs").toMap().get("status").toMap().get("type")}}}}};
  15. info response;
  16. }
  17. else if(target.get("name") == "All Open Issues")
  18. {
  19. info arguments;
  20. apiid = arguments.get("key").toList("-");
  21. portal = apiid.get(0);
  22. project = apiid.get(1);
  23. bugdetails = invokeurl
  24. [
  25. url :"https://projects.zoho.com/restapi/portal/" + portal + "/projects/" + project + "/bugs/?statustype=open"
  26. type :GET
  27. connection:" insert_your_connection_name "
  28. ];
  29. info bugdetails;
  30. bugs = bugdetails.toMap().get("bugs");
  31. info bugs.size();
  32. if(bugs.size() > 0)
  33. {
  34. rows = List();
  35. for each  bug in bugs
  36. {
  37. row = Map();
  38. info bug;
  39. row.put("Issue ID",bug.get("key"));
  40. row.put("Assigned To",bug.get("assignee_name"));
  41. row.put("Severity",bug.get("severity").toMap().get("type"));
  42. row.put("Issue Status",bug.get("status").toMap().get("type"));
  43. if(rows.size() <= 5)
  44. {
  45. rows.add(row);
  46. }
  47. }
  48. response = {"text":"Hey " + user.get("first_name") + " !  Recently reported issues!","card":{"theme":"modern-inline","title":"Issue List:"},"slides":{{"type":"table","title":"hello","data":{"headers":{"Issue ID","Assigned To","Severity","Issue Status"},"rows":rows}}}};
  49. }
  50. else
  51. {
  52. response = {"text":"Good news. Looks like there are no open issues in this project! :grinning:"};
  53. }
  54. }
  55. return response;

The /issues command execution and suggestion code is attached as a text file. Hope this has intrigued you to try it out right away.  Comments and suggestions are welcome! 

Best,
Manasa
Cliq