You have now created and edited documents and linked them together as a web site, but it is not a practical way of finding and editing documents. For this you will need ways of listing what you have stored in your database. To create that, we will create a new page and add a data view. A data view is a view that let you show more that one record at a time. As default it will give you the first 100, but you can change that to as many as you like.

This is what we will do:

  1. Create a link in the template used for accessing the new dataview form the nav bar
  2. Create a new page under cms called viewarticles (just added a s to the other page that shows on article)
  3. Add a data view
  4. Connect the data view to Articles
  5. Make sure we get all our articles by increase the max result to 9999
  6. List all records in a table with a link to the article and an edit button for each article

Some times when you add a data view or another box it will add more than you like or in the wrong place. This is how you can delete one of the boxes.

Accessing the new dataview

To be able to access the dataview, I suggest that we add a new action in the actions dropdown in the nav bar. Simply open the base template from the site layout section and a a new line to the dropdown menu. Since the natural place for creating a new article is this list, I uggest that we copy the link already in the dropdown into the top of the new page just below the heading.

siteicon.png switch to the site layout section to edit the base template

        <ul class="dropdown-menu">
         <li><a href="/cms/viewarticles/">List articles</a></li>
        </ul>

The new action with only the dataview

The header portion of the dataview page

At the top we add a heading telling us what kind of view this is and move in the link for creating a new article form the base template. We will use a special heading to get a line below the heading and before the new button.

<div class="row col-md-12">
	<h1 class="page-header">List all articles</h1>
	<a class="btn btn-default bnt-sm" href="/cms/editarticle/">New article</a>
</div>

The code for the top part of the page is created inside a div with a row and a col def. This is to get all the elements on the page aligned the same way. I have also added a page-header class to the h1 element. This is a bootstrap built in class gives some extra spacing and a line below the header to divide up the page. I also created a link the if styled as a bootstrap button by adding the btn classes. I made it a default button (no extra colors) and a little smaller using the sizing class btn-sm.

Creating the dataview and the html code

A data view simply creates a page element with a repeating element inside for each record the data connector emits. That can be from 0-maxrecord elements. The default maximum is set to 100, but can easily be made larger by a setting. Each repeating element is given a special livetext called viewdata that holds one record at a time and then is merged into the the repeating element.The dataview element are prefixed with a view header before the repeating element and postfixed with a view footer after all the elements are emitted.

select to add a new dataview below the selected box

Added style row col-md-12 to get dataview aligned with the page heading

Added a view header with a Bootstrap table class and a table heading with all the columns we are going to add inside the dataview body

Added the table Articles as the live  table used for fetching records for the dataview

Added sorting on createddata field by adding a fixed filter with a first char as > for ascending

Added max result to 9999 instead of the default 100

<table class="table"><tr><th>Looup url</th><th>Title</th><th>Created</th><th>Updated</th><th></th></tr>

View Header in data view

</table>

View footer in data view

<tr>
	<td>[{ viewdata.slug }]</td>
	<td><a href="/cms/viewarticle/?slug=[{ viewdata.slug }]" >[{ viewdata.title }]</a></td>
	<td>[{ viewdata.createddate }] - [{ viewdata.createdtime }]</td>
	<td>[{ viewdata.updateddate }] - [{ viewdata.updatedtime }]</td>
	<td><a class="btn btn-primary btn-xs" href="/cms/editarticle/0/?id=[{ viewdata.id }]">Edit</a></td>
</tr>

The html code in dataview. You can add livetext the same way as in a normal box element, except for the name of the livetext starts with viewdata. We add a link to the title by creating a url that will display an article using the viewarticle page. To find the right one, we add a query using the url query string. The syntax is fieldname=fieldvalu, so to find the right article to view, we use the unique field slug and adds the value as a live text, This give us the url: /cms/viewarticle/?slug=[{ viewdata.slug }] that converts to an unique url for each record emitted to the list. We do the same for the edit button, except here we use the /cms/editarticel/0/?id=[{ viewdata.id }] where we add a /0/ to the end of the base url to indicate the first matching record and the search query id=the records id for finding the right article based on the generated unique id. The reason to add the /0/ to find the first record in the editarticle page and not in the viewarticle page is because of the initial action new page set on the edit article. This give us the default reord as -1 for this page which means new record in DG3. The viewarticle page, you do not need to add the /0/ since this do not have a initial action new record and then fault to fetch the first matching record for you by default (record 0). There would be no harm in adding the /0/ to viewarticle as well, just that is will add to the length the url doing nothing extra. Will later show how you can do next end previous using the record number to fetch other then the first in the query when the query match more than one record.