Edit address

The create/edit an address opens a simple form doing just default actions for editing or creating addressees in the Address table. There are two modes for the page:

1. Create a new address when no id given in query
2. Edit existing address if id of existing address given in query

To accomplice these mode we use a jquery document ready function (run when document is fully loaded), to check if we should request data. If we should edit an address, we fetch that from the server and load the data into the form.

Type	Page	This is a page without any loaded data. It consist of only HTML that will we added in the [%body%] block of the template.
ID	ELM00009	This is the id used by the server to identify the DQL. This is an unique id that must be a TEXT
Name	Edit address	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/createaddr/	This is the url this page can be reached by in the browser. When requested without a query this page will do a create address using a post and when done with a valid query, it will update the requested address using a put.
Security		Since this is set to blank, no security needed to show this page, but if the server setting for default security is not set to a level higher than the view, create and modify set on the Address table, you will not be able to see or edit data before you login with sufficient rights.
Template	demotempl	The template used when rendering this page. This page will be inserted in the [%body%] of the template.

Check for edit or create

$(document).ready(function() {
    // When the document is loaded, we check the query to see if we are new record or edit record
    debugger;
    var parms=deconnect.decodequery();
    if (typeof parms.ID !==  "undefined") // edit record
        deconnect.getrecord("/maindata/Address/?ID="+parms.ID);
    else
        $("#delete").hide();
});<br>

This is done by deconnect.decodequery() that will split the url into separate parameters in a object. From this we can check if we have an id to lookup or not. If we have an ID, we load the data from the server using a deconnect.getrecord and if not we hide the delete button that we have no use for when creating a new address.

Fetch data inner workings

When we want to load an address from the server, we first creates an url that use REST to load this data. The url is what can be used to fetch any single data record you have the proper rights to by your user. The form to access our Address table is /maindata/Address/?ID=addressid. /maindata/ is to url where you can get a single record in JSON format from the server. The rest of the url is simply the table name and the query needed for getting the rigt address. This ID we listed as LiveText in the DQL in the previous page and used that you create a unique url for each of our addresses. In this page, we rely completely on the default behavior of the deconnect library. That is automatically update the current form based on the input elements id for matching names form the table with the input fields in the browser if we get a record returned. If no record is returned an alert is displaying an error message. There are two other ways of displaying errors as well (the error element and custom function), but these we leave for a more advanced example later.

{
   "recno" : 0,
   "recorddata" : {
      "Address1" : "The Chapel",
      "Address2" : "24 Main Street",
      "EMail" : "sales@dataease.com",
      "ID" : "00002",
      "Name" : "4ThePeople WebSales LTD",
      "PostAddress" : "Chapel Hill",
      "PostCode" : "LN4 4ZL"
   },
   "result" : "ok",
   "table" : "Address"
}<br>

The data from /maindata/Address/?ID=00002

<div class="row">
<form class="form-horizontal">
  <input type="hidden" id="ID">
  <div class="form-group">
    <label for="Name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Name" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <label for="Address1" class="col-sm-2 control-label">Address</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Address1" placeholder="Address line 1">
    </div>
  </div>
  <div class="form-group">
    <label for="Address2" class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Address2" placeholder="Address line 2">
    </div>
  </div>
  <div class="form-group">
    <label for="PostAddress" class="col-sm-2 control-label">Post address</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="PostAddress" placeholder="Post address">
    </div>
  </div>
  <div class="form-group">
    <label for="PostCode" class="col-sm-2 control-label">Post code</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="PostCode" placeholder="Post code">
    </div>
  </div>
  <div class="form-group">
    <label for="EMail" class="col-sm-2 control-label">E-Mail</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="EMail" placeholder="E-Mail">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <a class="btn btn-primary" onclick="updateorcreate();">Save</a>
      <a class="btn btn-primary" onclick='deconnect.clearrecord();$("#delete").hide();'>Clear</a>
      <a id="delete" class="btn btn-primary" onclick="dodelete();">Delete</a>
      <a class="btn btn-primary" onclick="window.history.back()");">Close</a>
    </div>
  </div>
</form>
</div>
<br>

The code for the form. As you can see each input field has the id="fieldname" that matches the data in the record data fetched form the server. When this is the case deconnect will automatically add the data to the form on a success full getdata.

Create or update data

When a user clicks the Save button on the page, we do not use a standard form submit like in the old days, but call a custom function that will determine if you are going to update an existing record or create a new one.

function updateorcreate()
{
debugger;
var idval=$('#ID').val();
if ( idval === "") {
  deconnect.newrecord('/maindata/Address/');
  $("#delete").show();
} else
  deconnect.updaterecord('/maindata/Address/?ID='+idval);
}

This is done simply by checking if the hidden field named ID have a value or not. The reason for this instead of checking for query value like we did when hide the delete button on page load, is to support a no data loaded situation when we have a wrong query format in the getrecord method and to support the clear button that is described later in this document. If we have a value in the #ID field, we add a query to the url and do an updaterecord (PUT verb in REST), and if no ID we do an newrecord (POST verb in REST). The data returned form each of these operations if successful, is a recorddata entry like the one you get from getrecord. This will be added back to the form, so a new record now has become a update able record due to the ID returned form the server. That is why we show the delete button again. If we did proper error checking in our own custom success or failure routines, we would called the show delete button only in the success function. As this page is build, the delete will show up even when we get an error back from the server.

The other buttons

If you look at the form code above, you will see three more buttons: Clear, Delete and Close. This is how they work.

Clear simply call the deconnect.clearrecord() method and a jquery hide delete button. The clear record takes all of the form fields and set the value to blank.

Close simply calls a history back for you. That is the same as pressing the back button in you browser. That will take you back to the page where this page was opened from.

The delete is a little more complicate than the first two buttons, here we call a custom dodelete function created for this page.

function dodelete()
{
debugger;
var idval=$('#ID').val();
if ( idval === "")
  alert("No record to delete");
else
  deconnect.deleterecord('/maindata/Address/?ID='+idval);
};

The function do a check if we have a valid record that can be deleted builds an url for use with the deleterecord method.

The complete page code

<script>
function updateorcreate()
{
debugger;
var idval=$('#ID').val();
if ( idval === "") {
  deconnect.newrecord('/maindata/Address/');
  $("#delete").show();
} else
  deconnect.updaterecord('/maindata/Address/?ID='+idval);
};
function dodelete()
{
debugger;
var idval=$('#ID').val();
if ( idval === "")
  alert("No record to delete");
else
  deconnect.deleterecord('/maindata/Address/?ID='+idval);
};
$(document).ready(function() {
    // When the document is loaded, we check the query to see if we are new record or edit record
    debugger;
    var parms=deconnect.decodequery();
    if (typeof parms.ID !==  "undefined") // edit record
        deconnect.getrecord("/maindata/Address/?ID="+parms.ID);
    else
        $("#delete").hide();
});
</script>
<div class="row">
<br>
<form class="form-horizontal">
  <input type="hidden" id="ID">
  <div class="form-group">
    <label for="Name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Name" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <label for="Address1" class="col-sm-2 control-label">Address</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Address1" placeholder="Address line 1">
    </div>
  </div>
  <div class="form-group">
    <label for="Address2" class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Address2" placeholder="Address line 2">
    </div>
  </div>
  <div class="form-group">
    <label for="PostAddress" class="col-sm-2 control-label">Post address</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="PostAddress" placeholder="Post address">
    </div>
  </div>
  <div class="form-group">
    <label for="PostCode" class="col-sm-2 control-label">Post code</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="PostCode" placeholder="Post code">
    </div>
  </div>
  <div class="form-group">
    <label for="EMail" class="col-sm-2 control-label">E-Mail</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="EMail" placeholder="E-Mail">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <a class="btn btn-primary" onclick="updateorcreate();">Save</a>
      <a class="btn btn-primary" onclick='deconnect.clearrecord();$("#delete").hide();'>Clear</a>
      <a id="delete" class="btn btn-primary" onclick="dodelete();">Delete</a>
      <a class="btn btn-primary" onclick="window.history.back()");">Close</a>
    </div>
  </div>
</form>
</div>
<div class="row">
<h3>How this form is constructed</h3>
<p>This form uses the default functionality to the dataeaseconnect.js library. We edit or create one record in the Address table. Each field id in the form matches a field in the table. We use hidden field named ID to deterine if we have a new record or one to update. This field is hidden for the user, but can be seen in the page source. The data is feched by getrecord when ID is found in the query by using decodequery method and field data is added to the field values by matching the id names in the form fields. Nothing is done if there is no ID in query and then the default is new record. The save button checkes if we have a ID and then use the updaterecord command and if we have an ID and if not, it uses the newrecord command. The delete button checkes if we have a record loaded and if so, calls the recorddelete command. The delete button is hidden on load if we selected the new button. The clear button simply removes all data from the form and make it a new record form by calling the clearrecord method. It also hide the Delete button by selecting it and call the hide method. I call it buttons because it looks like it, but it is actually links styled as buttons. I side effect of using actual buttons inside a form is that the form will be posted. This you do not want when using ajax. If you want to look at the page code click to <a href="/cmd/openapp/">"Open in DataEase" link</a> and find ELM00009 in WebServer.</p>
</div><br>

This is all code as found the the record in WebServer.