The list address page can be found in the WebServer table as ID=ELM000007. 

Type DQL This tells the server that the code comes in form of a DQL part and a Body part. The dql starts with .dql and ends with a .end since this dql comes from a WebServer table, we do not use the .security or .template from  the file based dql format but reads this information from the table columns instead.
ID ELM00007 This is the id used by the server to identify the DQL. This is an unique id that must be a TEXT
Name Addressees This is the name that will be show in the tab or the browser title because of the <title>[{page.Name}]</title> we added to the template
Url /demo/listaddr/ This is the url this page can be reached by in the browser. The server will map back to this page if you requests /demo/listaddr/ in the browser
Security Since this is set to blank, no security needed to show this page. If we had added a value form Low3-High in this field, then we would get a login dialog before showing this page
Template demotempl The template used when rendering this page. This page will be inserted in the [%body%] of the template.

The code

.dql
for Address ;
list records
    ID;
    Name ;
    Address1 ;
    Address2 ;
    PostAddress  ;
    PostCode ;
    EMail .
end
.end
<div class="row">
<br>
<div class="col-sm-10">
    <a class="btn btn-sm btn-info" href="/demo/createaddr/">New</a>
</div>
</div>
<br>
<div class="row">
<table class="table">
.items
    <tr>
        <td>[{Name}]</td>
        <td>[{Address1}]</td>
        <td>[{Address2}]</td>
        <td>[{PostAddress}]</td>
        <td>[{PostCode}]</td>
        <td>[{EMail}]</td>
        <td><a class="btn btn-primary btn-xs" href="/demo/createaddr/?ID=[{ID}]">Edit</a> </td>
    </tr>
.end
</table>
</div>
<div class="row">
<h4>How this page works</h4>
<p>This page is simply an ExecDQL that lists data from the Address table together with a body. The body uses the DQL report format where .items will output a html table of the adressees. Each address have a edit button that links to another page by an url. The url is created with a standard link and a LiveText output from the DQL the lists the unique ID of the address to edit. At the top there is a new button links to an emptry version of the same page as the ones form the edit buttons. If you want to look at the actual code click to <a href="/cmd/openapp/">"Open in DataEase" link</a> and find ELM00007 in WebServer.</p>
</div>
	

The code consist of a DQL part and a template part. 

The DQL part simply selects all addressees from the Address table and lists them using a list record.

The html part of the DQL consists of a menu for creating new addressees and a list of addressees in a Bootstrap table.

The new addressee button simply link to a new url without query (/demo/createaddr/).

In the list of the addresses there is an edit button that is a link to a new page with the url /demo/createaddr/?ID= + the query to find the correct address based on the ID column in the Address table.

That's all there is to it.