はじめに

このエントリではボタンを押したり、プルダウンリストから選択を行うことで変数の値を変更するウィジェットの作成方法をご紹介します。これにより、メジャーの計算式に埋め込んだ変数の値を変更したり、チャートの軸を動的に変えたりなど、より自由度の高いデータ分析が行えるようになります。

ここでは、「Qlik Sense ウィジェット(Widget)開発入門(2): アクションボタンの作成」でご紹介したアクションボタンの作成方法をベースとして、以下の様な形で3つのボタンをクリックすることでチャートの軸を変更できる処理を組み込みます。その例を通じて、変数値の変更を行うためのウィジェットの作成方法をご説明します。

image

変数値の変更を行うボタングループ作成

新規ウィジェットの作成

作成済みの「wiget-tutorial」ウィジェット・ライブラリを開いた状態で、左上のメニューから「Create new widget」を選択します。

5_thumb4_thumb

「Name」の欄に「変数ボタングループ」と入力し、「Create」をクリックします。

1

右上のアプリ選択プルダウン上で任意のアプリを選択してプレビューを表示させます。

2_thumb1

ボタングループの追加

ここでは3つのボタンを追加し、各ボタンをクリックすることで変数の値を切り替えれるようにします。そのためにここでは3つのボタンを含んだボタングループを追加します。

HTMLエディタ上で「Insert」ボタンをクリックします。

2

一覧から「LUI Button group」を選択し、「Insert」をクリックします。

3

プロパティの追加と設定

プロパティには、変更を行う対象の変数名を指定するプロパティ、そしてさきほど追加した3つのボタンそれぞれがクリックされた時に変数に格納する3つの値の計4個のプロパティを追加します。

画面右下のプロパティパネルの「Edit」ボタンをクリックします。

9_thumb1_thumb[3]

「Header」を追加してその配下に4個の「Input field」を追加し、以下の設定を行います。

プロパティ1つ目

  • Label: 変数名
  • Reference: variable

プロパティ2つ目

  • Label: 値1
  • Reference: val1

プロパティ3つ目

  • Label: 値2
  • Reference: val2

プロパティ3つ目

  • Label: 値3
  • Reference: val3

image

画面右下のプロパティパネルの「Edit」ボタンをクリックしてプロパティの編集を完了します。

14_thumb1_thumb

変数値の変更処理の定義

ここでは、追加した3個のボタンにアクションを定義するために、前回の「Qlik Sense ウィジェット(Widget)開発入門(2): アクションボタンの作成」でご説明したng-clickを利用します。そして、クリックされた時の振る舞いとして変数値の変更を行う処理を組み込みますが、それを行うためのAPIとして以下の2つが提供されており、ここでは文字列を使って変数の値を設定するqlik.app.variable.setStringValue(変数名, 値) を利用します。

  • qlik.app.variable.setStringValue(変数名, 値) : 変数に文字列を使って値を設定する
  • qlik.app.variable.setNumValue(変数名, 値) : 変数に数値を使って値を設定する

引数の変数名と値は、さきほど追加したプロパティの参照して利用します。またボタンのラベルもプロパティを参照して表示します。

HTMLエディタ上で以下の赤字部分を追加・修正して保存します。

<div class="lui-buttongroup">
	<button ng-click="app.variable.setStringValue(settings.variable, settings.val1)" class="lui-button">
		{{settings.val1}}
	</button>
	<button ng-click="app.variable.setStringValue(settings.variable, settings.val2)" class="lui-button">
		{{settings.val2}}
	</button>
	<button ng-click="app.variable.setStringValue(settings.variable, settings.val3)" class="lui-button">
		{{settings.val3}}
	</button>
</div>

image

アプリ上でのウィジェットの動作確認

アプリ(Executive Dashboard)を開いて、以下の手順でウィジェットの動作確認を行います。

変数の追加

変数のウインドウを開き、以下の変数を追加します。

  • 名前: vDimension
  • 定義: Region

4

チャートの作成

以下のチャートを追加します。

  • チャート種類: 棒グラフ
  • 軸: $(vDimension)
  • メジャー: # of Customers

5

ウィジェットの追加

さきほど作成したウィジェットの「変数ボタングループ」を追加して、プロパティに以下の設定を行います。

  • 変数名: vDimension
  • 値1: Region
  • 値2: Customer
  • 値3: FiscalMonth

6

動作の確認

ボタンをクリックするとチャートの軸が変更されることを確認します。

image

プルダウンによる変数値の変更

上記の例ではボタンで変数の値を行いましたが、プルダウンやインブットボックスなどの他のUI部品を利用することも可能です。ここではプルダウンを利用して選択する例をご紹介します。

先ほど作成したボタングループのウィジェットのHTMLを以下の様に変更します。ここでは、Leonardo-UIの「LUI Select」の部品を利用しています。プルダウンで選択した値は「value」に格納されますので、ng-clickで定義されたボタンクリック時のイベントの中で先ほどと同様にsetStringValue()を利用してこのvalueの値を変数に適用する処理を定義しています。

<lui-select x-model="value">
	<option value="{{settings.val1}}">{{settings.val1}}</option>
	<option value="{{settings.val2}}">{{settings.val2}}</option>
	<option value="{{settings.val3}}">{{settings.val3}}</option>
</lui-select>
<br><br>
<lui-button ng-click="app.variable.setStringValue(settings.variable, value)" x-variant="success">選択</lui-button>

上記の変更を行うと、以下の形でプルダウンから値を選択し、「選択」ボタンをクリックして選択を適用する形に変更されます。

image

まとめ

以上、このエントリではボタンを押したり、プルダウンリストから選択を行うことで変数の値を変更するウィジェットの作成方法をご紹介しました。