📋 AppML – Creating Lists and Tables: Display Data Dynamically with Zero JavaScript

🧲 Introduction – Why Use AppML for Lists and Tables?

Displaying structured data like product lists, employee records, or customer orders is at the heart of many web applications. With AppML, you can turn any HTML block into a dynamic list or table using only attributes like appml-data and {{field}} bindings—no JavaScript required.

🎯 In this guide, you’ll learn:

• How to create dynamic lists using AppML and JSON/XML data
• How to build tables with model integration and sorting
• How to paginate large datasets using built-in AppML features
• How to use filters and formatting for better UX

---

🧾 What You Need

• appml.js script from W3Schools CDN
• A JSON or XML data file (e.g., data/products.json)
• An optional AppML model (e.g., models/product-model.json)

---

📋 Example – Simple List View in AppML

✅ Sample Data: data/products.json

[
  { "id": 1, "name": "Laptop", "price": 1200 },
  { "id": 2, "name": "Smartphone", "price": 800 },
  { "id": 3, "name": "Tablet", "price": 500 }
]

✅ HTML List Block

<div appml-data="data/products.json">
  <p>{{name}} – ${{price}}</p>
</div>

✔️ AppML automatically loops through the array and replaces {{}} with actual values.

---

📊 Example – Dynamic Table View

<div 
  appml-model="models/product-model.json" 
  appml-data="data/products.json" 
  appml-message>
  
  <h2>Product Inventory</h2>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>{{name}}</td>
      <td>${{price}}</td>
    </tr>
  </table>
</div>

---

📐 Optional Model – models/product-model.json

{
  "key": "id",
  "orderby": "name",
  "rows": 5,
  "fields": [
    { "name": "name", "required": true },
    { "name": "price", "datatype": "number" }
  ]
}

✔️ Enables paging, sorting, and validation.

---

🔍 Filtering List or Table Content

Add a live filter input:

<input placeholder="Filter by name" 
       oninput="myAppML.filter='name.includes('+this.value+')'">

✔️ Dynamically filters your list/table as the user types.

---

🧠 Table Styling Tips

💡 Tip	✅ Benefit
Use <thead> and <tbody>	Improves accessibility and SEO
Style with CSS or utility frameworks	Make your tables mobile-friendly
Limit rows with rows in the model	Adds built-in pagination
Add sort headers (via controller)	Customize sorting logic

---

💡 Real-World Use Cases for Lists & Tables in AppML

Use Case	Why It Works Well in AppML
Product catalogs	Structured, filterable, paginated
Staff/employee directories	Display roles, contacts, and emails
Order or transaction logs	Easily bound to JSON/XML APIs
Reports or metrics display	Fast setup with no backend needed
Student mark sheets	Table + filter + sort—all with HTML only

---

📌 Summary – Recap & Key Takeaways

With AppML, creating dynamic lists and tables is as simple as writing HTML. You can display JSON or XML data, bind it to repeatable rows, and enhance it with filters, pagination, and models—all without JavaScript.

🔍 Key Takeaways:

• Use appml-data to bind JSON or XML data to lists and tables
• Wrap list or table rows with {{field}} placeholders
• Combine with models to add validation and pagination
• Add live filters to enhance interactivity
• AppML tables are great for dashboards, directories, and catalogs

⚙️ AppML simplifies dynamic UI creation—perfect for developers who want powerful features without the JavaScript overhead.

---

❓ FAQs – Creating Lists and Tables in AppML

---

❓ Can I display different columns conditionally?
✅ Yes, using AppML controllers with logic to show/hide fields based on values.

---

❓ Does AppML support tables with nested rows or subtables?
⚠️ Not natively. Use flat data or preprocess nested structures before rendering.

---

❓ Can I sort tables by clicking headers?
⚠️ Not out-of-the-box. You’ll need a custom controller to handle header clicks and update myAppML.sort.

---

❓ Can I style the table using Bootstrap or Tailwind CSS?
✅ Absolutely. AppML does not conflict with external CSS frameworks.

---

❓ What happens if a record is missing a value?
✅ The corresponding {{field}} will simply be empty—no errors.

---

Share Now :