AppML – Event Handling in AppML: Add Interactivity Without JavaScript Frameworks

Introduction – Why Handle Events in AppML?

Even in low-code environments like AppML, applications need to respond to user actions—like clicking a button, submitting a form, or loading data. AppML supports event hooks via a controller file, allowing you to execute logic at different stages of the application lifecycle—without needing a full JavaScript framework.

In this tutorial, you’ll learn:

• What events are available in AppML
• How to use AppML’s event methods like onready, onshow, and onvalidate
• How to attach a controller to handle those events
• Real-world examples with code and detailed explanations

AppML Event Lifecycle Overview

AppML controllers let you hook into lifecycle events using these predefined functions:

All of these are defined on the global myAppML object inside a controller JavaScript file.

Example 1 – Setup onready and onshow

controller.js

myAppML.onready = function() {
  console.log("AppML is initialized.");
};

myAppML.onshow = function() {
  alert("Data has been loaded successfully!");
};

Explanation:

HTML Page:

<div 
  appml-controller="controller.js"
  appml-model="models/users-model.json"
  appml-data="users.php">

  <h2>User List</h2>
  <p>{{name}} – {{email}}</p>
</div>

✔️ When the view is loaded, onready logs to the console and onshow displays an alert once data is rendered.

Example 2 – Using onvalidate() to Prevent Invalid Submission

Controller File: form-controller.js

myAppML.onvalidate = function() {
  if (!myAppML.data.email.includes("@")) {
    myAppML.message = "Please enter a valid email address.";
    return false;
  }
  return true;
};

Explanation:

HTML Form:

<div 
  appml-controller="form-controller.js"
  appml-model="models/form-model.json"
  appml-data="form-handler.php"
  appml-message>

  <input name="email" placeholder="Your Email">
  <button appml-submit>Submit</button>
</div>

✔️ This form won’t submit unless the entered email contains “@”.

Example 3 – Track Insert and Update Events

crud-controller.js

myAppML.oninsert = function() {
  console.log("New record is being inserted.");
};

myAppML.onupdate = function() {
  console.log("Record is being updated.");
};

myAppML.onsave = function() {
  alert("Save operation completed successfully.");
};

Explanation:

• oninsert: Runs before inserting a new entry.
• onupdate: Fires before updating an existing record.
• onsave: Executes after either insert or update succeeds.

These can be used for:

• Data transformation
• Logging
• User notifications
• Conditional redirects

Complete Event Flow in AppML

Page Loads
  ↓
appml-controller is loaded
  ↓
onready() → initialize logic or prefetch settings
  ↓
appml-data fetches data
  ↓
onshow() → filter/format results
  ↓
User edits or submits form
  ↓
onvalidate() → optional field checks
  ↓
oninsert() or onupdate()
  ↓
onsave() → final post-save action

Summary – Recap & Key Takeaways

AppML provides event handling through simple JavaScript controller files. You can run logic at every stage—app initialization, data loading, form validation, insert/update, and save confirmation.

Key Takeaways:

• Use onready() and onshow() for UI logic after loading
• Use onvalidate() to intercept form submissions
• Use oninsert() and onupdate() to manage records
• Use onsave() for final notifications or page transitions

With AppML’s event handling, you can keep your HTML smart and reactive—without needing React or Vue.

FAQs – Event Handling in AppML

Do I need JavaScript frameworks to use AppML events?
No. AppML handles events with plain JavaScript in controller files.

Can I use more than one event in a single controller?
Yes. You can define multiple lifecycle functions like onready, onvalidate, onshow, etc., in the same file.

What if I forget to return true in onvalidate()?
The form may not submit. Always explicitly return true to allow submission.

Can I use event handlers with lists and forms both?
Yes. Events apply to any AppML view—lists, tables, forms, dashboards, etc.

Can I conditionally skip saving a record in oninsert()?
Yes. You can return false in oninsert() or onupdate() to cancel the action.