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)

This will import a function called overviewTableFunc.

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

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

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

finstack.eval('overviewTableFunc("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('overviewTableFunc("equip and vav and floorRef->dis==\\\"1st Floor\\\"")').then(function(data) {

Overview Table