AppML Controllers

The purpose of an AppML controller, is to let you control your application.

What Can a Controller Do?

Set initial data
Change application data
Handle input and output
Validate data
Summarize data
Handle errors
Start and stop applications
And much more

Without a Controller

By default AppML applications run without a controller:

Example

<table appml-data="customers.js">
<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>

Try It Yourself »

With a Controller

With an AppML controller, you can control your application with JavaScript.

The controller is a JavaScript function, provided by you.

The appml-controller attribute is used to refer to a controller function.

Example

<h1>Customers</h1>
<table appml-data="customers.js" appml-controller="myController">
<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>

<script>
function myController($appml) {
    if ($appml.message == "display") {
        if ($appml.display.name == "CustomerName") {
            $appml.display.value = $appml.display.value.toUpperCase();
        }
    }
}
</script>

Try It Yourself »

The controller (myController) in the example above, changes the value of "CustomerName" to uppercase, before it is displayed.

If you have a controller, AppML will send the application object ($appml) to the controller, for every important action.

One of the application properties is a message ($appml.message), describing the application state.

Message	Description
ready	Sent after AppML is initiated, and ready to load data.
loaded	Sent after AppML is fully loaded, ready to display data.
display	Sent before AppML displays a data item.
done	Sent after AppML is done (finished displaying).
submit	Sent before AppML submits data.
error	Sent after AppML has encountered an error.