Case – Customers Application in AppML: Build a Full CRUD App Without JavaScript

Introduction – Why Build a Customer App with AppML?

Customer management is a classic use case for web applications—used by businesses, schools, and service providers alike. With AppML, you can create a complete CRUD (Create, Read, Update, Delete) customers application using only HTML, models, and optional controllers—no JavaScript frameworks required.

In this case study, you’ll learn:

• How to create a customer listing and form in AppML
• How to structure the JSON data and model
• How to add filters, form submission, and validation
• How to connect with server-side scripts for saving and editing

File Structure Overview

Example – data/customers.json

[
  { "id": 1, "name": "Alice Smith", "email": "alice@example.com", "city": "New York" },
  { "id": 2, "name": "Bob Johnson", "email": "bob@example.com", "city": "Chicago" }
]

✔️ Flat structure with key-value pairs for each customer.

Example – models/customer-model.json

{
  "key": "id",
  "orderby": "name",
  "rows": 10,
  "fields": [
    { "name": "name", "required": true },
    { "name": "email", "required": true },
    { "name": "city" }
  ]
}

✔️ Adds validation (required fields), sorting, and pagination.

Main HTML – customers.html

<div 
  appml-model="models/customer-model.json" 
  appml-data="data/customers.json" 
  appml-controller="controllers/customer.js" 
  appml-message>
  
  <h2>Customer List</h2>
  
  <p>{{name}} – {{email}} – {{city}}</p>
  
  <h3>Add / Edit Customer</h3>
  <input name="name" placeholder="Full Name">
  <input name="email" placeholder="Email">
  <input name="city" placeholder="City">
  <button appml-submit>Save</button>
</div>

Adding a Controller – customer.js

myAppML.onvalidate = function() {
  if (!myAppML.data.email.includes("@")) {
    myAppML.message = "Invalid email address.";
    return false;
  }
  return true;
};

myAppML.onshow = function() {
  myAppML.filter = "city != ''";
};

✔️ Adds a custom validation and filters out blank-city entries.

Connecting to a Backend (Optional)

If you’re using PHP, ASP, or Node.js to persist data, update the appml-data to point to your API:

<div appml-data="api/save-customer.php" ...>

And handle POST/PUT on the backend:

// save-customer.php
$data = json_decode(file_get_contents("php://input"), true);
// Save to database...
echo json_encode(["success" => true]);

UI Features Included

Customer listing
Live editing
Inline form validation
Record pagination
Sorting and filtering
Optional controller for business logic
Optional server API for persistence

Summary – Recap & Key Takeaways

The AppML Customers application shows how to build a full CRUD interface using only HTML + data + models. It’s lightweight, easy to extend, and suitable for small business apps, admin dashboards, and student projects.

Key Takeaways:

• Define structure with appml-model
• Load and display customer data with appml-data
• Use forms + appml-submit for create/update
• Add controllers for validations and filters
• Optional: connect to backend to store data

You now have a fully working customer management system—powered entirely by AppML.

FAQs – Customers App in AppML

Can I add search or filter by city?
Yes. Use an <input> with oninput="myAppML.filter='city=='+this.value" for live filtering.

Can this app save data back to JSON files?
No. You need a server-side API to handle file or database writing.

Is it mobile-friendly?
Yes. AppML is HTML-based and works responsively with proper CSS.

Can I integrate this with a database like MySQL?
Absolutely. Use a PHP script to query your DB and return JSON to AppML.

Can I reuse this form in other pages?
Yes. Wrap the form in a reusable component and use appml-include.