AppML – Models
”; Previous Next
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.
Print Page
Previous
Next
Advertisements ”;