AppML - First Application

Let's start with a simple application.

Step 1: Create Data

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



Step 2: Create Application HTML


<!DOCTYPE html>
<html lang="en-US">
      table {
         border-collapse: collapse;
         width: 100%;

      th, td {
         text-align: left;
         padding: 8px;

      tr:nth-child(even) {background-color: #f2f2f2;}
   <script src=""></script>
   <table appml-data="students_records.js" appml-controller="myController">
      <tr appml-repeat="students">
      function myController($appml) {
         if ($appml.message == "display") {
            if ($ == "studentName") {
               $appml.display.value = $appml.display.value.toUpperCase();


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

first application