Overview

This table will display all the equips and points on a floor. When a value is clicked, magic bubbles will appear.

Function (Import from folio as trio)

Copy the code
Navigate to Folio → Launch and select the upload button towards the top left
Toggle to “Enter text”
Paste the code in the provided space
Toggle to “Trio” format and select OK

(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

Template

<div class="top">
    <div class="s-scroll">
    <table style="width:100%">
    <tr>
      {{#columns}}
        {{#if label == ''}}
          <th></th>
          {{else}}
          <th><div class="s-color"><div class="{{#if rotate}}s-rotate{{else}}s-label{{/if}}">{{label}}</div></div></th>
        {{/if}}
      {{/columns}}
    </tr>
    {{#rows}}
      <tr>
        {{# {row:this} }}
          {{#columns}}
            {{#if !row[type]}}
              <td><div class="s-box"></div></td>
             {{else}}
              <td>{{> row[type]}}</td>
            {{/if}}
          {{/columns}}
        {{/}}
      </tr>
    {{/rows}}
  </table>
</div>
 
{{#partial true}}
  <div class="s-name mnr">{{name}}</div>
{{/partial}}
   
{{#partial str}}
  <div class="s-box pointer" id="{{row[id]}}" on-click="magicB">
    {{row[property]}}
    {{#if row[description]}}<span class="tooltip">{{row[description]}}</span>{{/if}}
  </div>
{{/partial}}
   
{{#partial number}}
  <div class="s-box pointer" id="{{row[id]}}" on-click="magicB">
    {{row[property]}}
    {{#if row[description]}}<span class="tooltip">{{row[description]}}</span>{{/if}}
  </div>
{{/partial}}
 
{{#partial bool}}
  <div class="s-box pointer" id="{{row[id]}}" on-click="magicB">
    {{row[property]}}
    {{#if row[description]}}<span class="tooltip">{{row[description]}}</span>{{/if}}
  </div>
{{/partial}}
</div>

Model

{
data : {
    columns : [],
    rows : []
  }
}

Style

.top{
    overflow: auto;
    width: 100%;
    height: 100%;
}
.s-scroll{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.s-rotate{
    background-color: #d2d3d5;
    height: 100px;
    width: 100px;
    border-radius: 3px;
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.s-color{
    width:100%;
    background-color: #d2d3d5;
    border-radius: 3px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.s-label{
    width: 98%;
    background-color: #d2d3d5;
    padding: 10px 0 10px 0;
    border-radius: 3px
     
}
.pointer{
    cursor: pointer;
}
.pointer:hover{
    background-color: #e0e0e0;
}
.s-name{
    padding-left: 5px;
    font-weight: 600;
    width: 150px;
}
.s-box{
    margin-top: 3px;
    margin-right: 3px;
    background-color: #e6e7e9;
    height: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.s-box .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
}
.s-box:hover .tooltip {
    visibility: visible;
}
.s-key{
    height:50px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.msl{
    margin-left: 5px;
}
.mnr{
    margin-right: 10px;
}

Init

this.ractive.fire("obtainData");

this.ractive.on("magicB", function(clicked_id) {
    var item = clicked_id.node.attributes.id.nodeValue;
    if (item)
    top.app.ShowRelatedBubbles(item, item, true, event);
});

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 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('tableFunc()').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 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 tableFunc() as a string:

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

If using a string within a string, you’ll need to escape the quotes inside the initial quotes. For example, in our case, we don’t want all the vav equips, only those under floor 1 which is named “1st Floor”. The query would look something like this:

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

Overview Table