Customizing the QlikView User Experience

Much of the QlikView User Experience (UX) is customizable. For example, we can develop ways to guide users through a well-defined series of reports or give them the power to create their own reports. We can also allow them to change the interface's language or the currency. In this section, we will create the following UX components:

  • Quick access to supplementary information
  • Dynamic data visualization
  • Regional settings

Quick access to supplementary information

When users notice something interesting in concise visualizations such as numbers, sparklines, and bullet graphs, they often want to take a glance at the details that compose it. For example, in our customer fact sheet, we want to quickly analyze the detail behind the high-level comparison between actual and budget sales. During the design stage we chose to open a detailed comparison by item when the user clicks on vs. Budget, as shown in the following figure:

Quick access to supplementary information

Exercise 8.4

Let's create the following variable:

Variable

Label

Value

vCustomerFactSheetPopUp

None

  1. Adjust the position of the detailed bullet graph that we created in exercise 8.2.
  2. In the Layout tab of the chart's properties, enable Custom in the Layer section and set it to 3.
  3. Also in the Layout tab, enable the Conditional option in the Show section and enter the following code in the expression field:
    =vCustomerFactSheetPopUp='BudgetDetail' 
  4. Create an empty text object that spans the whole fact sheet.
  5. In the General tab of the text object change the background color to a transparent gray.
  6. In the Layout tab, enable Custom in the Layer section and set it to 2.
  7. Also in the Layout tab, enable the Conditional option in the Show section and enter the following code in the expression field:
    =vCustomerFactSheetPopUp<>'None' 
  8. In the Actions tab, create a Set Variable action with the following values:

    Action

    Label

    Value

    Variable

    vCustomerFactSheetPopUp

    Value

    None

  9. Create a text object that contains the following text:
    Vs. Budget
  10. In the Actions tab, create a Set Variable action with the following values:

    Action

    Label

    Value

    Variable

    vCustomerFactSheetPopUp

    Value

    BudgetDetail

If everything works correctly, then the detailed bullet graph will appear in front of a transparent, gray background. When we want to close the detail and go back to the general view of our customer fact sheet, we click on the grayed-out background. We could also create a Close button, but it is now common UX practice to close a pop-up window by clicking anywhere else on the screen.

As only one pop-up window will appear at any one time, we use one variable to determine which popup is displayed. One variable is obviously easier to maintain than having one for each corresponding popup. However, if we want to give the users the ability to open as many detailed charts as they like, then we would have to create a control variable for each popup.

Dynamic data visualization

It is relatively easy to create a dynamic straight table or pivot table in QlikView and we can find examples in various demos to imitate. However, it can be a challenge to create a simple way for users to make their own attractive graphic charts in a server environment. Qlik Sense is the ultimate tool for users who want to create their own charts and stories, but we can also give users the power to build insightful, ad-hoc data visualization in QlikView. The following chart was created using a few variables that users can readily modify in a server environment:

Dynamic data visualization

Exercise 8.5

Let's create the following variables:

Variables

Label

Value

vNumDimensions

1

vChartTitle

Please add the chart's title here.

vSortMetric

=pick(match('|' & GetFieldSelections(_SortMetric,'|') & '|'
, '|Net Sales|' , '|Gross Profit|'
, '|Volume|'),'sum({$<_ActualFlag={1}>} 
     [Net Sales USD])','sum({$<_ActualFlag={1}>} 
     [Gross Profit USD])','sum({$<_ActualFlag={1}>} [Quantity])') 

vColorMetric

=pick(match('|' & GetFieldSelections(_ColorMetric,'|') & '|'
, '|Net Sales|' , '|Gross Profit|'
, '|Volume|'),'sum({$<_ActualFlag={1}>} 
     [Net Sales USD])','sum({$<_ActualFlag={1}>} 
     [Gross Profit USD])','sum({$<_ActualFlag={1}>} [Quantity])')

vAscDsc

Dsc

vAscDscNum

=if(vAscDsc='Asc',1,-1) 

vColorScheme

Diverging

vNumDimensionValues

10

  1. Add vChartTitle, vNumDimensions, vNumDimensionValues, vAscDsc, and vColorScheme to an Input Box.
  2. In the Constraints tab, set the Input Constraints for vNumDimensions, vAscDsc, and vColorScheme to Predefined Values Only and disable the Enable Edit Expression Dialog option. For the same variables, select the Value List as Predefined Values in Drop-down and enable Listed Values in the Predefined Values section. The list values should be the following for each variable:

    Variables

    Label

    Listed Values

    vNumDimensions

    0;1;2;3

    vAscDsc

    Asc;Dsc

    vColorScheme

    Diverging;Sequential 

  3. Create four list boxes for the _Metric_LeftAxis, _Metric_RightAxis, _ColorMetric, and _SortMetric fields and insert them in a container.
  4. Create a bar chart with the following dimensions and metrics:

    Dimensions

    Label

    Value

    Dimension 1

    A cyclical dimension with the following fields:

    Billing State
    Customer
    Item
    Sales Person
    Year
    Month

    Dimension 2

    A cyclical dimension with the same fields as Dimension 1

    Dimension 3

    A cyclical dimension with the same fields as Dimension 2

    Expressions

    Label

    Value

    Net Sales

    sum({$<_ActualFlag={1}>} [Net Sales USD]) 

    Gross Profit

    sum({$<_ActualFlag={1}>} [Gross Profit USD]) 

    Volume

    sum({$<_ActualFlag={1}>} Quantity) 

  5. In the General tab, enable all the Fast Type Change options except Gauge Chart.
  6. In the Dimensions tab, tick the Enable Conditional option for all dimensions and place the following values for each of them:

    Dimensions

    Label

    Value

    Dimension 1

    vNumDimensions>=1 

    Dimension 2

    vNumDimensions>=2 

    Dimension 3

    vNumDimensions=3

  7. In the Expressions tab, tick the Conditional option for all expressions and place the following values for each of them:

    Expressions

    Label

    Value

    Net Sales

    SubStringCount(
    '|' & GetFieldSelections(_Metric_LeftAxis,'|') & '|'
    , '|Net Sales|') 

    Gross Profit

    SubStringCount(
    '|' & GetFieldSelections(_Metric_LeftAxis,'|') & '|'
    , '|Gross Profit|') 

    Volume

    SubStringCount(
    '|' & GetFieldSelections(_Metric_LeftAxis,'|') & '|'
    , '|Volume|') 

  8. In the Background Color attribute expression run the Color Mix Wizard twice using the expression, $(vColorMetric). In the first run-through select a sequential color scheme from light blue (247, 251, 255) to dark blue (8, 48, 107). In the second run-through select a diverging color scheme from dark red (178, 24, 43) to dark blue (33, 102, 172) passing through a light gray (247, 247, 247) at 0. Place the resulting color mix functions into the following if-statement:
    if(vColorScheme = 'Diverging',ColorMix2 (…),ColorMix1 (…)) 

    Use the same code for the background color of every expression.

  9. Copy and paste a duplicate of each expression so that there is a total of six expressions. In the duplicate expression replace _Metric_LeftAxis in the Conditional expression with _Metric_RightAxis.
  10. In the Sort tab, tick the Override Group Sort Order option and then tick the Expression option and insert the following code in the expression field:
    =$(vSortMetric)*vAscDscNum 

    Repeat the same steps for every dimension.

  11. In the Presentation tab, tick the Enable X-Axis Scrollbar option and insert the following code in the expression field:
    =vNumDimensionValues
  12. In the Axes tab, select the duplicate copy of each expression and enable Right (Top) in the Position section:
  13. In the Numbers tab, adjust each expression's number format and symbols, appropriately:

The user now has a way to create custom visualizations using only a few variables. We can continue to create more variables to control the property options defined by an expression field or preconfigure certain properties that can only be modified in the properties windows. However, the result of the previous exercise allows users to create the best possible charts using the fewest variables.

The cyclical dimensions are also more user friendly as they are located next to their axis or legend. We create three of them because graphs may use a maximum of three dimensions. Each should be sorted each dimension alphabetically or numerically by default, but we can easily select an expression by which to sort them in either ascending or descending order. We've also added a variable to limit the number of dimension values as there are often more than those that can fit in a graph at one time.

The metrics are divided by left and right axis as it is common practice to visualize two metrics that do not share the same scale. We also include the ability to add a heat map to the custom visualization to make them more insightful. The heat map can either be sequential, if the metric can only be positive, or it can be diverging if the metric can also be negative.

Although it seems like we use few variables in comparison to the hundreds that exist in the chart properties windows, the users can create a wide variety of different visualizations. Users who want the ability to create even more personalized charts should start working with Qlik Sense, which we will review in Chapter 11, Mastering Qlik Sense Data Visualization.

Regional settings

Currency, language, date formats, commas, and decimals can change depending on the region and users often become more engaged in the data discovery process when the effort has been made to respect their regional preferences. Some options, such as currency, are best left to the user to select, while others, such as date formats, should be automatic.

Currency

Contrary to what we may think, the currency used to analyze data does not depend on a user's country. Although some analysis may be done using the local currency, it is common to analyze data using one of the reserve currencies, such as the US dollar or the Euro. For this reason, we often add a currency filter to the user interface.

Currency

The values of the currency field correspond to the names given to the monetary amount fields in the data model, such as [Net Sales LC] and [Net Sales USD]. In this way, we can easily make our application multicurrency using the following code:

sum({$<_ActualFlag={1}>} [Net Sales $(=Currency)]) 

Language

In a similar way to how we make our application multicurrency, we also make it multilingual. We create a table with one field called Language that contains values that correspond to the field names in another table that contain the texts belonging to each language:

Language
Language

Then, in every multilingual label, we use the following code to calculate a label. We use a descriptive ID, like Sales, for our labels so that we can identify expressions and objects without having to manually look up numerical IDs in a table:

=only({$<LabelID={'Sales'}>} $(=Language)) 

Along with the labels, we also choose which descriptive field to use for list boxes and dimensions. For example, we have two fields in our Customer table that describes customer groups. [Customer Group ENG] contains English descriptions and [Customer Group ESP] contains Spanish descriptions. We use the following code as an expression in our list box or as a calculated dimension:

=[Customer Group $(=Language)] 

Although we give the user the option to select any language, the application should open in the user's preferred language. One way to do this is to distribute a copy of the QlikView file with

the language prefiltered by the QlikView Publisher. Another way is to use section access to reduce a field that we use to select the preferred language upon opening the QlikView document.

Date and number formats

Date and number formats depend on the country and it should be automatically selected when opening the QlikView document. We use a set of variables that return the preferred formats based on a user's region along with the formatting functions, num() and date() in order to dynamically format the data.

We can define a user's region using Section Access. The following code is an example of how the dynamically formatted expressions will look:

date([Date],$(vRegional_DateFormat))
num(sum(Quantity),$(vRegional_NumberFormat_FixedDecimal)
    ,$(vRegional_Decimal),$(vRegional_Thousand))

Customer Fact sheet n QlikView

In the following figure, we bring together text objects, bullet graphs, sparklines, and the dynamic chart to create the customer fact sheet that we designed using Post-it notes and a whiteboard:

Customer Fact sheet n QlikView

Create the pending expected sales chart in the next chapter and review the cross-selling chart extensions in Chapter 11, Mastering Qlik Sense Data Visualization.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset