Creating a consistent QlikView UI - Qlik View

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.

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.

Screen resolution

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.

If, for whatever reason, you need to create a dashboard that occupies more space than is available on screen, it is good to keep in mind that vertical scrolling is better than horizontal scrolling. Most users will be used to vertical scrolling from their web browser.

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.

If your screen resolution does not match the target screen's resolution, you can use the View | Resize Window option from the menu to resize your QlikView document window to the most common screen resolutions.

Background image

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:

The previous image does feature quite thick borders. In the interest of reducing non-data pixels, you will probably want to use a more minimalistic background in your own designs.

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

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 FilesQlikView ExamplesDeveloper 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.

Themes

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:

Creating a consistent QlikView UI

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.

Applying themes

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:

  1. Open the NoTheme.qvw file that is located in the folder
  2. ApplicationsExamples.
  3. Go to Settings | Document Properties | Layout.
  4. Click on the Apply Theme button and select the HighCloudCorporate_ finished.qvt file from the folder 0.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:

Creating a consistent QlikView UI

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.

Creating themes

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.

Creating a theme to style a complete document is no small task and involves a lot of repetitive steps. For the sake of brevity, we will only create the document and sheet sections of the theme, along with the theme for two sheet objects.

We will start by adding the document settings.

Adding document properties

Let's follow these steps to create the first iteration of our HighCloud corporate theme, based on the document properties:

  1. Select Tools | Theme Maker Wizard from the menu.
  2. Click on Next to go to the Step 1 - Select theme file dialog window.
  3. Ensure that the radio button is set to New Theme and that Template is set to <None>.
  4. Click on Next, this will open a dialog window to save our theme file.
  5. Browse to the folder o.includesThemes and name the theme file HighCloudCorporate.
  6. 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.

    Adding document properties

  7. Enable the checkboxes so that they look like the preceding screenshot and click on Next.
  8. 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.

Creating-a-consistent-QlikView-UI-Figure

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.

Adding sheet properties

Let's follow these steps to add the sheet properties to our template:

  1. Select Tools | Theme Maker Wizard from the menu and click on Next to open the Step 1 - Select theme file dialog.
  2. Set the radio button to Modify Existing Theme and select Browse from the drop-down list.
  3. Select the Highcioudcorporate.qvt file that we created earlier, and click on Next to open the Step 2 - Source selection.
  4. From the Source drop-down menu, select the object Sheet DocumentSH03 - Dashboard. (The SH03 part may be different in your document.)
  5. 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.

    Creating-a-consistent-QlikView-UI-Figure

  6. Enable the checkboxes for Color Map and Sheet Zoom and click on Next.
  7. Click on Finish to close the wizard and add the sheet properties to the HighCloudCorporate.qvt theme file.

Adding sheet object properties

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:

  1. Select Tools | Theme Maker Wizard from the menu and click on Next to open the Step 1 - Select theme file dialog.
  2. Set the radio button to Modify Existing Theme and select Browse from the drop-down list.
  3. Select the HighCloudCorporate.qvt file that we have been working on in the previous exercises, and click on the Next to open Step 2 - Source selection.
  4. From the Source drop-down menu, select the object Chart Document CH26 - Market Share. (The CH26 part may be different in your document.)
  5. Enable all three checkboxes: Object Type Specific, Caption Border, and Print Settings.
  6. Click on Next to go to Step 3a - Object type specific properties.
  7. 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.

    Adding sheet object properties

  8. Enable the Show Caption checkbox, this will ensure that our caption settings (or more specifically, no caption settings) will be included in the template.
  9. Click on Next to go to Step 3c - Printer settings.
  10. 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.

Creating-a-consistent-QlikView-UI-Figure

Let's follow these steps to add the Caption & Border and Printing settings to every object that needs similar styling:

  1. 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.
  2. In the Printing column, select every object to apply the same print settings to each object.
  3. 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.

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.

A solo exercise

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.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Qlik View Topics