Description

This drop down menu will pull up the magic bubbles for whatever point is selected.

Completed Model (Basic)

Video

Example:

Ractive Code

Template

<li class="sp-li">
  <ul class="spfirstul spoints">
    {{#items}}
    <li class="spoints"><div class="view-superman-value" id="sar" align="center" on-click='fooToggle'>{{displayName}}</div>
      <ul class="spsecondul spoints">
        <br>
        {{#if foo}}
        {{#subItems}}
        <div align="center"><li class="view-superman-label spoints space" on-click="showName">{{navName}} {{description}}</li></div><br>
        {{/subItems}}
        {{/if}}
      </ul>
    </li>
    {{/items}}
  </ul>
</li>

This sets up the drop down menu

Model

{
      data: {
    items:[{displayName:"Floor 1",foo:false,subItems:[{navName:"Vav-01"},{navName:"Vav-02"},{navName:"Vav-03"}]},
           {displayName:"Floor 2",foo:false,subItems:[{navName:"Vav-01"},{navName:"Vav-02"},{navName:"Vav-03"},{navName:"Vav-04"}]},
           {displayName:"Floor 3",foo:false,subItems:[{navName:"Vav-01"},{navName:"Vav-02"},{navName:"Vav-03"}]}],
  },
  
 oninit: function() {
   this.on("fooToggle", function(event) {
     var item    = this.get(event.keypath);
     this.set(event.keypath+ '.foo', !item.foo);
     console.log(event);
   });
 }
}

This sets up the data and items for the query.

Style

.spfirstul{
   padding: 10;
    margin: 10;
}
.sp-li {
   display: inline;
    position: relative;
    cursor: pointer;
}
.spsecondul{
    position: relative;
    display: block;
}
#sar{
    width:100%;
}
.spoints{
    clear: both;
    overflow: hidden;
}
.space{
    padding-right: 20%;
}

This is the css to style the list

INIT

this.ractive.fire('obtainData');

this.ractive.on("showName", function(event) {
    var item    = this.get(event.keypath);
    if (item)
    top.app.ShowRelatedBubbles(item.id, item.id, false, event);
});

obtainData is what connects the Ractive model to the program. The function showName is for the gears and magicB is for the magic bubbles.

Program

var fooTarget = query('query');
this.items = fooTarget.curVal.toObj();

This is your program, It sets the query equal to your ractive component

Function

name:foo
id:@204c93f3-fb0c0b9f "foo"
func
mod:2017-03-28T16:56:20.753Z
src:
  (itemsFilter:"floor",subFilter:"vav",findBy:"floorRef") => do
    items:finFindRecordByChildDeep(itemsFilter.parseFilter, subFilter.parseFilter).toRecList().map(row => row.set("displayName",row->siteRef.readById.dis + " " + row->dis)).toGrid().sort("displayName")
    myData:items.toRecList().map(row => row.set("subItems", try readAll(subFilter.parseFilter and parseFilter(findBy+"==@"+row->id)).sort("navName").toRecList() catch 0))

  end

Import this function from folio. Import as text and with format trio.

How To Make your Own

Bring Ractive out from components on the left side menu, and click on it to have the green outline
Under properties open the ractive editor, and copy and paste from the Ractive Code given above for template, model, style, and init
After copying and pasting, should look like the screenshots below
After saving go to programs and add a new program
- Name your program, and set the program target filter to stackRactive
- 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
- Copy and paste the above code for program into the main part and save
Next add a virtual point:
- on the right menu click virtual points
- + New virtual point
- change virtualPoint Type to be set to Query (you can name the VirtualPoint Name whatever you want)
- Put the desired query in the Axon Query, for this example it is running on the program foo()
Save and you're done!

FIN Framework

Vertical Drop Down with Magic Bubbles