🧑‍💼 Case – Employees Database Example in AppML: Build a Smart Employee Directory

🧲 Introduction – Why Use AppML for Employee Management?

Managing employee information—such as names, departments, designations, and contact details—is a fundamental part of HR systems, school admin panels, and internal dashboards. With AppML, you can build a searchable, editable employee directory with zero JavaScript coding, using only HTML + JSON + AppML models.

🎯 In this case study, you’ll learn:

• How to create an employee listing UI using AppML
• How to build forms for adding/editing employee records
• How to use filters, models, and validation
• How to prepare and display employee data from a JSON file

---

📁 File Structure Overview

📂 File	📄 Description
employees.html	Main HTML interface
data/employees.json	JSON data of all employee records
models/employee-model.json	AppML model with fields and validation
controllers/employee.js	(Optional) for filtering or form logic

---

👤 Sample Data – data/employees.json

[
  { "id": 1, "name": "Alice Green", "position": "Manager", "department": "Sales", "email": "alice@company.com" },
  { "id": 2, "name": "John Doe", "position": "Developer", "department": "IT", "email": "john@company.com" },
  { "id": 3, "name": "Emma Brown", "position": "HR Executive", "department": "HR", "email": "emma@company.com" }
]

---

🧩 Model File – models/employee-model.json

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

---

🖥️ HTML Interface – employees.html

<div 
  appml-model="models/employee-model.json" 
  appml-data="data/employees.json" 
  appml-message>
  
  <h2>Employee Directory</h2>
  <p>{{name}} – {{position}} – {{department}} – {{email}}</p>

  <h3>Add / Edit Employee</h3>
  <input name="name" placeholder="Full Name">
  <input name="position" placeholder="Position">
  <input name="department" placeholder="Department">
  <input name="email" placeholder="Email Address">
  <button appml-submit>Save</button>
</div>

---

🧠 Optional Controller – controllers/employee.js

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

myAppML.onshow = function() {
  myAppML.sort = "name";
};

---

🔍 Filtering Employees by Department

Add a quick search input above your listing:

<input oninput="myAppML.filter='department=='+this.value" placeholder="Search by Department">

This lets users dynamically view employees from a specific department.

---

🧰 Use Cases for the Employee Directory

Scenario	Why AppML Works Well
HR portals or intranet dashboards	Lightweight, editable, and searchable
School/staff management systems	Fast access without full-stack setup
Small business team database	Easy to deploy on static hosting
Employee demo data apps	Great for interviews or training

---

📌 Summary – Recap & Key Takeaways

This AppML employee directory case lets you build a full CRUD-style HR listing using just HTML, models, and a JSON data file. No external libraries or backend required for display and form control.

🔍 Key Takeaways:

• Use appml-data to load employee records from JSON
• Create structured and validated forms using appml-model
• Add filters for department, position, or email
• Use appml-submit for create/update functionality
• Add validation with optional JS controller

⚙️ This setup is ideal for internal dashboards, admin panels, or low-code HR solutions.

---

❓ FAQs – AppML Employees Case

---

❓ Can I include photos or avatars in each employee record?
✅ Yes. Add a photo field in JSON and use <img src="{{photo}}"> in the layout.

---

❓ Can I sort employees by department or email?
✅ Yes. Modify the "orderby" in the model or use myAppML.sort in the controller.

---

❓ Can this setup support employee login?
⚠️ No. AppML handles frontend logic only. Use backend authentication separately.

---

❓ Can I use this for 1000+ records?
✅ You can, but pagination is crucial. AppML supports rows and pages in the model.

---

❓ Is this exportable or printable?
✅ Yes. Use browser print or export the data from JSON manually.

---

Share Now :