Orders start

In the order system part of the demo, we can create, show, list, create and edit orders. All is done from the /demo/orderstart/ page. All urls for the demo order system starts on /demo/order and this is what is used in the template to select the correct tab as well.

The orders start page show a little menu and a list of addressees than can be selected using radio buttons. We could created this page the same way as the list address page by a simple DQL and items. Instead we will show a different way of selecting and displaying a list of data by using page data. The display of data is almost the same format as for the DQL, but how the system fetched the list of data is different.

Setting up what data to select

To do this we define a page and a .data section. The .data section is defined in the start of the document the same way as a .dql and the body section starts on the first . command after the data section as for the .dql. The body format can use the same .commands as for the.dql but you select the data to list by name instead of relying on the default.

.data
[{
    "tablename" : "Address"
    "type" : "list",
    "includefields" : [
        "ID",
        "Name",
        "Address1",
        "Address2",
        "PostAddress",
        "PostCode",
        "EMail"
    ],
    "defaults" : [["ID","*"]]
}]
.end

The data selection that will select all matching records based on the query url. This data definition will return a list of records containing only the fields in listed in includefield under the name "Address" in the returning JSON. If you want to see this JSON code or use a data page using ajax, you can simply add json=1 to the query url and the json will be returned instead of the rendered page. The returned json will then return a { 'result' : 'ok', 'data' : thedatastructureasreturnedbytheserver }

<script>
function createneworder()
{
    debugger;
    var radioValue = $("input[name='customerid']:checked"). val();
    if (radioValue) {
        var url =  window.location.protocol + "//" + window.location.host + "/demo/ordercreate/?CustomerID=" + radioValue;
        window.location.href = url;
    } else
      alert("You must select a customer to create an order!");
};
function listorders()
{
    debugger;
    var radioValue = $("input[name='customerid']:checked"). val();
    if (radioValue) {
        var url =  window.location.protocol + "//" + window.location.host + "/demo/orderlist/?CustomerID=" + radioValue;
        window.location.href = url;
    } else {
        var url =  window.location.protocol + "//" + window.location.host + "/demo/orderlist";
        window.location.href = url;
    }
};
</script>
<div class="row">
<br>
<div class="col-sm-10">
    <a class="btn btn-sm btn-info" onclick="createneworder();">New</a>
    <a class="btn btn-sm btn-info" onclick="listorders();">List</a>
</div>
</div>
<br>
<div class="row">
<table class="table">
.items in Address
    <tr>
        <td><input  type="radio" name="customerid" value="[{ID}]"></td>
        <td>[{Name}]</td>
        <td>[{Address1}]</td>
        <td>[{Address2}]</td>
        <td>[{PostAddress}]</td>
        <td>[{PostCode}]</td>
        <td>[{EMail}]</td>
    </tr>
.end
</table>
</div>
<div class="row">
<h4>How this page works</h4>
<p>This page is simply an data page that lists data from the Address table together with a body. The body uses the report format where .items in tablename will output a html table of the adressees. Each address can be selected to create a new order for the selected customer. The selection is done using a radio button. All radio buttons have the same name and the value of the customer id for each customer. This id is then read when you click one of the buttons and added to an url that either list orders or creates a new one.</p>
<p>If you want to look at the actual code click to <a href="/cmd/openapp/">"Open in DataEase" link</a> and find ELM00011 in WebServer.</p>
</div>

The body. The only difference from the address list in the first tab is the use of .items in tablename. This command tells the template to list records found in a element named Address. This element holds the list of Address records returned by the data selection in the .data part of the page.