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"}
]
}

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>
<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 »

Create an HTML Filter Template

Create the HTML for your filters:

inc_filter.htm

<div>
<span >×</span>
<h2>Filter</h2>
<div>
    <div appml-repeat="filteritems">
      <div>
        <div>
          <label>{{label||item}}:</label>
        </div>
        <div>
          <input type='hidden'>
          <select>
            <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>
          <input>
        </div>
      </div>
    </div>
</div>
<div>
    <h2>Order By</h2>
    <div>
      <div>
        <select id='appml_orderselect'>
          <option value=''></option>
          <option appml-repeat="sortitems" value="{{item}}">{{label || item}}</option>
        </select>
      </div>
      <div>
        ASC <input type='radio' name='appml_orderdirection' value='asc'>
        DESC <input type='radio' name='appml_orderdirection' value='desc'>
      </div>
    </div>
</div>
<br>
<button type="button">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 withappml-include-html:

Example

<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<divappml-include-html="inc_filter.htm"></div>
<table>
<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 »

❮ Previous Next ❯

★+1