We connect to the Customer table. This is where the addresses are stored. First create a folder for all address book related to keep tings nice and tidy. I call the folder address. This means that all these pages get the url /address/sompage/?querystring. Then I create the page to show addressees, search and create documents. I call this page viewaddressees due to my CRUD model view for read only pages and edit for editable pages. I split the page in a top part for heading, buttons and search and a dataview for the list.

<h1 class="page-header text-center">Address book</h1>
<div class="row">
<div class="form-group">
	[! field search !]
</div>
</div><br>

The first version of the heading with a search field.

Then we creates a dataview for listing the addressess. 

<tr>
	<td>[{ viewdata.CustomerName }]</td>
	<td>[{ viewdata.Email }]</td>
	<td>[{ viewdata.Phone }]</td>
	<td>[{ viewdata.Address }]</td>
	<td>[{ viewdata.PostCode }]</td>
	<td>[{ viewdata.Town }]</td>
</tr>
<br>

First version of dataview. Just a standard list.

Adding query results

When you have a large list of results, DG3 only returns the first 100 by default. To make this visible for the user, it can be a good idea to add where you are in the list and how many records there are that matches the current query. To do this, just add a url query or a fixed filter with the parameter q.rowcalc=1. This will calculate a few extra values and return it in the form of a set of livetext with the name TableNameRowCalc.value. So here is the code for adding the query results to the list.

<div>Returned:  [{ CustomersRowCalc.start }] - [{ CustomersRowCalc.end }] of [{ CustomersRowCalc.rows }]</div>

Adding search on enter for the search field

We added a field to the page, but it is not doing anything yet. As a first example, we will add a search using url query string to set the parameters. To do this, we will need to use some javascript at this is the only way to pick up pressing enter inside a input field. At the moment there is no easy or automatic way in DG3. So what you need to do is to add a javascript to the field manually and calculate the new ulr to reload the page with. All fields in DG3 are given a name. This name is the same as you see in [! field fieldname !] and at the top of the field definition. The code generator uses this name to set id on the code. You can use this id to connect an keypress event on the field.

$('#search').keypress(function (e) {
  if (e.which == 13) {
    var searchval = document.getElementsByName('search')[0].value;
    var newurl=window.location.protocol + "//" + window.location.host + window.location.pathname + "?CustomerName=" + searchval + "*";
    //alert(newurl);
    window.location= newurl;
  }
});

The code added in the page including a simple means for debugging using alert. It is disabled in the code now, but you can see the urls build by removing the //.