In the chapter on building dashboards, we looked at the various QlikView objects and how we can create and configure these objects. This chapter will expand your knowledge further, not aiming for mere technical competency, but it will also giving you some solid rules of thumb that will help you create good QlikView documents.
This chapter consists of two sections. The first focuses on some best practices for creating a consistent user interface in QlikView.
The second section looks at how we can add additional interactivity to our documents.
Let's get started.
As mentioned earlier in the Building Dashboards chapter, we will want to make sure that the user interface, which includes language, layout, and design, is as consistent as possible. A consistent user interface makes it predictable for the user, they will have a better understanding of how things work, and will feel more in control.
Tip
Before you start, understand the users and their goals
Before you start designing your QlikView document and the UI, it is key that you first understand the users and their goals. Only when you are familiar with the goals of the document can you design an interface that will help the users achieve those goals.
One straightforward example, which we've seen while developing our document, is to place objects in the same location if they're being used on multiple sheets. If, for example, the current selections box is always in the same place, then the user will immediately know where to look for it. The linked object feature is the best way to enforce this.
One of the big no-no's in dashboard design is to create a dashboard that occupies more space than the user's screen size. This will require the user to scroll around to see the information.
The easiest way to prevent this is to find out what default screen resolution is used by your users. Or, if there is more than one, what the lowest common denominator is. When this resolution is known, you can design all of your sheets and documents to fit within it.
One way to give your document a consistent look-and-feel on each sheet (and even between documents) is to use a background image. Usually, a background image has a few predefined panels where objects can be placed. The following image shows an example of a background image:
When setting up a background image, either at the Document Properties or Sheet Properties level, it is important to configure the following settings:
- Image Formatting should be set to No Stretch
- Horizontal should be set to Left
- Vertical should be set to Top
- Background Color should be set to a color that matches the background color of the image so that the edges of the background image blend in with the rest of the background
Tip
QlikView Developer Toolkit
Creating a background image can be done using an image editor such as Photoshop. If you do not have access to an image editor, or if you're not really artistically inclined, QlikView installation has the Developer Toolkit included. This toolkit can be found in the folder C:Program FilesQlikViewExamplesDeveloper Toolkit and includes around 100 predefined backgrounds to use in your QlikView documents.
Of course, you can use multiple background images to fit the different requirements of the sheets in your document. For example, you can use a background with two horizontal panels for your dashboard sheet, while using a background with three vertical panels for your analysis sheet.
While using background images can go a long way in standardizing the look and layout of your QlikView document, when you really want to standardize—for example, to enforce a corporate style—themes are what you need.
A theme
is stored in an external XML file with a .qvt extension. It contains separate sections for each type of object, document, sheet, and the various sheet objects. For each of these objects, the object-specific properties are stored, as well as caption and border properties and print settings. You can even store only part of the settings, for example, adding the font type of a chart's axis to a theme while ignoring its font color.
The following diagram shows the Theme File structure. Notice that there is a separate section for each type of Sheet object:
A theme is created using the Theme Maker Wizard and can contain settings for as many or few objects as you want, from a single setting for a single chart type to the entire look-and-feel of the document.
As theme files store properties at various levels (document, sheet, and object), we can apply them at various levels too. Let's start with a practical example that shows how to apply a theme to a complete document:
- Open the
NoTheme.qvwfile that is located in the folder4.ApplicationsExamples. - Go to Settings | Document Properties | Layout.
- Click on the Apply Theme button and select the
HighCloudCorporate_finished.qvtfile from the folder0.IncludesThemes.
The result now looks similar to the style we've been using in our own documents. Notice how, among other things, the background image, colors, and caption settings have changed once we applied the theme:
As was said before, themes do not always need to be applied to the entire document.
We can apply a theme to a single sheet, by selecting Settings | Sheet Properties and clicking on the Apply Theme button on the General tab.
We can also apply a theme to a single object (or a group of objects, if we first select them) by opening the Object Properties window (right-click on the object, or group of objects, and select Properties...) and clicking on the Apply Theme button on the Layout tab.
Now that we've seen how to apply themes, let's see how we can create them.
A theme is always created by copying the properties of documents, sheets and sheet objects which were already created. As we already spent quite some time styling our document, we can use it as a base for a HighCloud corporate theme.
We will start by adding the document settings.
Let's follow these steps to create the first iteration of our HighCloud corporate theme, based on the document properties:
- Select Tools | Theme Maker Wizard from the menu.
- Click on Next to go to the Step 1 – Select theme file dialog window.
- Ensure that the radio button is set to New Theme and that Template is set to <None>.
- Click on Next, this will open a dialog window to save our theme file.
- Browse to the folder
0.IncludesThemesand name the theme fileHighCloudCorporate. - In the Step 2 – Source selection dialog window, select Document from the Source drop-down list and click on Next.
We have now reached the Step 3a-Object type specific properties dialog window, seen in the following screenshot. Depending on which type of object we've chosen, this dialog will show all properties that we can export to the theme file. Note there are some omissions to what can be exported to a theme, and some of the legends in the list are not entirely helpful with defining what it is you are theming.
- Enable the checkboxes so that they look like the preceding screenshot and click on Next.
- Click on Finish to close the Theme Maker Wizard wizard and save the theme.
We have now reached the end of the Theme Maker Wizard dialog for the document properties. Before we start on the sheet properties theme, let's first look at the final dialog window of the wizard. In the Step 5 - Save theme dialog window, seen in the following screenshot we can decide if we want to set the created theme as a default for the current document, or set it as a default for all new documents. We've skipped this option for now, but when you have created your own corporate theme, it may be worthwhile to set it as a default theme for all new documents.
Tip
Out of style
You can always reset the default theme for the document by selecting the Settings | Document properties from the menu and changing the Default Theme for New Objects drop-down on the Presentation tab.
To reset the default theme for all new documents, select Settings | User Preferences from the menu and change the Default Theme drop-down list on the Design tab.
Now that we've added the document properties, in the next section we will add the sheet properties.
Let's follow these steps to add the sheet properties to our template:
- Select Tools | Theme Maker Wizard from the menu and click on Next to open the Step 1 – Select theme file dialog.
- Set the radio button to Modify Existing Theme and select Browse from the drop-down list.
- Select the
HighCloudCorporate.qvtfile that we created earlier, and click on Next to open the Step 2 – Source selection. - From the Source drop-down menu, select the object Sheet DocumentSH03 – Dashboard. (The SH03 part may be different in your document.)
- Click on Next to go to Step 3a – Object type specific properties.
As we can see in the following screenshot, the objects listed in this dialog window are different from those listed at the document level. Also note that, as we are modifying an existing theme, the options that are shown as selected are those that are currently already included in the theme. These were inherited from the document-level properties.
- Enable the checkboxes for Color Map and Sheet Zoom and click on Next.
- Click on Finish to close the wizard and add the sheet properties to the
HighCloudCorporate.qvttheme file.
Now that we have added the sheet properties to our template, we will add the properties for two sheet objects: the list box and the pie chart. First, let's add the pie chart by following these steps:
- Select Tools | Theme Maker Wizard from the menu and click on Next to open the Step 1 – Select theme file dialog.
- Set the radio button to Modify Existing Theme and select Browse from the drop-down list.
- Select the
HighCloudCorporate.qvtfile that we have been working on in the previous exercises, and click on the Next to open Step 2 – Source selection. - From the Source drop-down menu, select the object Chart DocumentCH26 – Market Share. (The CH26 part may be different in your document.)
- Enable all three checkboxes: Object Type Specific, Caption Border, and Print Settings.
- Click on Next to go to Step 3a – Object type specific properties.
- This dialog is the same as we saw when we were adding the document and sheet properties to the template. Leave all of the settings set to their default value and click on Next to go to Step 3b – Caption and border settings.
As the name implies, in the Caption and border settings dialog window, shown below, we can select which settings are related to borders and captions. As we will see later, we can apply these settings not only to the object we're adding to the template, but also for other objects. In practice, this means that when we create a complete document template we will only need to add these properties twice; once for objects with a caption, such as listboxes, and once for objects without a caption, such as charts.
- Enable the Show Caption checkbox, this will ensure that our caption settings (or more specifically, no caption settings) will be included in the template.
- Click on Next to go to Step 3c – Printer settings.
- Leave all of the settings to their default value and click on Next to go to Step 4 – Insertion of properties in theme.
In this dialog window, shown in the following screenshot, we can specify which objects we want to apply the Caption & Border and Printing settings to.
Let's follow these steps to add the Caption & Border and Printing settings to every object that needs similar styling:
- In the Caption & Border settings column, select the Button, Line/Arrow Object, Slider/Calendar Object, Container, Chart and Search Object checkboxes. None of these objects by default need a caption.
- In the Printing column, select every object to apply the same print settings to each object.
- Click on Next and then on Finish to save the theme.
We have now added the properties for the pie chart to our template, which already contained the document and sheet properties.
Tip
Separate themes for separate objects
As you can see in the Insertion of properties in theme dialog window, the settings for all charts are stored in a single Chart type. This can create difficulties when you want to apply different settings to different charts. For example, showing a grid for line charts, but hiding it for bar charts. In that case, it is easier to create separate theme files for each of your chart objects.
By now, you have probably spotted the pattern of creating and adding settings to a theme file, so it is time for a little solo exercise. We still need to add the list box properties based on the Flight Type list box to our theme. Make sure to pay special attention to the Show Caption setting as we want to ensure that a caption is displayed on our list boxes. Besides the list box, make sure to apply the Caption & Border settings to the following objects as well:
- Statistics Box
- Multi Box
- Table Box
- Input box
- Current Selections Box
- Bookmark Object
If you are able to successfully complete this exercise, then you have all of the skills necessary to create and modify your own themes.
You can test your new theme file by applying it to the NoTheme.qvw file that we used earlier in this chapter.