⚙️ 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:

Event Function	Triggered When…
onready()	AppML app is initialized and ready
onshow()	Data has been loaded and rendered to HTML
onvalidate()	Form is submitted—used for client-side validation
oninsert()	A new record is about to be inserted
onupdate()	A record is about to be updated
onsave()	After a record is inserted/updated

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:

Line	Purpose
onready	Fires once the AppML view is initialized and DOM is loaded
onshow	Executes after data from appml-data is fetched and rendered

---

✅ 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:

Code	What It Does
onvalidate	Runs when the user clicks the submit button
myAppML.data.email.includes("@")	Checks if the email input is valid
return false	Cancels form submission if the condition fails
myAppML.message	Displays an error message automatically in the view

---

✅ 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.

---

Share Now :