📝 AppML – Form-Driven Models: Build Dynamic Forms with Structured Logic

🧲 Introduction – What Are Form-Driven Models in AppML?

AppML simplifies form handling by linking HTML forms directly with models that define field behavior, validation rules, and database relationships. These are called form-driven models. With them, you can build complete, interactive forms for Create, Read, Update, and Delete (CRUD) operations—without any JavaScript!

🎯 In this article, you’ll learn:

• How form-driven models work in AppML
• How to connect forms to models and data sources
• Use cases for auto-generated forms (CRUD apps, admin panels)
• Validation, field constraints, and controller enhancements

---

🧩 What Is a Form-Driven Model?

A form-driven model in AppML is a .json or .xml file that defines:

• Fields (name, datatype, required)
• Input controls (text, number, dropdown, etc.)
• Validation logic
• Default values and display formats
• Related database table

When used with appml-model, AppML auto-generates form fields, applies validation, and binds data to the backend.

---

🧱 Sample JSON Model – models/user-model.json

{
  "tablename": "users",
  "orderby": "name",
  "fields": [
    { "name": "id", "primarykey": true },
    { "name": "name", "required": true },
    { "name": "email", "required": true },
    { "name": "role", "default": "Viewer" }
  ]
}

✅ This model:

• Sets “users” as the database table
• Marks “name” and “email” as required fields
• Defines “role” with a default value

---

🧪 Example – HTML Form Bound to a Model

<div appml-model="models/user-model.json" appml-data="get-users.php">
  <input name="name">
  <input name="email">
  <select name="role">
    <option>Admin</option>
    <option>Editor</option>
    <option>Viewer</option>
  </select>
  <button appml-submit>Save</button>
</div>

🎉 With this setup, AppML:

• Loads data
• Maps fields to the model
• Enforces validation on submit
• Sends data to the backend (via POST)

---

🔍 AppML Form Attributes

Attribute	Purpose
appml-model	Connects HTML form to a data model
appml-data	Loads existing records into form
appml-submit	Triggers form submission
name="..."	Binds input field to a model property

---

✨ Custom Validation with Controller

Add business logic validation before submission:

✅ user-controller.js

myAppML.onvalidate = function() {
  if (!myAppML.data.email.includes("@")) {
    alert("Enter a valid email.");
    return false;
  }
  return true;
};

This complements the static validation defined in your model file.

---

🔁 CRUD with Form-Driven Models

AppML + form-driven models = full CRUD support:

Operation	How It Works
Create	Leave id blank and click Save
Read	AppML loads data via appml-data
Update	Edit form and click Save
Delete	Call myAppML.deleteRecord() in a controller

---

💡 Tip – Dynamic Dropdowns from Data Files

You can populate a <select> from a JSON list:

✅ HTML

<select name="category" appml-data="data/categories.json">
  <option>{{name}}</option>
</select>

✅ data/categories.json

[
  { "name": "Admin" },
  { "name": "User" },
  { "name": "Guest" }
]

🧠 Auto-generates dropdown options based on the datafile.

---

📌 Summary – Recap & Key Takeaways

Form-driven models are at the heart of AppML’s low-code strategy. They automate form creation, validation, and binding—so you can focus on building features, not wiring logic.

🔍 Key Takeaways:

• Form-driven models define field structure, rules, and defaults
• Auto-generate form controls using appml-model + name="..."
• Easily build CRUD forms without JS frameworks
• Combine with controllers for custom validation and actions

⚙️ Use form-driven models to rapidly create admin panels, signup forms, profile editors, and more.

---

❓ FAQs – Form-Driven Models in AppML

---

❓ Do I need to write JavaScript for form validation?
❌ Not always. Use required, datatype, and default in your model. Use onvalidate only for advanced logic.

---

❓ Can I submit the form to a backend like PHP?
✅ Yes. AppML automatically sends form data to the appml-data URL for POST/PUT operations.

---

❓ How do I clear the form after save?
✅ Use myAppML.clear() after submission inside onaftershow or onsubmit.

---

❓ Can I use dropdowns with dynamic values?
✅ Yes! Use appml-data="..." on a <select> element and bind via {{field}}.

---

❓ Are model files required for all forms?
⚠️ Not strictly, but they are recommended for validation, default values, and future scalability.

---

Share Now :