Change the Plug-In Tile Appearance

Use the iconData parameter to change the appearance of the plug-in button on the Landing page. You can change the status text, icon image, and color of the plug-in button. The status you can show includes number of processed activities, status of the order, number of pending actions, and so on. When the data is synchronized successfully, you can even change the icon to indicate it.

1. Determine the data that you want to display or update and the message through which you want to update.
2. Send the information that you want to display or update, in the iconData parameter.
   iconData is available for close, initEnd, and sleep messages. The data is applied real time. That is, if the plug-in is woken up when the user is on the Landing page, the icon is updated immediately after the plug-in sends the iconData parameter in the sleep message. The iconData parameter includes these fields:

   Field	Type	Limits	Description
   color	String	One of: "default" "highlight"	If the value is set to "highlight", the plug-in's button on the Landing page changes its color to get the user's attention.
   image	Blob	Max size: 64 KiB Allowed types: image/svg+xml image/png	Icon picture. It's recommended to use a scalable monochrome white icon in SVG format. If the bitmap picture is in PNG format, it must not be smaller than 64x64 px.
   text	String	Max length: 3 chars	The short text that is shown as large title on the plug-in's button. May contain both letters and digits.

Example of the close Message:

{
var closeData = {
    "apiVersion": 1,
    "method": "close",
    "iconData": {
        "color": "highlight",
        "text": "117",
        "image": new Blob([
            '<?xml version="1.0"?>' +
            '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" viewBox="0 0 64 64">' +
                '<rect x="16" y="16" width="32" height="32" fill="#fff" />' +
            '</svg>'
        ], { type: 'image/svg+xml' });
    }
}
 
 
window.parent.postMessage(closeData, origin);   
}