🧠 AppML – How to Use Controllers (with Full Code Explanations)

🧲 Introduction – Why Use Controllers in AppML?

AppML (Application Modeling Language) lets you build data-driven apps using only HTML and model files. But what if you want to add custom logic such as form validation, data filtering, or dynamic user feedback?

That’s where AppML controllers come in. Controllers are small JavaScript files that allow you to extend AppML’s capabilities without needing a large JS framework. They help manage app lifecycle events and provide hooks to control user interactions.

🎯 In this tutorial, you’ll learn:

• What controllers do in AppML
• How to attach a controller to a view
• How to use lifecycle methods (onready, onvalidate, etc.)
• Examples with full code and detailed explanations

---

🧱 What Is an AppML Controller?

An AppML controller is a JavaScript file that defines a set of functions to handle specific events in the AppML application lifecycle.

Hook/Method	When It Runs
onready()	When the AppML application is initialized
onshow()	After data is loaded and rendered
onvalidate()	Before a form is submitted
oninsert()	Before inserting a new record
onupdate()	Before updating an existing record
onsave()	After a record is saved

These methods are defined on the global myAppML object and are triggered automatically when the respective event occurs.

---

🧪 Example 1 – Basic Controller with onready and onshow

✅ Controller File: controller.js

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

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

✅ Explanation:

• onready: This logs a message to the browser console once AppML has fully initialized the view.
• onshow: This displays an alert popup after data is rendered on the page.

✅ HTML File:

<div 
  appml-controller="controller.js" 
  appml-model="models/users-model.json" 
  appml-data="users.php">
  
  <h2>User Directory</h2>
  <p>{{name}} – {{email}}</p>
</div>

✔️ This <div> connects the AppML model, the server-side data source, and the controller logic to create a dynamic, interactive user list.

---

🧪 Example 2 – Validating Form Input with onvalidate

✅ Controller File: validate-controller.js

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

✅ Explanation:

• This code checks if the entered email contains an @ symbol.
• If not, it sets a message and blocks the form submission by returning false.
• If valid, it allows the submission (return true).

✅ HTML Form:

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

  <input name="email" placeholder="Enter your email">
  <button appml-submit>Submit</button>
</div>

✔️ This creates a dynamic HTML form that validates email input without writing any JavaScript in the HTML itself.

---

🧪 Example 3 – Filtering Data Dynamically with onshow

✅ Controller File: filter-controller.js

myAppML.onshow = function() {
  myAppML.filter = function(row) {
    return row.status === "active";
  };
};

✅ Explanation:

• This controller filters the displayed data to only show records where status === "active".
• The filter function is applied after data is loaded.
• It skips rendering of inactive rows.

✅ HTML Page:

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

  <h2>Active Tasks</h2>
  <p>{{title}} – Status: {{status}}</p>
</div>

✔️ The view only displays tasks marked as “active,” thanks to the logic defined in the controller.

---

🔄 AppML Controller Lifecycle Summary

Here’s a simplified flow of how controllers interact with AppML:

Page loads
  ↓
appml-controller loads
  ↓
onready() → Initialization
  ↓
Data fetched via appml-data
  ↓
onshow() → Filtering, formatting
  ↓
User interaction (submit/update)
  ↓
onvalidate() → Field validation
  ↓
oninsert()/onupdate() → Before save
  ↓
onsave() → After record saved

---

📌 Summary – Recap & Key Takeaways

AppML controllers allow you to inject intelligence into your HTML apps. Whether it’s validating input, filtering views, or triggering logic, controllers give you powerful hooks without needing a large JavaScript codebase.

🔍 Key Takeaways:

• Controllers are simple JS files attached with appml-controller
• Use lifecycle methods like onready, onshow, onvalidate, etc.
• myAppML.data gives access to the current record being processed
• Return false in onvalidate to prevent bad submissions
• Ideal for low-code devs needing custom logic without full JS frameworks

⚙️ AppML controllers are the lightweight solution for adding logic to low-code HTML applications.

---

❓ FAQs – AppML Controllers Explained

---

❓ Do I need a separate controller for each view?
✅ Yes, each AppML view can load a different controller script for modular logic.

---

❓ What happens if I forget to return true in onvalidate()?
❌ If you return nothing or omit true, the form may not submit. Always explicitly return true or false.

---

❓ Can I log values in the controller for debugging?
✅ Yes. Use console.log(myAppML.data) to inspect the data being handled.

---

❓ Can I modify data inside a controller before saving?
✅ Yes, use oninsert() or onupdate() to change field values programmatically.

---

❓ Are controllers required in every AppML app?
❌ No. Use controllers only if you need to extend AppML’s default behavior.

---

Share Now :