...
Completed Model (Basic)
Download: actionsListactionList.zip
to work, you must add dataQuery tag (under properties and advanced) with the desired query to the ractive model. (Add by clicking the plus icon on the bottom left under the advanced properties)
for our example we set the query readAll(point).get(1..9) but you can set it differently to display the desired result. (Note - will only show points with actions)
Video
Example:
Ractive Code
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div class="s-main s-horizontal scan-scroll">
{{#myPoints}}
{{#if .actions}}
<div class="s-horizontal s-row view-superman-value {{#if @index % 2 == 0}} s-click1 status-stale {{else}} s-click2 status-disabled{{/if}}" align="center">
<label class=" s-style" on-click="actions">{{navName}}</label>
</div>
{{/if}}
{{/myPoints}}
</div> |
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
.s-main{
flex-wrap: wrap;
height: 100%;
overflow: scroll;
align-content: flex-start;
}
.s-value{
width: 100px;
}
.s-click1:hover{
cursor: pointer;
background-color: #c2bfbf;
}
.s-click2:hover{
cursor: pointer;
background-color: #e0e0e0;
}
.s-hand{
cursor: pointer;
}
.s-gear{
float: right;
}
.s-horizontal{
display: flex;
flex-direction: row;
align-items: center;
}
.s-row{
flex-grow: 1;
width: 200px;
height:40px;
flex-wrap: wrap;
margin-left: 5px;
margin-top: 5px;
}
.s-style{
flex-grow: 1;
width:100%;
}
.scan-scroll{
overflow: auto;
-webkit-overflow-scrolling: touch;
} |
...