📋 AppML – How to Create Lists: Display Dynamic Data Without JavaScript

🧲 Introduction – Why Use AppML to Create Lists?

When building dynamic websites or dashboards, displaying a list of items—like users, products, or tasks—is essential. With AppML, you can create lists directly in HTML and bind them to JSON, XML, or database data without writing any JavaScript.

🎯 In this guide, you’ll learn:

• How to create dynamic lists using appml-data
• How to connect to different data formats (JSON, XML, server)
• How to loop and render content using {{}} syntax
• How to filter, sort, and style lists dynamically

---

🔧 What Is a List in AppML?

In AppML, a list is any repeating HTML block (like <li> or <p>) inside a container that has an appml-data attribute. AppML uses this attribute to load data and repeat the content for each item.

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

AppML replaces {{name}} and {{email}} with data from each record.

---

🧪 Example 1 – Display List from JSON File

✅ users.json

[
  { "name": "Alice", "email": "alice@example.com" },
  { "name": "Bob", "email": "bob@example.com" }
]

✅ HTML List

<div appml-data="users.json">
  <p>{{name}} – {{email}}</p>
</div>

📌 AppML repeats the <p> element for each user, binding {{name}} and {{email}}.

---

🧪 Example 2 – List with <ul> and <li>

<div appml-data="data/tasks.json">
  <ul>
    <li>{{title}} – Status: {{status}}</li>
  </ul>
</div>

✅ Sample tasks.json

[
  { "title": "Design Landing Page", "status": "In Progress" },
  { "title": "Test User Flow", "status": "Completed" }
]

✔️ The list will auto-render with all task titles and statuses.

---

🧪 Example 3 – Bind List from PHP (MySQL)

✅ PHP Endpoint: employees.php

<?php
include("appml.php");
$appml = new AppML();
$appml->model = "models/employees-model.json";
$appml->run();
?>

✅ HTML List

<div 
  appml-data="employees.php" 
  appml-model="models/employees-model.json" 
  appml-message>
  
  <h2>Employee List</h2>
  <p>{{name}} – {{department}}</p>
</div>

✅ JSON Model: employees-model.json

{
  "key": "id",
  "table": "employees",
  "fields": [
    { "name": "name", "required": true },
    { "name": "department" }
  ]
}

---

🔍 How AppML Processes Lists

1. Loads the data source specified by appml-data.
2. Searches for a repeating block inside the container (like <p> or <li>).
3. For each record, clones the block and replaces {{field}} with actual values.
4. Renders the final HTML on the page.

---

🛠️ Filter and Sort Lists

AppML supports client-side filtering with custom JS:

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

For sorting, use orderby in your model:

"orderby": "name"

Or sort manually via controller functions.

---

🎨 Styling Dynamic Lists

Technique	Use Case
Tailwind or Bootstrap	Easily style list layout and spacing
AppML rows in <div>s	Great for card or grid designs
Conditional icons	Add status symbols using data binding
Use appml-message	Show errors or status messages

---

📌 Summary – Recap & Key Takeaways

Creating dynamic lists in AppML is as easy as writing standard HTML. You just plug in your data using appml-data and wrap the display in repeatable tags. No JavaScript, loops, or DOM handling required!

🔍 Key Takeaways:

• Use appml-data to connect to JSON, XML, or PHP endpoints
• Write {{field}} placeholders to bind data into HTML
• Works with <p>, <li>, <div>, and table rows
• Supports filtering, styling, and model-based validation
• Perfect for product lists, task lists, staff directories, and more

⚙️ AppML lists are lightweight, clean, and ideal for building responsive frontends with real-time content.

---

❓ FAQs – Creating Lists in AppML

---

❓ Can I nest lists in AppML (e.g., categories with sub-items)?
⚠️ AppML does not natively support nested loops. Flatten your data or use custom controller logic.

---

❓ Can I bind lists to XML data?
✅ Yes. AppML supports XML files, as long as the structure is consistent and array-like.

---

❓ Can I display images in lists with AppML?
✅ Yes. Use <img src="{{image_url}}"> inside your list item.

---

❓ How many records can AppML list before it lags?
✅ AppML handles 100–500 records well. Use pagination ("rows": 20 in model) for larger datasets.

---

❓ Can I make lists editable using AppML?
✅ Yes. Add <input appml-field="name"> to each item and enable model-based update support.

---

Share Now :