🗃️ Case – Categories and Inventory in AppML: Organize & Manage Products Effectively

🧲 Introduction – Why Use AppML for Category & Inventory Management?

In any retail or e-commerce platform, organizing products into categories and tracking inventory is essential. With AppML, you can build a structured system to manage product listings, category assignments, stock levels, and even dynamic filtering—all without complex JavaScript or frameworks.

🎯 In this use case, you’ll learn:

• How to create a categorized product list
• How to manage inventory data with forms and validations
• How to link category selections dynamically
• How to sort and filter inventory records using AppML logic

---

🧾 Project Structure Overview

📁 File	📄 Description
inventory.html	Main inventory page
data/categories.json	Category list
data/products.json	Inventory/product data
models/product-model.json	Model for product data
models/category-model.json	Model for categories (optional)

---

📁 Example – data/categories.json

[
  { "id": 1, "name": "Electronics" },
  { "id": 2, "name": "Furniture" },
  { "id": 3, "name": "Books" }
]

📦 Example – data/products.json

[
  { "id": 1, "name": "Laptop", "category": "Electronics", "stock": 12 },
  { "id": 2, "name": "Chair", "category": "Furniture", "stock": 5 },
  { "id": 3, "name": "Notebook", "category": "Books", "stock": 30 }
]

---

📐 Product Model – models/product-model.json

{
  "key": "id",
  "orderby": "name",
  "rows": 10,
  "fields": [
    { "name": "name", "required": true },
    { "name": "category", "required": true },
    { "name": "stock", "datatype": "number" }
  ]
}

---

🖥️ Inventory UI – inventory.html

<div 
  appml-model="models/product-model.json" 
  appml-data="data/products.json" 
  appml-message>
  
  <h2>Inventory</h2>
  <p>{{name}} – {{category}} – Stock: {{stock}}</p>

  <h3>Add / Edit Product</h3>
  <input name="name" placeholder="Product Name">
  
  <select name="category" appml-datatype="list" appml-data="data/categories.json">
    <option>{{name}}</option>
  </select>
  
  <input name="stock" type="number" placeholder="Stock Quantity">
  <button appml-submit>Save</button>
</div>

✔️ The <select> is dynamically filled with category names from categories.json.

---

🔍 Dynamic Filtering Example

You can filter inventory by category using an input field:

<input oninput="myAppML.filter='category=='+this.value" placeholder="Filter by category">

---

✅ Use Cases & Benefits

Use Case	Why AppML Works Well
Storefront inventory management	Display stock and categories easily
Admin dashboards	Low-code, readable, and extensible
Inventory tracking system	Great for small business & projects
Classroom inventory demo	Teach students structured data handling
Offline inventory catalog	No server or DB required

---

🧠 Tips for Managing Categories & Inventory in AppML

💡 Tip	✅ Benefit
Use appml-datatype="list" in dropdowns	Enables dynamic select fields
Keep category names consistent	Ensures accurate filtering and display
Combine models + controllers	For better validations and logic separation
Use appml-message	For user feedback without JS popups
Group related files into /data/ & /models/	Keeps structure clean and reusable

---

📌 Summary – Recap & Key Takeaways

This case shows how to build an inventory and category manager with AppML’s low-code features. It supports full CRUD operations, validations, and reusable components with zero JS.

🔍 Key Takeaways:

• Use appml-data and appml-model to structure products and categories
• Dynamically bind dropdowns using JSON category lists
• Validate product fields using AppML’s built-in model validation
• Filter inventory data with simple input bindings
• Reuse this layout in retail, education, and admin dashboards

⚙️ With AppML, organizing and managing data is efficient, scalable, and beginner-friendly.

---

❓ FAQs – Categories & Inventory in AppML

---

❓ Can I use category id instead of name?
✅ Yes, but you must map the displayed value manually in the template or backend.

---

❓ Can I auto-sort inventory by stock levels?
✅ Yes. Add "orderby": "stock" in your model or set myAppML.sort = 'stock' in the controller.

---

❓ Is stock editable with AppML?
✅ Yes, use an <input name="stock" type="number"> field with appml-submit.

---

❓ Can I categorize products dynamically via API?
✅ Yes. You can load categories from an API endpoint with appml-data="api/categories.php".

---

❓ Can I reuse the category dropdown in multiple forms?
✅ Absolutely. Wrap it in a component and use appml-include.

---

Share Now :