📊 AppML – Working with Data: Load, Display, and Manage Dynamic Content Easily

🧲 Introduction – Why Data Handling Is Central to AppML

In modern web applications, working with structured data is non-negotiable. AppML (Application Modeling Language) excels at allowing developers to load, display, and manage data from various sources—without writing JavaScript.

Whether you’re displaying a product catalog, user list, or form submission, AppML makes data integration seamless using its HTML-first, model-driven approach.

🎯 In this article, you’ll learn:

• How AppML fetches and displays data
• Supported data formats and sources (JSON, XML, PHP, MySQL)
• Data binding using {{placeholders}}
• Filtering and CRUD operations with real-world examples

🗂️ What Types of Data Can AppML Use?

AppML supports a variety of data sources:

📥 Loading Data in AppML Using appml-data

To connect data to your HTML, you use the appml-data attribute:

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

✅ AppML fetches the products.json file and renders the values dynamically by replacing {{name}} and {{price}}.

🧪 Example: Load and Display a User List

Step 1: Create the JSON Data

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

Save it as data/users.json.

Step 2: HTML to Render the Data

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

📋 Output:

Alice
alice@example.com

Bob
bob@example.com

🔄 Dynamic Server-Side Data (PHP Example)

For real-time or large datasets, use PHP or ASP to fetch data from a database.

<?php
$mysqli = new mysqli("localhost", "user", "pass", "dbname");
$result = $mysqli->query("SELECT name, email FROM users");
$data = [];
while($row = $result->fetch_assoc()) {
  $data[] = $row;
}
echo json_encode($data);
?>

Then use:

<div appml-data="get-users.php">
  <h4>{{name}}</h4>
  <p>{{email}}</p>
</div>

✅ Your AppML view now displays live data from a MySQL database.

🎛️ Filtering Data with a Controller

Use a controller to filter data dynamically before it’s shown:

myAppML.onshow = function() {
  myAppML.filter = "name LIKE 'A*'";
};

💡 This displays only records with names starting with “A”.

✏️ Updating and Managing Data (CRUD)

AppML can be used with a controller + PHP to handle:

CRUD operations are performed through PHP endpoints that receive and return JSON data, often paired with forms and validation logic.

🛠️ Best Practices for Working with AppML Data

• ✅ Keep data files in a /data directory for clarity
• ✅ Use controllers only when logic is needed
• ✅ Use HTTPS when loading data from a remote source
• ✅ Validate data structure before binding
• ✅ Use backend scripts for sensitive or large datasets

📌 Summary – Recap & Key Takeaways

AppML makes working with data easy, efficient, and powerful, especially for HTML-first developers. You can build feature-rich apps that dynamically render data from files or servers with minimal setup.

🔍 Key Takeaways:

• AppML supports JSON, XML, and server-side data
• Use appml-data to connect models to views
• {{placeholders}} inject live data into HTML
• CRUD operations can be achieved with backend scripts
• Controllers allow filtering and advanced logic

⚙️ Whether you’re building a static product list or a live customer dashboard, AppML keeps your data workflow clean and low-code.

❓ FAQs – Working with AppML Data

❓ What format should my data be in for AppML to load it?
✅ AppML accepts JSON arrays of objects (preferred), XML, or PHP/ASP scripts that return JSON.

❓ Can I use external APIs with AppML?
✅ Yes, if the API supports CORS and returns properly structured JSON.

❓ Is it secure to load data from a PHP script?
✅ Yes, if the PHP script includes proper validation and does not expose sensitive information.

❓ How can I test if data is loading correctly?
✅ Use your browser’s Network tab to inspect the response or add a debug console.log() in your controller file.

❓ Can I modify data directly from AppML?
❌ No. AppML doesn’t perform updates itself. Use a backend script (e.g., PHP) to handle data modification and return updated results.