AppML Forms
This chapter demonstrates how to construct an input form against a database.
The examples on this page use a local SQL database.
Local SQL databases does not work in IE or Firefox. Use Chrome or Safari.
Create a Form Model
model_customersform.js
"database" : {
"connection" : "localmysql",
"maintable" : "Customers",
"keyfield" : "CustomerID",
"sql" : "SELECT * FROM Customers"},
"updateItems" : [
{"item" : "CustomerName"},
{"item" : "Address"},
{"item" : "PostalCode"},
{"item" : "City"},
{"item" : "Country"}]
}
Create an HTML Form
In the previous chapter, you created an application for listing records from a database.
Now add a form application to the page:
HTML Form
<p>
<label for="customername">Customer:</label>
<input id="customername" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="address">Address:</label>
<input id="address" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="city">City:</label>
<input id="city" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="postalcode">Postal Code:</label>
<input id="postalcode" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country" class="subhodaya-input subhodaya-border">
</p>
</div>
HTML Form Explained
appml-data="local?model=model_customersform" defines the AppML application for the form.
Create HTML Form Commands
Use your favorite style sheet (we use bootstrap), and create your wanted form commands:
inc_formcommands.htm
<div class="subhodaya-btn-bar subhodaya-border subhodaya-white subhodaya-show-inline-block">
<button onclick="appml('Form01').newRecord();" class="subhodaya-btn">New</button>
<button onclick="appml('Form01').saveRecord();" class="subhodaya-btn subhodaya-green">Save</button>
<button onclick="appml('Form01').deleteRecord();" class="subhodaya-btn">Delete</button>
</div>
<div id="appmlmessage" class="subhodaya-container subhodaya-pale-yellow subhodaya-padding" style="display:none;">
<span onclick="this.parentNode.style.display='none';" class="subhodaya-closebtn subhodaya-medium">×</span>
<div id="message"></div>
</div>
Include the Form Commands
Include the form commands in in your form:
HTML Form
<div appml-include-html="inc_formcommands.htm"></div>
<p>
<label for="customername">Customer:</label>
<input id="customername" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="address">Address:</label>
<input id="address" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="city">City:</label>
<input id="city" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="postalcode">Postal Code:</label>
<input id="postalcode" class="subhodaya-input subhodaya-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country" class="subhodaya-input subhodaya-border">
</p>
</div>
Add a Clickable Column to the Table
In the previous chapter, you created an application for listing records from a database.
Now add a new column to the table:
HTML Source
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="subhodaya-table-all">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer;width:34px;" onclick="appml('Form01').run({{CustomerID}})">✎</td>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
The onclick event (in the new column) triggers a call to run an AppML application located in the HTML element with id="Form01":
- appml('Form01') returns the AppML application
- run({{CustomerID}}) runs the applications with CustomerID as parameter.
Finally, Hide the Form
Add a style to the form to make it invisible:
HTML
appml-controller="myFormController"
class="jumbotron" style="display:none">
Add a controller to the form, to display the form only when it is loaded and ready to display data:
Controller
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>