Community
Thumb_thumb_html_snippet_injector_1

DLE tools leveraging the HTML Snippet Injector

 The Polarion's Document-like Editor (DLE) can now be adjusted by injecting code snippets into the main Polarion frame.

Description

The HTML Snipper Injector for Document Editor provides identical functionality to the initial HTML Snippet Injector for the Polarion navigation frame and the login page. A practical example of how the HTML Injector can be used is published here.

Before deploying the notification bar, get acquainted with the HTML Injector concepts described in the Polarion Help.

 

This extension provides a practical example of how the HTML Injector for Document Editor can be used to customize the user interface of the Documents. The HTML or JavaScript snippets to be injected into the Document Editor can be configured either via the polarion.properties file or via Runtime Configuration Properties in global-level Administration.

The package contains a sample script, a stylesheet for the Dark Theme look, and style definitions for the toolbar with buttons. The scripts and stylesheets need to be accessible via network to the user's client browsers, e.g. by serving them via Polarion's Apache HTTPD server, so placing them into the htdocs directory. Just copy the CSS style files into the css subdirectory or adjust the dleDarkCSSFile and dleToolBarCSSFile variables in the script file so that the path corresponds to their location.

After adding and correctly loading the script to the client browser, a small toolbar with four buttons will appear in the top-left corner of the Document Editor.

  • The first button is used to switch between Dark and Light (default) editor display.
    • The user's preference is remembered by the browser and automatically applied when opening the editor next time.
    • To change the display, an HTML attribute <link> is used to load a pre-prepared CSS file.
    • The selectors in the CSS file are documented in case you want to adjust the default values or create your stylesheets.
  • The second and third buttons change the width of the "paper" width in the editor.
    • Making the editor page wider allows you to put more Document content on the screen.
    • The width of the paper is defined by the dleBodyMaxSize value.
    • Instead of buttons, you can also easily implement a slider by which the user can change the width of the area as needed.
  • The last button activates a Presenter mode.
    • In this mode, the document switches to a simulated fullscreen presentation similar to PowerPoint when edit functionality is disabled, pop-up menus are hidden, and the screen is zoomed in for better text readability.
    • Note: Zooming text by setting the zoom style value is not supported by the Firefox browser.

 

This example is provided as a sample implementation of HTML Snippet to give our customers a head start. It is provided as-is and it is not supported by Polarion R&D or Siemens Technical Support. The example can be modified in any way.

 

For any questions, please reach out to us at the Polarion Community Forum.

 

Example
scriptInjection.dleEditorHead=<script src="/scripts/dleTools.js"></script>

 

Known Issues

  • Switching to Presenter mode does not activate page zoom in the Firefox browser.
  • After returning from Presenter mode, items in the left navigation panel may sometimes disappear.
    • Clicking anywhere on the screen restores the menu.
  • Previews of attachments or diagrams without background with black text may cause reading problems.

 

What's New in Version 1.0.0

Updated October 2023

Version 1.0
- Initial release

Information

Vendor Siemens PLM
Published Version 1.0.0 - October 2023
Categories
Price Free
78 Downloads
Community Supported Extension This extension is not supported by Siemens PLM.
Requirements Polarion 2310 (3.23.10) and newer
Last tested with Polarion 2310 (3.23.10)

Related Extensions