🚚 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

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

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.