Button Function

Button Function Handler

A function is triggered to execute a deluge task, when an action (click) is performed on the button associated with the function. A list of attributes are passed when a function is triggered. They are listed in the table below:

AttributeDescription
UserDetails of the user who has triggered the function.
MessageDetails of the message map, to which the function is associated.
Button (Arguments)Details of the button object inside the message object.
ChatChat details in which the function is triggered.
TargetButton object details such as button name, hint and key.

Sample Target Map


{
  "hint": "button_hint",
  "name": "button_name"
}

Sample Arguments Map


{
  "key": "button_key"
}

Key parameter:

The 'key' parameter in the arguments map can be used as a unique identifier for each button. The parameter serves the purpose of identifying the button clicked to execute the respective on-click action.

Note:

The Rest API document explains in detail about the button object  and the different types of actions that can be invoked.

Workflow of the button function

A function works in association with a button. Ideally, the workflow for a function will be:

  • Create a function for a specific task.
  • Customise a message card with the button object.
  • Optimise the button action, by adding the function name as a value for the key type in the button object. Take a look at the example given below for better understanding.

For example, let us try creating a /bugs command that will list get the list of issues filed under your name in Projects. The issues assigned to you will be listed in a table with a View Info button (inline button) to view more details of the issue. We can also add two more buttons on the card, to get the list of all open issues and closed issues. The function execution code is shown below.


//Button Object
"buttons":[
  {
    "label": "All Open Issues",
    "type": "+",
    "action": {
      "type": "invoke.function",
      "data": {
        "name": "projects"
      }
    },
    "arguments": {
    "key": portalproject
    }
  }
]

 


//Function Execution Code
response = Map();
if(target.get("name") == ":bug: Info")
{
    buttonid = arguments.get("key").toList("-");
    portal = buttonid.get(0);
    project = buttonid.get(1);
    ID = buttonid.get(2);
    bugdetails = invokeurl
    [
      url :"https://projects.zoho.com/restapi/portal/" + portal + "/projects/" + project + "/bugs/" + ID + "/"
      type :GET
      connection:"<insert_connection_name>"
    ];
    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")}}}}};
    info response;
}
else if(target.get("name") == "All Open Issues")
{
    info arguments;
    buttonid = arguments.get("key").toList("-");
    portal = buttonid.get(0);
    project = buttonid.get(1);
    bugdetails = invokeurl
    [
      url :"https://projects.zoho.com/restapi/portal/" + portal + "/projects/" + project + "/bugs/?statustype=open"
      type :GET
      connection:"<insert_connection_name>"
    ];
    info bugdetails;
    bugs = bugdetails.toMap().get("bugs");
    info bugs.size();
    
    if(bugs.size() > 0)
    {
      rows = List();
      for each  bug in bugs
      {
        row = Map();
        info bug;
        row.put("Issue ID",bug.get("key"));
        row.put("Assigned To",bug.get("assignee_name"));
        row.put("Severity",bug.get("severity").toMap().get("type"));
        row.put("Issue Status",bug.get("status").toMap().get("type"));
        if(rows.size() <= 5)
        {
          rows.add(row);
        }
      }
      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}}}};
    }
    else 
    {
      response = {"text": "Good news. Looks like there are no open issues in this project! :grinning:"};
    }
}
return response;

 

The below-shown series of screenshots explain how the command /bugs works. 

  • Typing /bugs in the chat window, will trigger the suggestions list for portal selection 

Command Suggestions for Portal Selection

  • On selecting the project portal from the command suggestion list, another list to select the relevant project is shown. 

Command Suggestions for Project Selection

  • Once the portal and the project is selected, the selected entities are shown in the text window. Execute the command once the suggestions are selected!

Command Execution

  • The command is executed to display a response with the list of issues tagged under the your (that is, the command executor) name. 

Command Execution Response

  • Clicking the bug info inline button, will fetch the details of each particular issue.

Response on clicking the inline button

  • Clicking the 'All Open Issues' button will get the recent issues reported in projects. 

Response on clicking the message card button-All Open Issues

Related Articles:

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

The exact workflow of this /bugs command along with the command execution and suggestion code is explained in this forum post.

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohocliq.com