はじめに

前回の「Qlik Sense ウィジェット(Widget)開発入門(1): 基本コンセプトと簡単なウィジェットの作成」では、コンセプトとウィジェットの基本的な作成方法をご紹介しました。このエントリでは、クリックすると指定したシートに遷移を行うナビゲーションの機能を持ったアクションボタンの作成手順をご紹介します。

尚、今後のウィジェットのチュートリアルではデモアプリとして提供されている「Executive Dashboard」を利用します。もしアプリが存在しない場合には、以下のリンクからアプリをダウンロードします。

>> Executive Dashboardアプリのダウンロード

そして、ダウンロードしたZipファイルを解凍し、中に含まれる「Executive Dashboard.qvf」のアプリを以下のディレクトリにコピーします。

  • C:\Users\%username%\Documents\Qlik\Sense\Apps

image_thumb10

また、今後のエントリで作成するウィジェットの作成例は以下からダウンロード可能となっていますので、ご参照が必要な場合には以下からダウンロードの上、ウィジェット・ライブラリのインポートを行って下さい。

>>ウィジェットの作成例ダウンロード

アクションボタンの作成

新規ウィジェットの作成

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

5_thumb4

「Name」の欄に「ナビゲーションボタン」と入力し、「Create」をクリックします。

1

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

2

ボタンの追加

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

2

一覧にはLeonardo-UI(LUI)と呼ばれるボタンなどのUI部品の一覧が表示されます。ここでは一覧から「LUI Button (Success)」を選択し、「Insert」をクリックします。(提供されているLeonardo-UIの一覧はQlik Sense Developers Helpの「Supported Leonardo UI components」をご参照ください。)

4

HTMLタグが挿入され、プレビューにボタンが表示されます。

image

プロパティの追加と設定

現時点では「Success」というボタンラベルの表示になっていますが、ボタンのラベルを入力して変更するためのプロパティと、遷移先のシートを指定するためのシートIDを入力するプロパティを追加します。

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

9_thumb1

プロパティのコンポーネント一覧が表示されますので、「Header」をドラッグし、右側の「General」ヘッダーの下にドロップします。

10_thumb1

追加された「Settings」という名称のヘッダー左側の▼ボタンをクリックして展開します。

11_thumb1

「Input field」をドラッグして「Settings」ヘッダーの配下にドロップします。

12_thumb1

同様の手順でをもう一つの「Input field」を追加します。(計2個)

5

2つのプロパティそれぞれに以下の設定を行います。

プロパティ1つ目

  • Label: ボタンラベル
  • Reference: label

プロパティ2つ目

  • Label: シートID
  • Reference: sheetid

6

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

14_thumb1

ボタンラベルの変更

プロパティに入力した値がボタンラベルに反映されるように設定します。HTMLエディタ上で”Success”を削除し、カーソルを<lui-button>タブの間に合わせたままで「Insert」ボタンをクリックします。

7

「Property references」のタブを選択します。

16_thumb1

ドロップダウンから「Settings」ヘッダーを選択し、「label」のプロパティを選択して「Insert with curly braces」をクリックします。

8

左上の「Save」ボタンをクリックしてウィジェットを保存します。

9

「ボタンラベル」のプロパティに値を入力すると、その値がウィジェット上に反映されることを確認します。

image

アクションの追加

アクションイベントの定義はAngularJSのディレクティブと呼ばれる制御命令を利用して行います。ここでは、以下のng-clickのディレクティブを利用します。

  • ng-click : クリックされた際に実行されるイベントを定義

また、Qlik SenseのAPIを利用してクリックされた際の振る舞いを定義します。基本的なアクションを実行するためのAPIは以下のようなものが利用が可能です。ここでは以下の中からnavigation.gotoSheet(<sheetId>)を利用して、ボタンをクリックすると引数に指定したシートIDを持つシートへ移動する処理を定義します。

  • app.clearAll – 選択を全てクリアする
  • app.back() – 1アクション前の状態に戻る
  • app.forward() – 1アクション先の状態に進む
  • navigation.nextSheet() – 次のシートへ移動する
  • navigation.prevSheet() – 前のシートへ移動する
  • navigation.gotoSheet(<sheetId>) – 指定したシートへ移動する
  • navigation.gotoStory(<storyId>) – 指定したストーリーへ移動する
  • app.doReload(): リロード処理を実行する
  • app.lockAll(): 選択をロックする
  • app.unlockAll(): 選択のロックを解除する

HTMLエディタ上で以下の赤字部分を追加して保存します。ng-clickでクリック時のイベントを定義し、gotoSheet()の移動先としてプロパティのsettings.sheetidで指定した値を参照する処理を行います。

<lui-button ng-click="navigation.gotoSheet(settings.sheetid)" x-variant="success">
	{{settings.sheetid}}
</lui-button>

image

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

Qlik Senseのアプリ(Executive Dashboard)を開き、任意の移動先のシートを開きます。URLの「/sheet/」の後にシートIDが表示されますので、このシートIDをコピーします。

image

任意の移動元のシートを開いて作成した「ナビゲーションボタン」のウィジェットを追加し、ボタンラベルを入力して、コピーしたシートIDをペーストします。

27

ボタンをクリックするとシートが遷移することを確認します。

image

ボタンデザインのカスタマイズ

ここまではシートの遷移を行うアクションボタンの基本的な作成方法をご説明しました。ここからは、アイコンの表示や画像ボタンの作成など、幾つかデザインの変更を行う手順をご紹介したいと思います。

ボタンへのアイコンの追加

HTMLエディタ上で{{settings.label}}の前にカーソルを合わせ、「Insert」ボタンをクリックします。

11

真ん中の「Icons」タブを開き、右向き三角(triangle-right)を選択し、「Insert」をクリックします。

12

以下の形でタグが挿入され、プレビューで右矢印がボタンに追加されたことを確認します。

image

アイコンの切り替え機能の追加

いま追加したアイコンは右向き三角の固定となっていました。次にこのアイコンの表示を、プロパティのプルダウンから種類を選択して切り替える機能を追加したいと思います。

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

9_thumb1

「Dropdown list」をドラッグして「Settings」ヘッダーの配下にドロップします。

13

追加したDropdown listのプロパティを以下の形で設定します。

・Label: アイコン種類

・Options: 「Add」ボタンを4回押して4個のオプションを追加し、以下のLabel/Valueを入力します。

  • triangle-right
  • triangle-left
  • pie-chart
  • bar-chart

・Default value: triangle-right

・Reference: icontype

14

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

14_thumb1

HTMLエディタ上で以下の赤字部分を修正します。

<lui-button ng-click="navigation.gotoSheet(settings.sheetid)" x-variant="success">
	<span class="lui-icon lui-icon lui-icon--{{settings.icontype}}"></span> {{settings.label}}
</lui-button>

image

左上の「Save」ボタンをクリックしてウィジェットを保存します。

9

アイコン種類のプルダウンで種類を変更すると、ウィジェット上に反映されてアイコン表示が変更されることを確認します

15

画像ボタン表示オプションの追加

これまではラベルを表示する標準ボタンを作成してきました。最後に標準ボタン表示と、画像ボタンの表示を切り替えるオプションを追加したいと思います。

表示の切り替えはプロパティのチェックボックスで切り替えを行えるようにします。チェックボックスが変更された時の標準ボタンと画像ボタンの表示・非表示の処理は以下のAngular.jsのng-showとng-hideディレクティブを利用します。

  • ng-show: 与えられた条件がtrueの場合に要素を表示
  • ng-hide: 与えられた条件がtrueの場合に要素を非表示

チェックボックスのプロパティはチェックされているときにはtrue、アンチェックされているときにはfalseが返されますので、ng-showとng-hideを使ってこのチェック状態に応じて標準ボタン、画像ボタンのいずれかが表示されるように制御します。

画像ボタンの画像はコンテンツライブラリに保存されている画像ファイルを表示させる設定を行います。このチュートリアルでは以下の画像を利用しますので、以下からダウンロードします。

>>ボタン画像をダウンロード (icon.png)

ダウンロードしたicon.pngは以下のデフォルトのコンテンツライブラリのパスに保存します。

  • C:\Users\%username%\Documents\Qlik\Sense\Content\Default

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

9_thumb1

「Checkbox」と「Input field」を「Settings」ヘッダーの配下にドロップして追加します。

16

追加したCheckboxとInput fieldのプロパティを以下の形で設定します。

Checkbox

  • Label: 画像ボタンを表示
  • Reference: showImageButton

Input field

  • Label: 画像ファイル名
  • Default value: /Content/Default/
  • Reference: image

17

HTMLとCSSの以下の赤字部分を追加・変更します。

・HTML

<lui-button ng-hide="settings.showImageButton" ng-click="navigation.gotoSheet(settings.sheetid)" x-variant="success">
	<span class="lui-icon lui-icon lui-icon--{{settings.icontype}}"></span> {{settings.label}}
</lui-button>
<input class="widget-image-button" ng-show="settings.showImageButton" 
ng-click="navigation.gotoSheet(settings.sheetid)" type="image" src="{{settings.image}}">

・CSS

.widget-image-button {
	width: 100%;
}

image

左上の「Save」ボタンをクリックしてウィジェットを保存します。

9

「画像ボタンを表示」チェックボックスをチェックし、画像ファイル名に「/Content/Default/icon.png」と入力すると、画像ボタンが表示されます。

18

アプリ上でウィジェットの動作確認を行います。

image

まとめ

以上、このエントリではクリックすると指定したシートに遷移を行うアクションボタンの作成手順をご紹介しました。