Create record

The next thing to do after creating the table for storing the articles, is to make a page for adding new and editing articles. We will show a technique of how to do both with only one page. What we do is to use a build in feature for main record to default to create a new record as default and a way to set the default value from the id based on the default loaded into hidden fields.

Create a record page

For adding and editing records, we will use one page that can do both.

  1. Go to the page designer
  2. Create a new folder called cms
  3. Create a new page in the cms folder called editarticle
  4. Select main tab Article in the page properties data section
  5. Set initial action new record in data section
  6. Switch to html in box type in element properties

 Create a new folder for holding all pages related to the CMS mini application. This will help you keep a tidier structure when you application grows.

We use edit as prefix for all pages that can create or edit pages. This way we will easily spot them when the solution rows and still keeping the name short for the sake of the urls.

To make the page work as both the new record and edit record page, we add initial action new record.

Create a folder and a new page inside the folder and make it a create/edit record page

  1. Add heading and base code for form
  2. Add an edit field and select id in map to
    • set field type to hidden (you might want to just keep text, so you can see if it works as expected for debugging purposes)
  3. Add edit field title inside a div with form-group class with col-xs-12 (if you want to set size on one field, you need to do it on all, to get the same margins on all)
    • add a label on top before the field
    • add form-control to style field in element properties
  4. Add edit field slug inside a form.group class with col-xs-6 
    1. add a label on top
    2. add form-control and
  5. Add button in a row and col-xs-12 class
    • give it Button name save
    • style btn btn-success
    • Text Save
    • type buttons
    • action dataconnect.updateredirect
    • redirect OK /cms/viewarticle/
    • redirect fail /cms/listarticles/
    • make the key disabled until all fields required are filed in by tagtail disabled="disabled" (a separate document on unlock when all fields ready)
  6. Add a none default javascript library and add js ready event  to auto fill slug when title is changed (a separate document on how it is added and works)
  7. Add a filter on slug to disallow entering any other than numbers and chars (a separate document on how it's done and works)
  8. Save the page and preview and you should be able to register new records, but will end in a page not found when pressing save
<h1>Create a new article</h3>
[! field id !]
<div class="row">
	<div class="form-group col-xs-12">
	<label for="">Title</label>
	[! field title !]
	</div>
</div>
<div class="row">
	<div class="form-group col-xs-6">
	<label for="">Lookup url</label>
	[! field slug !]
	</div>
	<div class="form-group col-xs-6 text-right ">
	[{ maindata.createddate }] - [{ maindata.createdtime }]
	</div>
</div>
<div class="row">
	<div class="form-group col-xs-12">
	[! field body !]
	</div>
</div>
<div class="row">
	<div class="col-md-1">
	[! button save !]
	</div>
	<div class="col-md-1 col-md-offset-10 text-right">
	[! button delete !]
	</div>	
</div>

The page  code

 For each field we create we select the edit field page element and select the field map form the Map to dropdown. In this way we do not have to do that manually later.

The id field is set to hidden as the value of the element is all we want to save. To debug your page, you can switch the field type to text instead of hidden and you will be able to see the value set by the new record default value.

We add the style form-control to the field to make it take the default bootstrap look.

We add the style form-control to the field to make it take the default bootstrap look.

We are going to store html in the body field and the easy way to create html code is to use one of the three different richtext editors supported by DG3. The current default richtext editor is redactor. It is a small and very light wight editor that support images, links and tables out of the box. You can also do image upload by drag and drop by activating the fileupload pluging and adding a couple of urls to the editor settings.
To use any of the others just change field type to textedit(no editor just html) ,ckedit or tinymce. Only ckedit and richtext support image upload at the moment.

We add a button with the name save, text Save and styles it using bootstrap classes. Then we connect it to the action dataconnect.updateredirect. This is one of the three update methods used for save new (record number -1) or update a record. The prefix redirect indicates what happens when the button is pressed. In this case a redirect to the view article if all is good and the full list if not. The redirect ok used a livelive to make the query ("/cms/viewarticle/?id=[[ id ]]"). The livelive is reading the in memory values from the open page instead to the livetext values given when the page is opened. We do this to get the correct value for the query when we have a new record where the id is still not created in the database. In this case we could have used the livetext version of "/cms/viewarticle/?id=[{ maindata.id }]" as well since this is loaded as default values into the hidden field and not changed by us before saving.
We have also added a tag tail of disabled="disabled" to the button. This will deactivate it until all criterias of a proper article is met. To test it now before you learn how that works, just remove it and the button will work now without any check. The disabled="disabled" is standard bootstrap functionality.

We add a button for deleting the open record. It should only work on existing record, so we add a little formula to disable the button when recordno is -1 (new record). The formula used is added to tag tail as disabling buttons is an bootstrap attribute called disabled="disabled". The formula used is: "[% if xdg3.url.recordno == -1 %]disabled="disabled"[% endif %]". The xdg3.url livetext always hold all the url query field and the maindata record number used when loading the page.
The style of the button is bootstrap danger button using the classes "btn btn-danger". This gives the button a red background in the default style.
We use the dataconnect.deleterecordredirect to match the update function we did choose for saving and updating the record. Both error and ok on the delete takes us direct to the list of articles view.
The placement of the button is done by the classes "col-md-1 col-md-offset-10 text-right" in the surrounding div. The col-md-offset is used to skip columns we do not want to fill in the grid. The text-right is used to right align the button. This gives a delete button that is read and to the far right that is disabled when you not can use it.

The element properties

How this page works

What you just created is a page if given the page url, will open an edit page for a new record. The way this works is by loading an edit for with record number -1. The record number -1 means new record in PRISM. When DG3 ask the server for a new record, the default values for all formulas are loaded into the in memory record. The in memory record is stored as a javascript variable in the web page. You can see the code by doing a show page source. The default value for the document id is then added to a hidden id field, so we have a value to store back to the database on a new document. The same id will be used to identify the document when we want to edit the document. We will look into that i the page about listing documents. We can also use the default values as livetext in a page as illustrated by adding the createddate and createdtime as livetext to the page. When in edit mode, these will show the saved values instead of the default values.

Livelive

What is livelive and how is it different form live text? Livelive is the concept of reading a value direct from a live field on the page. The syntax if [[ inpagefieldname ]]. The name is not necessarily the same as the table column name, but the name used for the field on the page and the same as the value listed in the field element property Name. This way the in page field do not necessarily need a dataconnection to be used. Livelive is also what we might want to use for search fields. 

How is livelive different from livetext? Livetext is the values read from the server and rendered into the page by the templating system. This value will never be changed by a users, but a livelive is the value now as it has been changed by as user. I livelive field only lives in memory until it is transferred to the server by a dataconnect action.