Tutorial: application.setTrayIcon

Adds a customizable icon in the system tray and notifies the application when clicked.

Example

To set up the application's clickable tray icon:

var application = fin.desktop.Application.getCurrent(),
    iconImage = "http://cdn.openfin.co/assets/testing/icons/circled-digit-one.png",
    mouseButton = ['left', 'middle', 'right'];

function clickListener(clickInfo) {
    console.log(`The mouse has ${mouseButton[clickInfo.button]}-clicked on the app's tray icon at (${clickInfo.x},${clickInfo.y})`);
}

application.setTrayIcon(iconImage, clickListener);

To set up the the icon with a hover handler as well:

var listeners = {
    clickListener: clickListener, //defined above
    hoverListener: function hoverListener(hoverInfo) {
       console.log(`The mouse has hovered over the app's tray icon at (${hoverInfo.x},${hoverInfo.y})`);
   } 
};

application.setTrayIcon(iconImage, listeners);

Both handlers are optional, but for a tray icon to be useful it should have at least one of these.

Click info

This response has the trayIconClickEvent shape (with typical sample values):

{
    button: 0, //the mouse button clicked (0=left, 1=middle, 2=right)
    monitorInfo: {...}, //see fin.desktop.System.getMonitorInfo
    x: 1483, //the horizontal virtual screen coordinate of the center of the icon receiving the click
    y: 1036, //the vertical virtual screen coordinate of the center of the icon receiving the click
    bounds: { //position and dimensions of icon rectangle
        x: 1471, //the left virtual screen coordinate of the icon
        y: 1022, //the top virtual screen coordinate of the icon
        width: 24, //the width of the icon in virtual screen pixels
        height: 28 //the height of the icon in virtual screen pixels
    }
}

Hover info

This response has the trayIconHoverEvent shape, similar to trayIconHoverEvent except without a button property.