🔍 AppML – Data Filtering and Sorting: Display Only What Matters

🧲 Introduction – Why Filter and Sort Data in AppML?

Displaying large datasets is common in web apps, but users often need specific information quickly. That’s where filtering and sorting become essential. With AppML, you can implement these features with just HTML and lightweight controller logic, eliminating the need for JavaScript frameworks.

🎯 In this article, you’ll learn:

• How to filter AppML data using controllers or URLs
• How to sort data by fields (ascending/descending)
• Real-world examples for server-side and static filtering
• Best practices for performance and UX

---

🧪 Basic Example – Filter Products by Category

✅ JSON File: data/products.json

[
  { "name": "Laptop", "category": "Electronics" },
  { "name": "Sofa", "category": "Furniture" },
  { "name": "Phone", "category": "Electronics" }
]

✅ HTML View with Controller

<div appml-data="data/products.json" appml-controller="controller.js">
  <h3>{{name}}</h3>
  <p>Category: {{category}}</p>
</div>

✅ controller.js

myAppML.onshow = function() {
  myAppML.filter = "category='Electronics'";
};

✅ Only products in the “Electronics” category will be displayed.

---

🎛️ Using sqlfilter for Server-Side Filtering

When using PHP or ASP, apply filtering logic server-side using the sqlfilter parameter.

✅ Controller Logic

myAppML.onshow = function() {
  myAppML.sqlfilter = "price > 100";
};

✅ PHP Backend (get-products.php)

$filter = isset($_GET["filter"]) ? "WHERE " . $_GET["filter"] : "";
$sql = "SELECT name, price FROM products $filter";

AppML passes the sqlfilter as a query string (e.g., ?filter=price%20%3E%20100) to your backend.

---

🔁 Client-Side Filtering (Using AppML filter)

Use this when loading static JSON files:

myAppML.filter = "category LIKE 'Furn*'";

This uses a simple wildcard match and works great for small local datasets.

---

📊 Sorting AppML Data by Field

You can sort AppML data using:

✅ Controller-Based Sorting

myAppML.sort = "price";

To reverse the sort order:

myAppML.sort = "price DESC";

🔁 Combined Example

myAppML.onshow = function() {
  myAppML.filter = "category='Electronics'";
  myAppML.sort = "price DESC";
};

This filters the data first and then sorts it from high to low by price.

---

🔧 Server-Side Sorting (MySQL)

Apply sorting logic to your SQL query:

$sort = isset($_GET["sort"]) ? "ORDER BY " . $_GET["sort"] : "";
$sql = "SELECT * FROM products $filter $sort";

Pass it from AppML like this:

myAppML.sqlsort = "name ASC";

---

🧰 Real Use Case: Filter by Input Field

You can dynamically filter data using HTML input and controllers.

✅ HTML

<input id="searchBox" onkeyup="filterByText(this.value)" placeholder="Search name">
<div appml-data="data/employees.json" appml-controller="emp-controller.js">
  <p>{{name}}</p>
</div>

✅ Controller (emp-controller.js)

function filterByText(text) {
  myAppML.filter = "name LIKE '*" + text + "*'";
  myAppML.load();
}

📢 This adds live filtering functionality with no extra libraries!

---

📌 Summary – Recap & Key Takeaways

AppML makes data filtering and sorting accessible even to non-coders. With just a few attributes or a simple controller, you can enable powerful interactions in your web apps.

🔍 Key Takeaways:

• Use filter for static files and sqlfilter for server-side data
• Sort using sort (client) or sqlsort (server)
• Filtering can use wildcards like LIKE for partial matches
• Use input fields + load() to build dynamic filtering UIs
• Always validate server-side filters to prevent SQL injection

⚙️ Filtering and sorting are core to building dashboards, product listings, reports, and admin interfaces in AppML.

---

❓ FAQs – Filtering and Sorting in AppML

---

❓ Can I filter by multiple fields?
✅ Yes. Combine filters like category='Electronics' AND price > 100.

---

❓ Is sorting case-sensitive?
⚠️ Sorting behavior depends on the backend (MySQL, JSON parser). Normalize text before comparing if needed.

---

❓ What’s the difference between filter and sqlfilter?
✅ filter works for static files like JSON/XML. sqlfilter is passed to the backend PHP/ASP script for database queries.

---

❓ Can AppML sort on computed values?
❌ No. AppML can only sort fields directly available in the data model.

---

❓ How do I add dropdown filters in AppML?
✅ Use <select> and onchange to set myAppML.filter based on selected value, then call myAppML.load().

---

Share Now :