-
- What is DG3
- The different components
- Requirements for running DG3
- Installation of DG3
- Additional installation steps
- Select which web server to use
- Hello World application
- Intro to CMS
- Setting up DG3 as a CMS
- Editing pages
- More about pages and urls
- Structuring a page using the grid
- Adding menu to pages
- Add images to the application
- More formating
- Sending email from contact us
- Adding menu to template
- Deploy the web site
- Storing the pages in database
- Create record
- Auto fill field
- Field validation
- Enable save button validator
- Add new button to template
- View document
- List documents
- Fix selection in menus in template
- CRUD Create Read Update Delete
- Intro to blogs
- Add user authentication
- Bootstrap authentication
- Let user change their passords
- Add reset password
- Login dialog box
- Extending the CMS to a blog
- Extend table for blogging
- Edit blog entry
- View blog entry
- User registration
- User password validation
- User field validation
- User auto login
- User extra registration fields
Address register
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 //.