AppML Lists
In this chapter, we will list records from a database.
The examples on this page use a local SQL database.
Local SQL databases does not work in IE or Firefox. Use Chrome or Safari.
Create a New Model
In the previous chapter, you used a model to create a database.
Now create a new model, including filter and sort definitions:
model_customerslist.js
{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Customers",
"orderby" : "CustomerName"
},
"filteritems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
],
"sortitems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
]
}
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Customers",
"orderby" : "CustomerName"
},
"filteritems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
],
"sortitems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
]
}
Use the model in your application:
Example
<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="subhodaya-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Try It Yourself »
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="subhodaya-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Create an HTML Filter Template
Create the HTML for your filters:
inc_filter.htm
<div id="appml-filtercontainer" class="subhodaya-container subhodaya-light-grey
subhodaya-margin-bottom subhodaya-padding-jumbo" style="display:none;">
<span id="appmlbtn_queryClose" onclick="this.parentNode.style.display='none';" class="subhodaya-closebtn">×</span>
<h2>Filter</h2>
<div id="appml-filter">
<div appml-repeat="filteritems">
<div class="subhodaya-row subhodaya-padding-bottom">
<div class="subhodaya-col m4">
<label>{{label||item}}:</label>
</div>
<div class="subhodaya-col m2 subhodaya-padding-right">
<input id="appml-datatype_{{item}}" type='hidden'>
<select id="appml-operator_{{item}}" class="subhodaya-select subhodaya-border">
<option value="0">=</option>
<option value="1"><></option>
<option value="2"><</option>
<option value="3">></option>
<option value="4"><=</option>
<option value="5">>=</option>
<option value="6">%</option>
</select>
</div>
<div class="subhodaya-col m6 subhodaya-padding-right">
<input id="appml-query_{{item}}" class="subhodaya-input subhodaya-border">
</div>
</div>
</div>
</div>
<div id="appml-orderby">
<h2>Order By</h2>
<div class="subhodaya-row">
<div class="subhodaya-col m5 subhodaya-padding-right">
<select id='appml-orderselect' class="subhodaya-select subhodaya-border">
<option value=''></option>
<option appml-repeat="sortitems" value="{{item}}">{{label || item}}</option>
</select>
</div>
<div class="subhodaya-col m7">
ASC <input type='radio' id="appml-orderdirection_asc" name='appml-orderdirection' value='asc' class="subhodaya-radio">
DESC <input type='radio' id="appml-orderdirection_desc" name='appml-orderdirection' value='desc' class="subhodaya-radio">
</div>
</div>
</div>
<br>
<button id="appmlbtn_queryOK" type="button" class="subhodaya-btn subhodaya-green">OK</button>
</div>
<span id="appmlbtn_queryClose" onclick="this.parentNode.style.display='none';" class="subhodaya-closebtn">×</span>
<h2>Filter</h2>
<div id="appml-filter">
<div appml-repeat="filteritems">
<div class="subhodaya-row subhodaya-padding-bottom">
<div class="subhodaya-col m4">
<label>{{label||item}}:</label>
</div>
<div class="subhodaya-col m2 subhodaya-padding-right">
<input id="appml-datatype_{{item}}" type='hidden'>
<select id="appml-operator_{{item}}" class="subhodaya-select subhodaya-border">
<option value="0">=</option>
<option value="1"><></option>
<option value="2"><</option>
<option value="3">></option>
<option value="4"><=</option>
<option value="5">>=</option>
<option value="6">%</option>
</select>
</div>
<div class="subhodaya-col m6 subhodaya-padding-right">
<input id="appml-query_{{item}}" class="subhodaya-input subhodaya-border">
</div>
</div>
</div>
</div>
<div id="appml-orderby">
<h2>Order By</h2>
<div class="subhodaya-row">
<div class="subhodaya-col m5 subhodaya-padding-right">
<select id='appml-orderselect' class="subhodaya-select subhodaya-border">
<option value=''></option>
<option appml-repeat="sortitems" value="{{item}}">{{label || item}}</option>
</select>
</div>
<div class="subhodaya-col m7">
ASC <input type='radio' id="appml-orderdirection_asc" name='appml-orderdirection' value='asc' class="subhodaya-radio">
DESC <input type='radio' id="appml-orderdirection_desc" name='appml-orderdirection' value='desc' class="subhodaya-radio">
</div>
</div>
</div>
<br>
<button id="appmlbtn_queryOK" type="button" class="subhodaya-btn subhodaya-green">OK</button>
</div>
Save the filter HTML in a file with a proper name like "inc_filter.htm".
Include the filter HTML in your prototype with appml-include-html:
Example
<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="subhodaya-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Try It Yourself »
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="subhodaya-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
