Case study: Version Controlled Documentation - Page with articles

Screens that we will need for data display and that we have described in the previous article can be created in ObjectGears by means of a single object Page.

First, we will design a page scheme  - layout of its main parts. We cannot use for our purpose one of the predefined layouts. Instead we will design our custom scheme (see Page detail, tab Page scheme).

<div class="verdoc">
<div class="head noprint">
  <div class="title"><a href="./vcd"><img src="./images/system/miniLogo.png" align="center" alt="ObjectGears" /> {{Text:PageTitle}}</a></div>
  <div class="r">
     {{100:HeadRight}}
  </div>
  <div class="r" style="padding-top: 19px">
   {{TextBox:SearchTb}}
    <a href="https://www.linkedin.com/company/objectgears" title="LinkedIn" target="_blank" class="nsp"><img src="modules/OG.VersionDoc/linkedin.png" /></a>
    <a href="https://twitter.com/ObjectGears" title="Twitter" target="_blank" class="nsp"><img src="modules/OG.VersionDoc/twitter.png" /></a>
    <a href="https://www.facebook.com/objectgears" title="Facebook" target="_blank" class="nsp"><img src="modules/OG.VersionDoc/facebook.png" /></a><br/>
  </div>
  <div class="clear"></div>
  {{Text:TopicMenu}}
</div>

<table class="tabcontent">
<tr>
  <td class="tree noprint">
      <div class="version">
         {{Text:VersionLabel}}: {{DropDownList:Version}}
      </div>
      {{Text:Menu}}
    {{10:Tree}}
  </td>
  <td class="content">
    {{0:Content}}
  </td>
</tr>
</table>

<div class="start">
{{Text:SearchTitle}}
 {{20:Find}}
  {{Text:StartArticle}}
</div>
 {{30:Footer}}
</div>

The resulting layout is following. (Note: The below picture contains also webparts that we have inserted into the page zones).

Below we will show several examples that will solve other requirements stated in the previous articles.

Article display in the page

We are using database procedures and one query to display information about searched articles, menu and article detail. The query will simply link all the necessary information about the article into one record. By this we will have much more simple work with data in the page and all the complexity stays in the mentioned query.

After looking up articles we write them in the page by a script. We do not include the script here because of its size but you can find it in the Version Controlled Documentation model.

The article detail is drawn by webpart script with the code text. The page just looks up the requested article and passes it to the webpart.

Example of passing to the webpart:

OGWebParts['text'].SetData('article', article);
OGWebParts['text'].SetData('at', at);
OGWebParts['text'].SetData('version', v);

Reading the article in the webpart - the page passes to the webpart more information in order the webpart does not need to read it again.

//take over the article and text that was read in the page
var article = OGWebPart.GetData('article');
var at = OGWebPart.GetData('at');
var orig_version = OGWebPart.GetData('version');

Displaying the left menu with article hierarchy

In the left menu we want to display the selected article, all its parent articles up to the top one, further articles on the same level as the displayed article and then also all the child articles directly below the selected article. In order to optimize performance we will perform the whole search on the database level. The database is fully equipped for this and we will move just the data, that we will really display, from the database to the web-application server.

Inserting is secured in the page by the function SetMenu and in the database by the stored procedure VerDoc_GetMenu.

Edit buttons

There are four buttons in the page that ensure a comfortable editing. They are accessible only to an editor. This is ensured by the following script.

//edit buttons only for a logged on user
if (OG.Person.IsUserInRoleByCode('vcd_editor'))
{
   ...inserting buttons into the page
}