How the framesets, nav bar and menu pages work together on the web site

 This article is suitable for a Library Administrator

Ref: 20081123
Last edited: 14th August 2013
 
Although the Triaster solution can support mulitple libraries, by default only a single library called ProcessLibrary is installed. This in turn will contain three sites: Sandpit, Prelive and Live. Within each web site, there are classes of important files that play a big role in the layout of the site and the functioning of the menu options. These are:
  1. The Process Map frameset file (used to position and size the sub-frames for viewing processes). Located on the Publication Server as \Config files\<Libraryname>\<Sitename>\frameset.html
  2. The frames config.xml file (used to position and size the sub-frames for the tools). Located on the Web Server in the ProcessLibraries folder.
  3. The Reports' frameset files (used to position the size and sub-frames for each report). Located on the Web Server as \<Libraryname>\<Sitename>\Tools\Static html\[all mismatched deliverables.html|how to .html|....|table of contents.html]
  4. The Menu bar, nav.html (used to create links to tools and other pages of interest). Located on the Web Server as \<Libraryname>]\<Sitename>\Static html\nav.html
  5. The menu pages (used to create links into the processes themselves). Located on the File Server as \Menu Pages\<PreLive + Live><Sandpit>\homepage.vdx etc.

The Process Map Frame set File - frameset.html

This file is located on the Publication Server in \Config files\<Libraryname>\<Sitename>\frameset.html. It can be edited by customers, but note that changes made to this file only come into affect after a complete republish - i.e., delete the content of the Web Server \html folder in order to force through changes to the frameset.html file.

For every page that displays a process map like the one below, there are 2 sub frames in the Live site, and 3 sub frames in the Prelive and Sandpit sites.
(click image to enlarge)

Within the Live site, the 2 sub frames correspond to the menu options running across the top of the screen, and the maps and zoom tools beneath.

The frameset is very simple (and can be accessed from Page > View source in Internet Explorer):

(click image to enlarge)

 
 
 
The tag <frameset rows="44,*" ... > 
 
means let the first subframe occupy the first 44 rows of the screen (sufficient on this site to display the menu options), and then let the rest of the screen be occupied by the second subframe.
 
The first subframe is http://localhost/showcase/live/static html/nav.html (given by the src= attribute of the first <frame> tag. It corresponds to:
 (click image to enlarge)
 
 
The second is specified in the second <frame> tag. It corresponds to:
 (click image to enlarge)
 
The Sandpit and Prelive are slightly different frame sets because these contain a disclaimer sub frame right at the top of the screen. Let's take a look at the Sandpit as an example. The screen is (note the yellow disclaimer bar at the top of the screen):
 (click image to enlarge)
 
 
and the frameset is:
 
 (click image to enlarge)
 
 
 
Note this frameset is allocating 20 rows to the disclaimer sub frame, 44 rows to the nav sub frame and then the remainder of the screen to the map sub frame.

The Frames Config File - Frames Config.xml

This is located on the Web Server in the ProcessLibraries folder. This file can be edited by customers, and any changes made will be immediately apparent on the web site (unlike the Process Maps frameset.html which requires a re-publish).
 
This file contains XML which describes frames setup of each site within each library of the Triaster solution. The settings within this correspond strongly with the frameset.html described above; the frameset html is constructed dynamically within the various tools. A sample of the XML is given below.
 
<frames>
    <stage name="processlibrary:sandpit" title="Process Library (Sandpit)" innerframewidth="224">
        <frame name="disclaimer" rowheight="20" path="../../ProcessLibraries/ProcessLibrary/Sandpit/static html/disclaimer.html" />
        <frame name="top" rowheight="44" path="../../ProcessLibraries/ProcessLibrary/Sandpit/static html/nav.html" />
    </stage>
    <stage name="processlibrary:prelive" title="Process Library (Prelive)" innerframewidth="224">
        <frame name="disclaimer" rowheight="20" path="../../ProcessLibraries/ProcessLibrary/Prelive/static html/disclaimer.html" />
        <frame name="top" rowheight="44" path="../../ProcessLibraries/ProcessLibrary/Prelive/static html/nav.html" />
    </stage>
    <stage name="processlibrary:live" title="Process Library (Live)" innerframewidth="224">
        <frame name="top" rowheight="44" path="../../ProcessLibraries/ProcessLibrary/Live/static html/nav.html" />
    </stage>
</frames>

This XML consists of the following components.
 
Site Settings:
  • Name – this should NOT be edited as it used by the tools to identify the library and site.
  • Title – this sets the title of the web page (the text that is displayed at the top of the browser window).
  • InnerFrameWidth – sets the width of the left hand frame
Frame Settings:
  • The line below will add a disclaimer banner. The height of disclaimer is set by the rowheight attribute. The path should point to a valid disclaimer.html file.
  • The line below will add a frame for the nav bar. The height of nav bar is set by the rowheight attribute. The path should point to a valid nav.html file. 

The Reports' Frame set Files - [report name].html

These files are located on the Web Server in \[Library]\[Site]\Tools\Static html\[all mismatched deliverables.html|how to .html|....|table of contents.html]. At the time of writing, there are 6 reports that have a html associated with them.
 
These files can be edited by customers, and any changes made will be immediately apparent on the web site (unlike the Process Maps frameset.html which requires a re-publish).
 
Because the Reports' framesets are individually named and require to load a different page within, they all reference different subframes in a very obvious way. For example, the Sandpit how to.html is as follows:
 (click to enlarge)
 
corresponding to:
 (click to enlarge)
 
 
The Menu Bar - nav.html
 
This file is located on the Web Server in \[Library]\[Site]\Tools\Static html\nav.html. It can be edited by customers, and any changes made will be immediately apparent on the web site (unlike the Process Maps frameset.html which requires a re-publish).
 
nav.html is just the bar across the top of the web site:
 (click to enlarge)
 
 
Its source is different for every customer as Triaster specifically design the nav bar in line with the corporate brand and layout requirements. The nav bar will reference images stored in the \Static html\images folder, and will reference the various tools, reports and menu pages the customer has requested. Customers can edit the nav bar, and any change will be immediately apparent on the web site.

The Menu Pages - homepage.vdx etc.

The Menu pages can actually be thought of as 'everything below the nav bar that is not a process map'.  Very often, these are used to supply a list of links to a set of processes. There follow some examples of menu pages:
 
Sandpit > Help, sourced from \Menu Pages\Sandpit\help.vdx.
 (click to enlarge)
 
 
Prelive > Home, sourced from \Menu Pages\Prelive + Live\homepage.vdx.
 (click to enlarge)
 
 
 Live > Library Administration, sourced from \Menu Pages\Prelive + Live\library administration.vdx.
 (click to enlarge)
 
 
Of course, Menu Pages need not be sourced from Visio diagrams. They can in fact be anything at all that a browser can render. They can link to anywhere, and be linked to from anywhere.
 
Triaster always try to supply Menu Pages as Visio diagrams however so that it is possible for customers to edit them without requiring html expertise. Note that Menu Pages are typically published without the Pan and Zoom widget on the left hand side of the screen.
 
Menu pages, although conceptually very simply, actually carry some formidable difficulties in their implementation of hyperlinks. Unfortunately, it is the case that a relative link from a Menu Page to a process map (when in Visio) is not the same relative link as is required when in the html domain.
 
To see this, consider the typical structure of files on the File Server for the Live site. There are 2 sister folders:
 
\Live Maps\
 
and
 
\Menu Pages\Prelive + Live\
 
\Live maps\ contains all the maps that are to be published, and during the publish, \Live maps is written to \html.
 
\Menu Pages\Prelive + Live\ contains all the Menu Pages that are to be published, and during the publish, \Menu Pages\Prelive + Live\ is also written to the \html location.
 
When in the Visio domain, to link from say "\Menu Pages\Prelive + Live\homepage.vdx" to "\live maps\HR\Recruitment.vdx" requires a relative hyperlink of the form "..\..\live maps\HR\Recruitment.vdx". However, in the html domain, the link required is simply "HR\Recruitment.html".
 
You must therefore construct your links so that they work when published. For more information on how to do this, please refer to Working with Menu Pages.


Need further help? Contact the Triaster Support team by e-mailing support@triaster.co.uk or by calling us on +44 (0)870 402 1234.
 
Do you have any feedback or suggestions that you would like to share with Triaster? We would love to hear from you! Please e-mail feedback@triaster.co.uk 
Comments