AppML Messages
AppML Messages and Actions
When AppML is about to perform an action, it sends the application object ($appml) to the controller.
One of the application object's properties is a message ($appml.message), describing the application state.
Testing this message, enables you to add your own JavaScript code, depending on the action.
Example
function myController($appml) {
if ($appml.message == "ready") {alert ("Hello Application");}
}
Try It Yourself »
AppML Messages
This is a list of AppML messages that can be received:
| 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. |
The "ready" Message
When an AppML application is ready to load data, it will send a "ready" message.
This is the perfect place to provide the application with initial data (start values):
Example
<div appml-controller="myController" appml-data="customers.js">
<h1>Customers</h1>
<p>{{today}}</p>
<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>
<p>Copyright {{copyright}}</p>
</div>
<script>
function myController($appml) {
if ($appml.message == "ready") {
$appml.today = new Date();
$appml.copyright = "W3Schools"
}
}
</script>
Try It Yourself »
In the example above, when the $appml.message is "ready", the controller adds two new properties to the application (today and copyright).
When the application runs, the new properties are available to the application.
The "loaded" Message
When an AppML application is loaded with data (ready to display), it will send a "loaded" message.
This is the perfect place to provide changes (if necessary) to the loaded data.
Example
function myController($appml) {
if ($appml.message == "loaded") {
// compute your values here before display
}
}
The "display" Message
Each time AppML is displaying a data item, it will send a "display" message.
This is the perfect place to modify the output:
Example
<div appml_app="myController" appml-data="customers.js">
<h1>Customers</h1>
<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>
<script>
function myController($appml) {
if ($appml.message == "display") {
if ($appml.display.name == "CustomerName") {
$appml.display.value = $appml.display.value.substr(0,15);
}
if ($appml.display.name == "Country") {
$appml.display.value = $appml.display.value.toUpperCase();
}
}
}
</script>
Try It Yourself »
In the example above, "CustomerName" is truncated to 15 characters, and "Country" is converted to upper case.
The "done" Message
When an AppML application has finished displaying data, it will send a "done" message.
This is the perfect place to clean up or calculate application data (after display).
Example
<script>
function myController($appml) {
if ($appml.message == "done") {
calculate data here
}
}
</script>
The "submit" Message
When an AppML application is ready to submit data, it will send a "submit" message.
This is the perfect place to validate application input.
Example
<script>
function myController($appml) {
if ($appml.message == "submit") {
validate data here
}
}
</script>
The "error" Message
If an error occurs, AppML will send an "error" message.
This is the perfect place to handle errors.
Example
<script>
function myController($appml) {
if ($appml.message == "error") {
alert ($appml.error.number + " " + $appml.error.description)
}
}
</script>
AppML Properties
This is a list of some commonly used AppML properties:
| Property | Description |
|---|---|
| $appml.message | The current state of the application. |
| $appml.display.name | The name of the data field about to be displayed. |
| $appml.display.value | The value of the data field about to be displayed. |
| $appml.error.number | The error number. |
| $appml.error.description | The error description. |
