Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

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
     <QuickStartGuideEnabled>true</QuickStartGuideEnabled>
     <QuickStartGuideNextPreviousButtonEnabled>true</QuickStartGuideNextPreviousButtonEnabled>
     <QuickStartGuideDocument identity="quicktips"/>     or     <QuickStartGuideDocument label="quicktips"/>


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.

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">
  <div id="div1" class="container">
   <h1>Welcome to Assert</h1>
   <p class="italicparagraph">This parts catalogue...</p>
   <div class="imageholder">
    <img style="vertical-align:middle" width="800px" src="Content?fileName='image.png'"/>
   </div>
  </div>
  <div id="div2" class="container">
   <h2>Change language</h2>
   <p class="normalparagraph">You can change language of the interface and/or the documents by selecting "Settings" from the menu.</p>
   <div class="imageholder">
    <img style="vertical-align:middle" width="800px" src="Content?fileName='image2.png'"/>
   </div>
  </div>
  <div id="div3" class="container">
   <h2>Quick search</h2>
   <p class="normalparagraph">
     You can search in Assert by using the search field. The search results will be presented in information categories. <br/>
     To enter a search hit, click on the result item. By hitting "enter" you will navigate to the first search hit.<br/>
   </p>
   <p class="normalparagraph-italic">
    <b>Tip:</b> Use the "Advanced search", at the bottom of the Quick search result, to see more search results or to perform detailed searches.
   </p>
   <br/>
   <div class="imageholder">
    <img style="vertical-align:middle" width="800px" src="Content?fileName='image3.png'"/>
   </div>
  </div>
 </body>
</html>

  • No labels