🎮 AppML – Controllers: Syntax & Use Cases Explained

🧲 Introduction – What Are AppML Controllers?

In AppML, a controller is a JavaScript file that adds logic and behavior to your model-view setup. While AppML focuses on HTML-based data binding, controllers handle filtering, validation, and user interactions, extending your app’s functionality—without sacrificing simplicity.

🎯 In this guide, you’ll learn:

• The role of AppML controllers in your application
• How to write and attach controller scripts
• Common use cases: filtering, sorting, form validation, and actions
• Syntax for key controller functions

🧩 What Is an AppML Controller?

An AppML controller is an external .js file attached to an HTML element using the appml-controller attribute. It accesses the model-view state through the global variable myAppML.

✅ Example Syntax

<div appml-data="data/users.json" appml-controller="user-controller.js">
  <h4>{{name}}</h4>
  <p>{{email}}</p>
</div>

✅ Controller File (user-controller.js)

myAppML.onshow = function() {
  myAppML.filter = "email LIKE '*@example.com'";
};

✔️ This filters data before it’s rendered, showing only users with “@example.com” emails.

🔍 Controller Lifecycle Functions

🧪 Real Use Case Examples

1️⃣ Filtering Data by Role

myAppML.onshow = function() {
  myAppML.filter = "role='Admin'";
};

💡 This shows only admin users in your table or list view.

2️⃣ Sorting Data Alphabetically

myAppML.onshow = function() {
  myAppML.sort = "name";
};

✔️ Sorts users by name in ascending order.

3️⃣ Validating Form Inputs

myAppML.onvalidate = function() {
  if (myAppML.data.name === "") {
    alert("Name is required!");
    return false;
  }
  return true;
};

🔒 Prevents form submission if the name field is empty.

4️⃣ Submitting with Confirmation

myAppML.onsubmit = function() {
  return confirm("Do you want to save this record?");
};

☑️ Adds a confirmation dialog before saving the record.

⚙️ Full Controller Template

myAppML.oninit = function() {
  // Run before data is loaded
};

myAppML.onshow = function() {
  // Filter or sort logic
};

myAppML.onaftershow = function() {
  // Add click handlers or UI tweaks
};

myAppML.onvalidate = function() {
  // Return false to cancel form submission
};

myAppML.onsubmit = function() {
  // Confirm action before submit
};

📁 Folder Structure Best Practice

Organize your controllers like this:

/appml-app/
├── controller/
│   ├── user-controller.js
│   └── product-controller.js

Then attach using:

<div appml-controller="controller/user-controller.js">

✅ Keeps your code modular and maintainable.

📌 Summary – Recap & Key Takeaways

AppML controllers enhance your HTML-driven apps by allowing lightweight logic without JavaScript frameworks. You can filter data, validate input, sort results, and control form submissions using simple, readable functions.

🔍 Key Takeaways:

• AppML controllers extend logic into model-view HTML apps
• Use appml-controller="file.js" to attach behavior
• Lifecycle methods like onshow, onvalidate, and onsubmit enable real interactivity
• Keep logic files separate from HTML for modularity
• Ideal for dashboards, CRMs, and admin panels

⚙️ Controllers turn static data rendering into dynamic, responsive applications.

❓ FAQs – AppML Controller Syntax and Use Cases

❓ Do I need a controller for every AppML view?
❌ No. Use controllers only when you need filtering, validation, or custom logic.

❓ Can one controller file be used for multiple elements?
✅ Yes, if the logic is general-purpose and doesn’t rely on element-specific data.

❓ What happens if a controller script fails to load?
❌ The element will render without added logic. Check the browser console for errors.

❓ Is myAppML available globally?
✅ Yes, it is available inside your controller functions and scoped to the element using it.

❓ Can I debug controllers with console.log()?
✅ Absolutely. Use developer tools (F12) to inspect outputs and trace logic flow.