...

Function (Import from folio as trio)

This will import a function called overviewTableFunc.

1. Copy the code

2. Navigate to Folio → Launch and select the upload button towards the top left

3. Toggle to “Enter text”

4. Paste the code in the provided space

5. Toggle to “Trio” format and select OK

name:overviewTableFunc
mod:2017-08-01T20:00:36.728Z
func
id:@21136e63-ad1301d7 "overviewTableFunc"
src:
  (filter:"equip") => do
    equips: readAll(filter.parseFilter).sort("navName")
    rows: []
    cols: []
  
    equips.each x=> cols = cols.addAll(readAll(point and equipRef==x->id).colToList("navName"))
    cols = cols.unique.sort
    equips.each x=> do
      c: 1
      t: {label:true, name: x.dis}
      cols.each y=> do
        g: readAll(point and equipRef==x->id and navName==cols[c -1])
        if(g.size > 0) do
          g = g[0]
          t = t.set("val"+c+"Id","@"+g->id).set("val"+c+"Description",null)
          t = t.set("val"+c, if(g.has("curVal")) do
            if(g->curVal.isNumber) do
              u: g->curVal.unit
              if(u == null) g->curVal.finPrecision(2).toStr
              else g->curVal.finPrecision(2) + u
            end else g->curVal.toStr
          end else 0)
          t = t.set("val"+c+"Type", if(g.has("kind")) g->kind.lower else "")
        end
        c = c + 1
      end
      rows = rows.add(t)
    end
    cols = cols.map((x,y)=> do
      y = y + 1
      {label: x, property: "val"+y, rotate: true, type: "val"+y+"Type", id: "val"+y+"Id", description: "val"+y+"Description"}
    end)
    cols = cols.insert(0,{label: "", property: "label", rotate: "true", type: "label"})
    {data: {columns: cols, rows: rows}}
  end

Ractive setup

• Drag Ractive out from components on the left side menu, and click on it to have the green outline
  

• The green box can be resized to however small or large you would like your component

• Under properties open the ractive editor, and copy and paste from the Ractive Code given above for template, model, style, and init

...

• After saving go to programs and add a new program

  • Name your program, and set the program target filter to stackractive

  • Copy and paste the below code for the program into the main part (the filter for the tableFunc overviewTableFunc function can be modified to return the equip data you want. Look at the program section for more info.)

  • Top right of program editor, click the three dots, and select variables

  • Click the gear that appears as you hover over this

  • turn Invokes the Function on and change the dropdown to Custom Event

  • Type in obtainData in the line below and save

  Save and you're done!

Program

...

var template = this;
var target   = query('targetPoint');
var columns  = [];
finstack.eval('tableFuncoverviewTableFunc()').then(function(data) {
    var realPoints   = data.result.toObj();
    console.log(realPoints);
    template.columns = realPoints[0].data.columns;
    template.rows    = realPoints[0].data.rows;
});

By default, the tableFunc overviewTableFunc function on line 4 above will return all equips. To change this, you can add your own filter to query for certain equips. Examples below:

In our case, we have equips tagged as “equip and vav”. To filter those, it would be something like this for line 4, where the filter is inside the tableFuncoverviewTableFunc() as a string:

finstack.eval('tableFuncoverviewTableFunc("equip and vav")').then(function(data) {

...

finstack.eval('tableFuncoverviewTableFunc("equip and vav and floorRef->dis==\\\"1st Floor\\\"")').then(function(data) {

...

If you want to dynamically get the target floor to make the graphic relative. You can utilize the target variable in the program to get the current context. Use the below query that includes syntax to read that variable to get the ID of the current context.

finstack.eval(`overviewTableFunc("equip and floorRef==${target.pointId}")`).then(function(data) {