Create a quick start guide

This guide shows how to create a custom quick start guide in html in Web Viewer. The quick start guide will be available when a user visits Web Viewer for the first time and in the menu.

Step-by-step guide

Follow these steps to add a quick start file to Web Viewer.

  1. Create an html file for the quick start guide. The file will need to follow the sample format below.

    1. Each <div id="div1" class="container"> will become one page in the quick tip guide.

    2. Images can be used in the html file, but they will need to be referred using a specific syntax as described below and placed in a sub folder called Documents/Content.

  2. Create a new document in Manager.

    1. Add the quick start document to the document in Manager. Add all the translations needed.

  3. Set meta data on the document in Manager.

    1. Set Label="quicktips" or Identity="quicktips".

    2. Name that allow search, e.g. "Quick tips"

    3. Add specifications that are searchable but not visible to make the document searchable. E.g. add "Help" as a specification.

    4. Ensure to set mode as "IncludeInPublish" to ensure the document is included at publish despite not being added to a catalogue.

  4. Manually copy images used in the html to the site. The images shall be placed in this folder <site>/Documents/Content/ on the editor server.

  5. Update profile.config to enable quick start guide

    // These changes are no longer needed in profile.config, // as they are moved to configurable-property-values.config and are editable via the administrator UX) // <QuickStartGuideEnabled>true</QuickStartGuideEnabled> // <QuickStartGuideNextPreviousButtonEnabled>true</QuickStartGuideNextPreviousButtonEnabled> // <QuickStartGuideDocument identity="quicktips"/>     or     <QuickStartGuideDocument label="quicktips"/>
  6. Login to the Web Viewer as Administrator, go to the user dropdown menu to select Administrate, select Configuration, and scroll down to select Introduction

    administrate.png

     

  7. In the Introduction settings, tick checkbox QuickStartGuideEnabled to enable the Quick Start Guide, Specify the QuickStartDocument name and Identity ( “quicktips - Help” in our case), and tick the QuickStartGuideNextPreviousButtonEnabled if you are using an HTML page which consists of several subpages (note that this setting does not need to be enabled if your guide is a PDF document).

     

  8. Save changes and check if the “Quick Tips” option has appeared in the user dropdown menu



Note!

Note that images are to be placed in Documents/Content folder and are referred using the "Content?fileName" syntax as below.

  <img style="vertical-align:middle" width="800px" src="Content?fileName='image2.png'"/>

If a specific css is used for the Quick start, use the same method and place the css in Documents/Content folder.

  <link rel='stylesheet' type='text/css' href='Content?fileName=quicktips.css' media='screen'/>

Quick start guide in pdf

It is also possible to add a pdf-based quick start guide. If this is the case, follow this procedure.

  1. Add the document to Manager and set metadata according to step 2 and 3 above.

  2. Update the profile.config according to step 5 above, but omitt the QuickStartGuideNextPreviousButtonEnabled tag since it cannot be used in a pdf.

Changing an existing quick start guide

Follow these steps:

  1. Changing an existing quick start guide by finding the existing quick start guide in document storage. Typically filter the storage on “quick”. Ensure to allow search on label, identity and persistent identity.

  2. Select to upload a new version of the file by clicking the file select icon.

  3. Publish the changes.

If you wish to get the original file and make changes to it, the file has to be retrieved from the server. The file is located in the site folder’s sub folder for documents. Each language version is located in a language sub folder. Typically this is at:

D:/Signifikant/Data/<site>/Documents/<language-code>

Sample Quicktips.html file

<html xmlns='http://www.w3.org/1999/xhtml'>  <head>   <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>   <link rel='stylesheet' type='text/css' href='Content?fileName=quicktips.css' media='screen'/>  </head>
 <body id="Quicktips" lang="en-US">

Related articles