QlikWorld 2020 Global Conference. Join us to discover how to get the most from your data. Act fast. Register now and save.

Implementing show condition on a widget

This section describes how to implement a show condition on a widget. This means that the widget is displayed only after the condition is fulfilled. Use the ng-show and ng-hide directive to conditionally show objects within your widget, depending on the properties set in the properties panel.

Example: Basic show and hide conditions

In this example, we want to show details only if a property has been selected.

Creating a custom property for the show condition

To implement the show condition, first create a property in the properties panel builder. Create a custom property for the show and hide condition.

  1. Click @ to go into edit mode.
  2. Add a Header item from Available components to the Appearance section. Its default name is Settings.
  3. Click V to expand the newly added Settings element.

    Add a Checkbox item from Available components to the Settings section. Its default name is Property1.

  4. Click V on the newly added Property1.

    Add a label: Show Details

    Add a default value of the new property: False.

    Change the reference: showDetails.

    Note: Note that the code reference is settings.showDetails.
  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.

Implement show condition in HTML

Add the ng-show and ng-hide directives in the HTML.

<div ng-show="true">
    The condition has been evaluated to TRUE
</div>
<div ng-hide="true">
    The condition has been evaluated to FALSE
</div>

Now replace the conditions with a reference to the settings.showDetails property. The easiest way to do this is to use the Insert option in the HTML editor. Switch to the Property references view and select Settings from the drop-down list.

Insert the value inside of ng-show and ng-hide respectively.

<div ng-show="settings.showDetails">
    The condition has been evaluated to TRUE
</div>
<div ng-hide="settings.showDetails">
    The condition has been evaluated to FALSE
</div>

Example: Show and hide a table

In this example, we want to display the table only if the user has made a selection in a dimension.

Prerequisites

For this example, a new app has been created: Sample data app. It has been loaded with data from the sample data script, using Ctrl+0+0 in the Data Load Editor; for more information about using Ctrl+0+0 with the Data Load Editor, see Inserting a prepared test script. Dim1, Dim2, Sum(Expression1) and Sum(Expression2) has been added to a table on a sheet in the Sample data app to get an overview of the dimensions to work with.

The Sample data app has been selected in the Widget editor.

Table showing the dimensions and measures used in this example

Creating a simple table

Create a simple table in the Widget editor.

<div class="wrapper">
<div class="top-header">
{{layout.title}}
</div>
<table>
	<thead>
		<tr>
			<th ng-repeat="head in data.headers track by $index" class="header" ng-click="head.orderBy()">{{head.qFallbackTitle}}
		</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="row in data.rows track by $index">
		  <td ng-repeat="cell in row.cells track by $index" ng-click="cell.select()" class="selectable"> {{cell.qText}} </td>
		</tr>
	</tbody>
</table>
</div>

Adding the hypercube

Set up the hypercube in the properties panel builder.

  1. Click @ to edit.
  2. 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.

    Change the Min and Max for Dimensions to 2 for both

    Change the Min and Max for Measures to 2 for both

  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 finish editing.

In the properties panel builder add the following dimensions and measures:

  • Dim1 as dimension. Deselect Show null values.
  • Dim2 as dimension. Deselect Show null values.
  • Sum(Expression1) as measure
  • Sum(Expression2) as measure

The table should now look like this:

Creating a custom property for the show condition

In this example, we want to display the table only if the user has made a selection in Dim2. To implement the show condition, first create a property in the properties panel builder.

  1. Click @ to go into edit mode.
  2. Add a Header item from Available components to the Appearance section. Its default name is Settings.
  3. Add an Input field item from Available components to the Settings section. Its default name is Property1.
  4. Click V on the newly added Property1.

    Add a default value of the new property: =GetSelectedCount(Dim2)>=1.

    This expression checks if a selection has been made in Dim2 and returns either 0 (false) or -1 (true).

    Note: Note that the code reference is settings.property1.

  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 finish editing.

Implement show condition on the table

Add the ng-show directive to a div and put the table inside it.

  <!-- Display table only if "GetSelectedCount(Dim2)>=1" returns true. -->
  <div ng-show="settings.property1 === '-1'"> 

Add a message to be displayed if the show condition returns false.

<!-- Display only if "GetSelectedCount(Dim2)<1" returns false. -->
  <div ng-show="settings.property1 === '0'"> 
  	Select at least one value in dimension Dim2.
  </div>

Code used

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?