Widget Function Handler

A widget function is triggered when a user interacts with buttons (both message and instant buttons) associated with a widget. The widget function handler can be called to executed an intended action. The attributes passed when a widget function handler is triggered are:

Attribute NameDescription
userDetails of the user who has triggered the function.
targetButton object details such as button label, hint, and key.
accessDetails of the web client from which the user is accessing the widget button, their user ID.
environmentDetails of the data center to which the user belongs.

Example: 

Let us consider a widget created to view and manage your Twitter feed right from Cliq. In the following sample syntax, we're defining two tabs, one to display the top 20 tweets from your twitter timeline, like and interact with those tweets and the second tab to show top trending topics worldwide. The invoke URL task is used to establish a connection between Cliq and Twitter. The widget function handler will be triggered when a user favorites a tweet on their timeline. Once a user favorites a tweet, the button label gets updated to display the total number of likes currently along with a success banner letting the user know that they've favorited the tweet. Take a look at the syntax below. 

Prerequisites:

  1. Create a widget and add the widget execution handler code. Head over to our guide on the widget execution handler
  2. Create a connection with Cliq and Twitter and use the invoke URL task in the function code. Head on over to our help guide on how to create a connection.  


keys = target.get("id").toList("_");
operation = keys.get(0);
if(keys.size() > 1)
{
	id = keys.get(1);
}
result = Map();
if(operation == "like")
{
	favorite = invokeurl
	[
		url :"https://api.twitter.com/1.1/favorites/create.json?id=" + id
		type :POST
		connection:"" //Give your connection name
	];
	info favorite;
	if(favorite.get("favorited") == "true")
	{
		feedUser = favorite.get("user");
		elements = list();
		title = feedUser.get("name") + " " + feedUser.get("screen_name");
		favoriteCount = 0;
		if(favorite.containsKey("retweeted_status"))
		{
			elements.add({"type":"subtext","text": feedUser.get("name") + " retweeted."});
			title = favorite.get("retweeted_status").get("user").get("name") + " " + favorite.get("retweeted_status").get("user").get("screen_name");
			favoriteCount = favorite.get("retweeted_status").get("favorite_count");
		}
		else
		{
			favoriteCount = favorite.get("favorite_count");
		}
		if(title.length() > 50)
		{
			title = title.subString(0,47) + "...";
		}
		text = favorite.get("text");
		createdAt = favorite.get("created_at");
		createdAt = createdAt.subString(0,createdAt.indexOf("+"));
		createdAt = createdAt.subString(0,createdAt.lastIndexOf(":"));
		text = text + "\n##### [- " + createdAt + "](https://twitter.com/" + favorite.get("user").get("screen_name") + "/status/" + favorite.get("id") + ") ";
		elements.add({"type":"activity","title":title,"description":text,"image_url":feedUser.get("profile_image_url_https")});
		buttonsText = "["+":love:" + favoriteCount + "]($1)";
		likeButton = {"label":":love: " + favoriteCount,"type":"invoke.function","name":"twitterappletbtns","id":"like_" + favorite.get("id")};
		elements.add({"type":"text","text":buttonsText,"button_references":{"1":likeButton}});
		elements.add({"type":"divider"});
		return {"type":"section","elements":elements,"status":{"text":"Favourited this tweet! :smile:","type":"success"}};
	}
	else if(favorite.get("errors").toMap().get("code") == "139")
	{
		result = {"text":" You’ve already favourited this tweet :smile:","status":"failure","type":"banner"};
	}
	else if(favorite.get("errors").toMap().get("code") == "144")
	{
		result = {"text":"Looks like this tweet has been deleted. :sad:","status":"failure","type":"banner"};
	}
	result.put("type","banner");
}
return result;