Creating a branded KPI widget

This section describes how to create a branded KPI widget, including styling, and how to bind data to it.

Creating a new widget

Before proceeding with this tutorial, make sure that you have a widget library. If you do not have a widget library, you must create one.

Widgets can be created in different ways:

  • From the ú menu on the Dev Hub start page.
  • From the M menu inside the Widget editor when a widget library has been opened.

Do the following:

  1. In Dev Hub, click ú, then select Create new widget.
  2. In the Create new widget dialog, fill in the details to identify your widget library:

    • Enter a name for the widget. In this example we call it MyBrandedKPI.
    • Select the widget library you just created: my-widget-lib.
    • You can designate a type for the widget, but it is not mandatory. For this example, from the Widget type drop-down list, select KPI.
    • If you wish, add a text description and author for the widget.
  3. Click Create.

    The Widget editor opens and the MyBrandedKPI widget is highlighted in the list of widgets in the open library

Creating the widget skeleton

Start by creating some simple HTML code in the HTML editor to visualize a KPI object, without binding any data to it. In this example, we know that the widget should contain a header section with a brand logo, a content section for the actual KPI, and a common footer section.

<div class="frame">
    <div class="header">
      
    </div>
    <div class="content">
      
    </div>

    <div class="footer">
      
    </div>
</div>

Adding some basic styling

Add some basic styling for the HTML classes just added.

.frame{
  width:100%;
  height:100%;
  box-sizing: border-box;
  overflow: hidden;
}
.header{
  width:100%;
  height: 100px;
  position: absolute;
  top: 0;
  box-shadow: -1px 9px 13px -6px rgba(0,0,0,0.75);
  background-color: white;
}
.content {
	position: absolute;
	width: 100%;
	height: calc( 100% );
	top: 25px;
	text-align:center;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	flex-direction:column;
}
.footer{
  position:absolute;
  width:100%;
  height:50px;
  padding-left: 20px;
  box-sizing: border-box;
  bottom:0;
  box-shadow: -1px -6px 13px -6px rgba(0,0,0,0.75);
  background-color: white;
}

Adding the data component

The KPI object should contain one calculation (a measure). Therefore, a data component must be added in the properties panel builder.

Do the following:

  1. Select an app to view the properties panel. In this example, we selected the Helpdesk Management app that is provided with Qlik Sense Desktop.

  2. At the bottom of the properties panel builder, click @ to go into edit mode. Add the Data component by dragging it from its section under Available components to the property panel and drop it where the Place here message appears.
  3. Click V on the newly added Data component. Make sure the Min and Max for Dimensions is 0 and the Min and Max for Measures is 1.
  4. Click Done when ready to close the dialog and then click m at the bottom of the properties panel builder to apply your changes and exit edit mode.

Adding a color property

It should be possible to change the color of the widget. To do this, a color property must be added in the properties panel.

Do the following:

  1. At the bottom of the properties panel builder, click @ to go into edit mode. Select Appearance in the properties panel. Expand the General section in the properties panel. Add a new component by dragging a Header from its section under Available components to the property panel and drop it inside the Appearance component.

    Its default name is Settings.

  2. Click V on the newly added Settings component.

    Change the label to Color.

    Click Done when ready to close the dialog.

  3. Expand the Color section. Add another component by dragging a Dropdown list from its section under Available components to the property panel and drop it inside the Color component.

    Its default name is Property1.

  4. Click V on the newly added Property1 drop-down list. Change the label to Color.

    Click Add to add the following drop-down options:

    • Value: green: Label: Green
    • Value: blue: Label: Blue

    Select Green as default value.

    Define color as the reference for the property.

    The property should look like this:

  5. Click Done when ready to close the dialog and then click m at the bottom of the properties panel builder to apply your changes and exit edit mode.

Referencing color in the HTML

Inside the <div class="frame"> tag, add a reference to the color property in the HTML.

<div class="frame" ng-class="settings.color">

Binding the widget to hypercube data

Inside the <div class="content"> tag , add two lines referencing the values from the measure:

  • One <h1> containing the title of the measure.
  • One <h2> containing the calculation of the measure.
    <div class="content">
	  <h1>{{data.headers[0].qFallbackTitle}}</h1>
	  <h2>{{data.rows[0].measures[0].qText}}</h2>
    </div>

Adding a measure

Add a measure for the KPI to display. In this example, we selected Avg Case Duration. To apply a two-decimal number format for the measure value, click on Avg Case Duration in the properties panel. Select Number from the Number formatting dropdown list. In the Formatting dropdown list, select 1,000.12.

Adding a header and a footer

Add a reference to an image as the header and add a reference to another image as the footer.

<div class="header">
    <div class="header-logo-wrapper">
        <img class="header-logo" alt="Qlik Sense" src="../resources/img/logo/sense-desktop.png">
    </div>
</div>
<div class="footer">
    <div class="footer-slogan"> Lorem ipsum dolor sit amet ™ </div>
    <div class="footer-logo-wrapper">
        <img alt="Qlik Sense" src="../resources/img/logo/devhub_logo_no_icon.png">
    </div>
</div>

Adding additional styling

Add additional styling to the KPI object.

Style the green and blue color properties:

@green: #61a729;
@green-darken: #529a18;

@blue: #52a2cc;
@blue-darken: #468bb0;

.blue{
  background: linear-gradient(45deg, @blue-darken 0%, @blue 100%); 
}
.green {
  background: linear-gradient(45deg, @green-darken 0%, @green 100%); 
}

Style the additional header-logo-wrapper entry:

.header-logo-wrapper{
  height: 100%;
  padding: 20px 0 0 20px;
  box-sizing: border-box;
  background-color: white;
  float: left;
}

Style the additional footer entries:

.footer-logo-wrapper{
  height: 100%;
  padding-right: 20px;
  padding-top: 5px;
  background-color: white;
  box-sizing: border-box;
  float: right;
}
.footer-slogan {
  float:left;
  font-size: 14pt;
  color: black;
  height:50px;
  line-height: 50px;
  font-style: italic;
}

Style the <h1> and <h2> additions:

h1 {
  font-size: 50pt;
  color: white; 
  font-style: italic;
  text-transform: uppercase;
  -webkit-transition: font 0.2s; /* Safari */
  transition: font 0.2s;
}

h2 {
  font-size: 100pt;
  color: white; 
  font-style: italic;
  text-transform: uppercase;
  transition: font 0.2s;
}

Making the widget responsive

Add responsiveness styling to the widget.

.frame[max-width~="550px"] {
  .header-dash, .footer-dash {
	display: none;
  }
  .footer-slogan {
	display: none;
  }
  h1 {
    font-size: 50pt;
  }

  h2 {
	font-size: 100pt;
	
  }
}

.frame[max-height~="500px"] {
 h1 {
    font-size: 40pt;
  }

  h2 {
	font-size: 70pt;
	
  }
}

.frame[max-width~="440px"] {
  .header-logo-wrapper{
	width: 100%;
	float: none;
	line-height: 100px;
	text-align: center;
	padding: 10px 0 0 0;

  }
  .header-logo{
	height:40px;
	width:auto;
  }

  .footer-logo-wrapper{
	text-align: center;
	float: none;
  }
  h1 {
    font-size: 40pt;
  }

  h2 {
	font-size: 70pt;
	
  }
}

.frame[max-height~="400px"] {
 h1 {
    font-size: 20pt;
  }

  h2 {
	font-size: 50pt;
	
  }
}

.frame[max-width~="280px"] {

  .header-logo{
	height:30px;
	width:auto;
  }
  h1 {
    font-size: 20pt;
  }

  h2 {
	font-size: 50pt;
	
  }
}

.frame[max-height~="300px"] {
  h1 {
    font-size: 15pt;
  }

  h2 {
	font-size: 25pt;
	
  }
}

.frame[max-height~="250px"] {
  .header{
 	display:none;
  }
  .footer{
 	display:none;
  }
  .content{
 	top: 0;
  }
}

Result and full code

If the HTML, CSS and the properties have been defined correctly, the widget should look something like this:

Refer to the Branded KPI widget, part of the widget-examples package that is provided with the installation.