Creating and Using a Document Tab Control on HL7 Wiki

Introduction

A "Tab Control" was constructed for the Harmonization Editor Manual. This control is based on one used with the WikiPedia, but it had the be altered since the HL7 Wiki does not use some of the template "function" extensions used in WikiPedia.

The following is an overview of how these are constructed.

Opening Comments

1. First, I made heavy use of the Wiki "Template" capability. The primary tab Definition is in the Template: name space.
2. For most of the other templates, I invoke them by using the standard {{TemplateName}} invocation, but by using documents from the general name space preceded with a colon as {{:GeneralDocumentName}}
3. In order to make the documents easier to edit, I defined a template document for each one of the tabs. These documents are "skinny" holding only their invocation of the "Tab control" template, a clickable "text-bar" for the "table of contents for their section, and a sequence of one or more template invocations that bring in their content.
4. With this style, internal references within a tab should be entered as #Content_Section. All content sections within a single tab must have unique names, because when the document is assembled, they all appear as children of the template document for that tab.
5. Similarly, references to content from other tabs should be constructed as Template_Document_For_Other_Tab#Content_Section

Contents of the Document-specific Tab Control Template

For the Harmonization Editor Manual document, the Tab control specification for that particular document is held in a template named Template:VocAppStyle/TabsSimple.

Generic support templates

In turn, this template uses four other generic templates. These generic templates can be (and have been) used to provide tab controls for other dcouments. The generic templates are:

1. Template:VocMntStyle/TabsTopWithEdit called with no parameters sets the top of the tab bar.
2. Template:VocMntStyle/Tab1 called with one parameter, sets the appearance of a particular tab as the selected tab for the control. The parameter is:
   1. The text content of the tab. In these cases, the content is a Wiki style "internal" hyperlink, including the name of the document to which the tab will hyper-link, and the text that holds the hyper-link, which becomes the tab "label.
3. Template:VocMntStyle/Tab2 called with one parameter, sets the appearance of a particular tab as an unselected tab for the control. The parameter is as above
4. Template:VocMntStyle/TabsBottom completes the bottom of the tab control bar

Note that the four generic templates are invoked in the following sequence:

• a single invocation of Template:VocMntStyle/TabsTopWithEdit;
• followed by one invocation of either Template:VocMntStyle/Tab1 or Template:VocMntStyle/Tab2 for each tab on the bar (Only one of these should invoke /Tab1 the rest should invoke /Tab2);
• followed by a single invocation of Template:VocMntStyle/TabsBottom

Invocation of the Document-specific Tab Control Template

When invoked by name only, such as {{VocAppStyle/TabsSimple}}the control looks like the following.

NOTE: the following is active and will lead you to the selected section of the harmonization editor manual.

GetStarted

DataBase

Browsing

Proposals

CodeSystems

Domains

ValueSets

Tutorial

Installation

However, then the template is invoked with a numbered parameter set equal to "1" such as {{VocAppStyle/TabsSimple|4=1}} and the numbered parameter corresponds to index of a tab, that tab will appear to be active, as below. Note that a parameter not in the range of 1..9 (the number of tabs) will appear with none selected as above.

GetStarted

DataBase

Browsing

Proposals

CodeSystems

Domains

ValueSets

Tutorial

Installation

Code contents of the Document-specific Tab Control Template

The specific code contents of this tab control follow:

{{VocMntStyle/TabsTopWithEdit}}
{{VocMntStyle/Tab{{{1|2}}}|[[Harmonization Editor Manual|GetStarted]]}}
{{VocMntStyle/Tab{{{2|2}}}|[[Harmonization Editor Manual (DataBase)|DataBase]]}}
{{VocMntStyle/Tab{{{3|2}}}|[[Harmonization Editor Manual (Browsing)|Browsing]]}}
{{VocMntStyle/Tab{{{4|2}}}|[[Harmonization Editor Manual (Proposal)|Proposals]]}}
{{VocMntStyle/Tab{{{5|2}}}|[[Harmonization Editor Manual (CodeSystems)|CodeSystems]]}}
{{VocMntStyle/Tab{{{6|2}}}|[[Harmonization Editor Manual (Domains)|Domains]]}}
{{VocMntStyle/Tab{{{7|2}}}|[[Harmonization Editor Manual (ValueSets)|ValueSets]]}}
{{VocMntStyle/Tab{{{8|2}}}|[[Harmonization Editor Manual (Tutorial)|Tutorial]]}}
{{VocMntStyle/Tab{{{9|2}}}|[[Harmonization Editor Manual (Installation)|Installation]]}}
{{VocMntStyle/TabsBottom}}

Note: The tab-content is hard coded in this, document-specific, control. The documents that invoke this control as the header for their own presentation cannot alter the contents.

The only peculiar element of this code is the way the parameter passed to this tab determines which of Tab1 or Tab2 to invoke. Each of the nine tab-specific rows is assigned a separate parameter number, expressed as {{{n|2}}}. This expression says use the value for parameter n here, or if that parameter is not valued, default the result to 2. As noted above, the invocation of this document-specific template will include a single parameter valued as 1 as in {{VocAppStyle/TabsSimple|n=1}}, where n is is the parameter number (and position) for the "active" tab.

Use of the Document-specific tab in the Harmonization Editor Manual

As mentioned before, the primary documents for the Harmonization Editor Manual are themselves "shells" that set up the tabs and then invoke their contents from ordinary documents invoked as templates. The content for the [[Proposals tab of that editor follows:

{{VocAppStyle/TabsSimple|4=1}}
<div style="margin-top:0.7em; margin-bottom:0.5em; text-align:left; font-size:98%;   
    vertical-align:bottom; padding:3px">
  <span style="font-weight:bold; font-Size=108%">
    [[{{PAGENAME}}#|Intro]] · 
    [[{{PAGENAME}}#Creating_and_Modifying_Proposal_Header|CreateHeader]]
  </span>
  ([[{{PAGENAME}}#Identifying_Data|Id]] ·
  [[{{PAGENAME}}#Supporting_Text|SupportText]] ·
  [[{{PAGENAME}}#Modify_Proposal_Data|Modify]])
  <span style="font-weight:bold; font-Size=108%">
    [[{{PAGENAME}}#Adding Vocabulary Revisions to Proposal|AddVocRevisions]]
  </span>
    ([[{{PAGENAME}}#Revision Interdependencies|RevisionDependency]])
  <span style="font-weight:bold; font-Size=108%">
    [[{{PAGENAME}}#Proposal_Management|ManageProposals]]
  </span>
  ([[{{PAGENAME}}#Apply_Proposed_Changes|ApplyChanges]] ·
  [[{{PAGENAME}}#Creating Multi-step Change Proposals|MultiStepProps]])
</div>
{{:VocApp-Proposal/Root}}
{{:VocApp-Proposal/CreateFile}}
:{{to-top}}
{{:VocApp-Proposal/CreateBody}}
:{{to-top}}
{{:VocApp-Proposal/Management}}
:{{to-top}}
{{:VocApp-Proposal/MultiStep}}
:{{to-top}}

Notes on this code

The following should be noted:

1. The first line creates the tab-control at the top of the page.
2. The <div/> element holds the elements of the "table-of-contents" line for the Proposals section.
3. Within the "table-of-contents" line, the <span/> elements provide larger-type, Bold headings for the primary (top level) of the TOC, while the remaining sections are the second level entries.
4. Below the <div/> are the invocation of the templates for the individual sub-section documents, such as {{:VocApp-Proposal/CreateFile}}.
5. The {{to-top}} template provides a small-font, bold hyperlink Jump to top of page that takes one back up to the tab/table of contents at the top of each section.