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.