View document

To view the document, we will simply use livetext. There is one twist that you need to know, to be able to show all kinds of html code, we must tell the system to trust our html. This is done by setting the livetext as safe html. We also want the title to show as the heading int the browser and not anywhere in the page.

Page setup

1. Add Articles as the main table
2. Select settings and add [{ maindata.title }] as the title.

Page code

<div class="row">
[{ maindata.body|safe }]
</div>
<div class="row">
<div class="col-md-12 text-right">
	Created: [{ maindata.createddate }] - [{ maindata.createdtime }] Last updated: [{ maindata.updateddate }] - [{ maindata.updatedtime }] 
	<a class="bnt btn-xs btn-primary" href="/cms/editarticle/0/?slug=[{ maindata.slug }]">Edit</a>

</div>
</div><br>

The page code for view with edit button.

Turn off autoescape livetext

When you create a live text, you will find a few extra settings in the dialog that can be used for special cases like the body. All text that comes from fields in DG3 is auto-escaped to avoid problems javascript injection that often is used to hijack web sites and serve malicious code to the visitors. To use DG3 as a cms you probably want to be able to use any html you like on the pages, so then we have to tell the system we trust the html code entered in the editor. This can be done by checking html in the create new live text dialog or simply type |safe at the end of the livetext field inside the [{ }].

Add livetext dialog

Create an edit link button

To open the edit page for the article, you need to find the correct record by doing a search and open the first record matching your search. This is how it works.

<a class="bnt btn-xs btn-primary" href="/cms/editarticle/0/?slug=[{ maindata.slug }]">Edit</a><br>

The edit link code

First we add a nice litte blue button by using btn btn-xs btn-primary as classes to the link. This will turn the link into something looking like a button in bootstrap. 

Second we calulate the url for the edit page by looing at folder and page name and add them together with a / or just use the the link button in the page elements to do it for you. Then add a 0/ at the end of the link to say you want the first matching record and then add the search query. The search query works by adding the field name = value to the url as a query string. A query string always starts with a ?. So that makes the full url: /cms/editarticle/0/?slug=[{ mandata.slug }] where this represents /folder/pagename/firstrecord/?field=value.

The end result

When we add the html we created for the landing page it will look like this in the browser. I is missing the update of the menu, but else it looks a lot like the one created in using dg3 as a cms. We will fix the menu by a clever trick in a later document. That's it for now.