🚚 Case – Suppliers and Shippers Use Case in AppML: Manage Logistics Data Without JavaScript

🧲 Introduction – Why Build a Suppliers & Shippers App in AppML?

Suppliers and shippers are crucial entities in any inventory or logistics system. Managing this data efficiently—whether it’s supplier contact info or shipping details—is a common need. AppML lets you create fully functional supplier and shipper management apps with zero JavaScript coding, using only HTML + AppML directives.

🎯 In this use case, you’ll learn:

• How to structure data and models for suppliers and shippers
• How to create two independent modules using AppML
• How to load, display, and validate supplier/shipper data
• How to use models and optional controller logic

---

📁 Recommended Project Structure

📂 File	📄 Description
suppliers.html	UI for supplier management
shippers.html	UI for shipper management
data/suppliers.json	Supplier data records
data/shippers.json	Shipper data records
models/supplier-model.json	Model for supplier input/validation
models/shipper-model.json	Model for shipper input/validation

---

👤 Sample Data – data/suppliers.json

[
  { "id": 1, "company": "Global Parts Co", "contact": "Mike Jones", "location": "Boston" },
  { "id": 2, "company": "SpeedTech Inc", "contact": "Linda Wells", "location": "Chicago" }
]

📦 Sample Data – data/shippers.json

[
  { "id": 1, "company": "Express Delivery", "phone": "555-1234" },
  { "id": 2, "company": "Fast Freight", "phone": "555-9876" }
]

---

🧩 Supplier Model – models/supplier-model.json

{
  "key": "id",
  "orderby": "company",
  "fields": [
    { "name": "company", "required": true },
    { "name": "contact" },
    { "name": "location" }
  ]
}

🚛 Shipper Model – models/shipper-model.json

{
  "key": "id",
  "orderby": "company",
  "fields": [
    { "name": "company", "required": true },
    { "name": "phone" }
  ]
}

---

🖥️ UI – suppliers.html

<div 
  appml-model="models/supplier-model.json" 
  appml-data="data/suppliers.json" 
  appml-message>
  
  <h2>Suppliers</h2>
  <p>{{company}} – {{contact}} – {{location}}</p>

  <h3>Add / Edit Supplier</h3>
  <input name="company" placeholder="Company Name">
  <input name="contact" placeholder="Contact Person">
  <input name="location" placeholder="Location">
  <button appml-submit>Save</button>
</div>

---

🖥️ UI – shippers.html

<div 
  appml-model="models/shipper-model.json" 
  appml-data="data/shippers.json" 
  appml-message>
  
  <h2>Shippers</h2>
  <p>{{company}} – 📞 {{phone}}</p>

  <h3>Add / Edit Shipper</h3>
  <input name="company" placeholder="Shipper Company">
  <input name="phone" placeholder="Phone Number">
  <button appml-submit>Save</button>
</div>

---

🧠 Optional Controller Logic (for validation)

✅ supplier-controller.js

myAppML.onvalidate = function() {
  if (myAppML.data.company === "") {
    myAppML.message = "Company name is required.";
    return false;
  }
  return true;
};

Use similar validation in a shipper-controller.js if needed.

---

🧰 Real-World Use Cases

Use Case	Why AppML Works Well
Supplier database for warehouses	Quick setup with no backend needed
Shipper contact directory	Display + update data in one HTML file
Offline inventory systems	JSON files can be hosted statically
Admin dashboards	Low-code and easy to maintain

---

📌 Summary – Recap & Key Takeaways

With AppML, you can quickly build modular supplier and shipper apps using plain HTML and structured data files. You don’t need React, Angular, or even JavaScript to create a maintainable CRUD application.

🔍 Key Takeaways:

• Use separate models and JSON data for modular structure
• Add validation and sorting via AppML model files
• Use appml-submit for saving data through a form
• Ideal for low-code dashboards and static deployments

⚙️ This approach scales well for inventory systems, logistics apps, and ERP extensions.

---

❓ FAQs – Suppliers & Shippers Use Case in AppML

---

❓ Can I connect supplier/shipper data to a database?
✅ Yes. Replace appml-data with a server endpoint that queries your DB and returns JSON.

---

❓ Do I need separate HTML pages for suppliers and shippers?
✅ Not necessarily. You can use tabs or sections in the same file, but separating improves modularity.

---

❓ Can I search/filter suppliers or shippers dynamically?
✅ Yes. Add an input and filter with myAppML.filter = 'company.includes(...)'.

---

❓ Can I merge suppliers and shippers into one model?
⚠️ Technically yes, but it’s better to use separate models for different entities.

---

❓ Are JSON files writable by default?
❌ No. For full CRUD, use PHP or Node.js scripts to handle POST/PUT/DELETE.

---

Share Now :