Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

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.