🧩 AppML – Reusable Component Creation: Modularize Your AppML Web Apps

🧲 Introduction – Why Build Reusable Components in AppML?

In modern web development, component reusability improves maintainability, consistency, and developer efficiency. With AppML, you can create modular HTML structures—like forms, tables, headers, footers, and search bars—that are reusable across multiple pages or apps using just HTML and AppML directives.

🎯 In this guide, you’ll learn:

• How to create and reuse components using appml-include
• Combine components with appml-data and appml-model
• Dynamic inputs and data placeholders using {{ }}
• Best practices for designing AppML-friendly components

---

🧩 What Are Reusable Components in AppML?

Reusable components in AppML are HTML snippets or blocks that can be inserted multiple times across pages using the appml-include attribute. These can contain:

• Forms connected to models
• Data display blocks
• Menu bars and UI controls
• Pagination, filters, alerts, etc.

---

🧪 Example – Simple Input Component

✅ components/input-text.html

<div class="input-group">
  <label>{{label}}</label>
  <input name="{{field}}" type="text">
</div>

You can dynamically load and bind this to different fields:

✅ Usage

<div appml-include="components/input-text.html" appml-data="data/label-name.json"></div>
<div appml-include="components/input-text.html" appml-data="data/label-email.json"></div>

✅ label-name.json

{ "label": "Name", "field": "name" }

🧠 AppML replaces {{label}} and {{field}} with actual values.

---

🧪 Example – Reusable Data Table Component

✅ components/user-table.html

<table>
  <tr>
    <th>Name</th><th>Email</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{name}}</td><td>{{email}}</td>
  </tr>
</table>

✅ Main Page

<div appml-data="api/users.php" appml-include="components/user-table.html"></div>

✔️ This loads user data and injects it into the reusable table component.

---

🔁 Use Components with Forms + Models

✅ components/product-form.html

<form>
  <input name="name">
  <input name="price" type="number">
  <button appml-submit>Save</button>
</form>

You can link this component with a model and data source anywhere:

<div 
  appml-model="models/product-model.json" 
  appml-data="api/save-product.php" 
  appml-controller="controllers/product.js" 
  appml-include="components/product-form.html">
</div>

---

🧠 Tips for Designing Reusable AppML Components

💡 Tip	✅ Why It Helps
Use placeholders ({{field}})	Enables dynamic content injection
Avoid hardcoded field names	Keeps components flexible
Externalize logic in controllers	Keeps HTML component files clean
Use appml-include in parent layout	Makes templating scalable
Group components in /components/ dir	Organizes codebase clearly

---

📌 Summary – Recap & Key Takeaways

Creating reusable components in AppML lets you modularize your web UI, reduce duplication, and maintain consistency across views. Using appml-include, data bindings, and dynamic placeholders, you can develop scalable, low-code web apps with better structure.

🔍 Key Takeaways:

• Use appml-include to insert HTML templates dynamically
• Combine with appml-data to inject values using {{}}
• Design forms, tables, headers, and alerts as reusable components
• Use models and controllers to handle logic separately
• Organize component files into dedicated folders for reuse

⚙️ Reusable components make your AppML apps cleaner, DRY (Don’t Repeat Yourself), and easier to update.

---

❓ FAQs – Reusable Components in AppML

---

❓ Can I use multiple includes in the same page?
✅ Yes, each appml-include is independent and can load different HTML snippets.

---

❓ Can components include other components?
✅ Yes, nested includes are supported—but keep nesting shallow to avoid complexity.

---

❓ How do I pass dynamic data into a component?
✅ Use appml-data="..." with a JSON object, and bind placeholders using {{}} in the included file.

---

❓ Can I reuse forms with different models?
✅ Yes, just change the appml-model and appml-data in the parent block while using the same form layout.

---

❓ Is appml-include processed before or after data loads?
✅ It’s processed before data rendering, so bindings are available immediately after include.

---

Share Now :