Overview Table
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
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
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
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:
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:
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.