Table of Contents

AppML – Models

”;

AppML Model describes an application. It is a JSON based format and we can define following functionalities.

Syntax


<table appml-data="local?model=model_students"></div>

Here model_students.js is the AppML data model file.

model_students.js


{
"rowsperpage" : 10,
"database" : {
   "connection" : "localsql",
   "sql" : "SELECT studentName, class, section FROM Students",
   "orderby" : "StudentName"
},
"filteritems" : [
   {"item" : "studentName", "label" : "Student"},
   {"item" : "class"},
   {"item" : "section"}
],
"sortitems" : [
   {"item" : "studentName", "label" : "Student"},
   {"item" : "class"},
   {"item" : "section"}
]
}

Following are the common uses of AppML models.

Define database connections to MySQL, Sql Server, MS Access and Oracle.

Define connection to access files like JSON, XML, csv based text file.

Define SQL statements for CRUD (Create, Read, Update, Delete) operations.

Apply Filter/Sorting restrictions on table.

Define data types, data formats and restrictions on them.

Apply security on application users. Define user groups.

Example Application

Following example shows the usage of AppML model to fetch data from a csv based text file.

Step 1: Create Data

The first step is to create a csv based data file which will provide records to be displayed in application UI. Create a students-records.txt

students_records.txt


Ramesh,12,White,
Suresh,12,Red,
Mohan,12,Red,
Robert,12,Red,
Julie,12,White,
Ali,12,White,
Harjeet,12,White,

Step 2: Create Model

Create student_model.js file which will act as model to describe record.


{
   "rowsperpage" : 7,
   "data" : {
      "type" : "csvfile",
      "filename" : "students_records.txt",
      "items" : [
         {"name" : "studentName", "index" : 1},
         {"name" : "class", "index" : 2},
         {"name" : "section", "index" : 3}
      ]
   }
}

student_application.html


<!DOCTYPE html>
<html lang="en-US">
   <title>Students</title>
   <style>	  
      table {
         border-collapse: collapse;
         width: 100%;
      }

      th, td {
         text-align: left;
         padding: 8px;
      }

      tr:nth-child(even) {background-color: #f2f2f2;}
   </style>
   <script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>
   <table appml-data="appml.php?model=students_model">
      <tr>
         <th>Student</th>
         <th>Class</th>
         <th>Section</th>
      </tr>
      <tr appml-repeat="records">
         <td>{{studentName}}</td>
         <td>{{class}}</td>
         <td>{{section}}</td>
      </tr>
   </table>
</body>
</html>

Output

Deploy the application on Web Server and access the html page. Verify the output.

first example

Print Page