/codewander-screenshot

Screenshot for Qlik sense visuals, sheet and mashups

Primary LanguageJavaScriptApache License 2.0Apache-2.0

codewander-screenshot

screen shot for Qliksense extensions

Takes Screenshot of the entire Qliksense sheet or a specfic chart Does not work in safari or IE.

Uses Dom-to-image to take screenshot of the qvobjects and downloads it as PNG.

Update: 2/13/2020 Fixed the full screen mode bug

KNOWN LIMITATION: This extension does not work in IE and Safari due to the limitations of dom-to-image library.

Demo: Screenshot in App: https://www.youtube.com/embed/vi6175O6McM Demo: Screenshot in Mashup: https://youtu.be/PVgjHb3cN3U

Download

Features

Take screenshot of a single chart component (Qliksense Extensions or Native Components)

  • You should see the download a chart icon as part of the extension.
Codewander.com-Qliksense screenshot extension
  • Once you click on the icon, all the chart components will turn into Screen shot mode with buttons on them to "Take Screenshot". The Download a chart button will change to "Eye icon" . Clicking on the "Eye icon" will take you back to normal or view mode.
  • Click on the "Take Snapshot" button of a component to download it as PNG. Sometimes the pop-up may blocked. Enable pop-up and try again.
Qliksense-screenshot-extension_Download_a_chart_3Codewander.com-Qliksense-screenshot-extension-Image of the chart

Download Full Sheet

You can download the full sheet by simply clicking on the "Download fullsheet" button either on normal mode or screenshot mode

Qliksense-screenshot-extension_Download_full_sheetQliksense-screenshot-extension_Download_full_sheet_2

Include the extension in the mashup

Include the screenshot extension in the mashup similar to other qlik visualization objects. The basic steps of including a visualization object in the mashup is explained in the Qlik help link Embedding visualizations using capability API

How to enable screenshots in mashup?

Take screenshot of a single chart object

There is no change to the method of taking screenshot of a single object. However, a new option to set the background color is given. The default color is white and it has to be in hexa color code.

Qlik-sense-screenshot-extension_coloroption Qlik-sense-screenshot-extension_container option

Take screen shot of the full page

There is a new option called Container Identifier. The DOM object element that has the entire page content has to be set here. The default value is ".qvt-sheet". The container can be identified either using the class name or the id name. If its the class name, then it has to preced with a . (dot). If its an id, then the value must precede with a # (hash).

You can generate one copy of the extension for screenshot within the Qlik native app. And another one for the mashups.

Qlik-sense-screenshot-extension_container option

Grouping a visualizations in the mashup

If you like to take screenshots by each section in the mashup, you can identify all those sections with a specific class name. Doing so, the extension will create separate screenshots for each sections, all at once.

Download all visualizations at once, separately

If you like to download all visualization separately all at once, you can set the class name to ".qv-object"

Remove Watermark

If needed, you can remove watermark from the code. If you have any difficulty doing so, please drop a note at codeatroost@gmail.com.