Create a popup document

This guide shows how to create a popup document, which eg can be used as a search guide, in Web Viewer. The popup document may be configured to show in the menu, in the toolbar or on the canvas search page.

Overview

The popup document may be an html document and will slide in from the right side of the web viewer. Sample view is like below:

The function may be available from the menu, from the toolbar or from a link just under the canvas search area.

Instructions

Follow these steps to add a popup document to Web Viewer.

  1. Create an html file for the document.
  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="popupdocument" or Identity="popupdocument".
    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 "Search 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 popup documents, see below.


profile.config
<PopupDocumentSettings>
   <!-- Enable placement in menu. Add a key text in custom.text config for the display text in the menu. -->
   <PopupDocument Enabled="true" Placement="Menu" TextKey="Key_Text">
      <Document identity="popupdocument"/>  
   </PopupDocument>

   <!-- Enable placement in toolbar. Add a key text in custom.text config for the display text in the toolbar. -->
   <PopupDocument Enabled="false" Placement="Toolbar" TextKey="Key_Text">
      <Document identity="popupdocument"/>  
   </PopupDocument>

   <!-- Enable placement in canvas search. Add a key text in custom.text config for the display text in the canvas search. -->
   <PopupDocument Enabled="false" Placement="Page" TextKey="Key_Text">
      <Document identity="popupdocument"/> 
   </PopupDocument>
</PopupDocumentSettings>


Sample document

Below is a samle document to upload into document storage.

Images

Note how images are referred. They will need to be placed in Documents/Content/ folder on the site.