Here is an example of an icon with a point. Line 1 we query the Ractive component. We put a tag on the Ractive model called stackRactive, but the tag can be named anything as long as it matches the query on line 1. Line 3 of the code shown below is a finstack.eval which calls 4 points. This query can be changed to output a different result. On line 8 we call points.push. In this is where the main Icon and Icon color can be defined. Also the smaller icon and label at the bottom (btIcon and btIconText) can also be defined here as well.

var ractiveComponent    = query('stackRactive');

finstack.eval("readAll(point and his and curVal).get(0..3)").then(function(data) {
    var points      = [];
    var realPoints  = data.result.toObj();
    
    realPoints.forEach(function(p,index) {
        points.push({
            mainIcon    : "icon-location",
            iconColor   : "#c9b4e0",
            mainText    : p.navName,
            mainValue   : fin.Data.PointUtil.GetPrettyValue(p),
            btIcon      : "icon-clockwise",
            btIconText  : "Refresh",
            view        : 'icon',
            range       : "today()",
            pointId     : p.id,
            index       : index,
            original    : p,
            fold        : "live" 
        });
    });
    
    ractiveComponent.ractive.set({points:points});
    ractiveComponent.ractive.get('updatePoll').call(ractiveComponent);
    
}, function(err) {
    console.error(err);
});

For a full list of icons to choose from for mainIcon and btIcon open Graphics Builder and in the right menu select File Assets → List of Icons. (basically its going to ip:port/pod/finStackMobileExt/icons.html).

To add a tag on your Ractive component, click on the tag icon and type the tag name.

We put our code on a button. Drag out a button from components. Right click on it, select create event, mouse, mouse click, and then paste in the code above.

Browser not supported