Branding QlikView application

Front End Document Extension POC

Brian Munz - Last Updated 4/26/2013

The idea for this extension was to imagine that a company had a very specific set of branding guidelines. This might include a set of colors, a font, a logo, etc. Also, it should be imagined that this company wanted to have some specific UI and layout properties across all of its apps. Finally, this company would like to have some functionality which allows the apps to be more easily viewed, and for this to be on all of their apps. A document extension would be a potential way to achieve this. The company would simply tell all of their QlikView developers to include this extension, and all of the apps would then follow this same formatting. Before To demonstrate this possibility, a very ugly app was created:

After After applying a document extension, the app was transformed into this:

QlikView v11 Extension Examples

Each change and added feature is addressed below:

1. Company logo - Code was added to the document extension which pre-pended the company logo to the body of the QVW. This was done using JavaScript and CSS. The rest of the content in the QVW was shifted down in order to ensure there was no overlap or intrusion. 2. Background image - A background image was added to the body of the document using JavaScript and CSS. This background image provides the green bar at the top of the page as well as the grey dividing line to separate the logo section from the actual document content. QlikView v11 Extension Examples

3. Re-styled the Search Box - The image of a magnifying glass and the border was removed from around the search box using CSS and JS. 4. Re-styled and moved tabs - The SetTabrowPaint method was used to rewrite the code for the sheet tabs. Then, CSS was used to arrange these tabs as a left navigation. This left navigation pushes the page content to the right so as to not interfere with any content. Also, a color was added to the left navigation and a drop shadow was added using CSS3. 5. Zoom functionality - Two buttons were created in JavaScript allowing the user to zoom in and out of the document. These buttons were then prepended to the top of the document using the extension. 6. Font and Caption re-styling - A tool called Cufon (http://cufon.shoqolate.com/generate/) was used to target the captions and tab titles to a non-web-standard font. This is meant to simulate a company wanted its corporately branded font to be used in certain places on the document. To do this, a developer would simply need to load this font into Cufon and use it to replace certain text. 7. Scrollbar re-styling - The colors of the scrollbar elements were modified using CSS and JavaScript to make them in line with the imagined brand guidelines. 8. Font change - Beyond changing some fonts to a non-web-standard font, some fonts were changed to a more standard font. Through CSS, the listbox fonts were changed to Arial and the size of the font was increased slightly. Overall, this was meant to be a somewhat simple example of how a user might target and manipulate elements in a QVW using JavaScript, CSS, and QlikView API methods. If a user or company wished to include a given feature or styling across all of their documents, it could be a somewhat easy way to quickly alter their QVWs into adopting certain UI styling or features.

QlikView v11 Extension Examples