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

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

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.