はじめに

このエントリでは、ボタンをクリックすると指定した項目の選択が実行される、また登録されたブックマークが適用されるウィジェットの作成方法をご紹介します。

項目の選択ボタンの作成

新規ウィジェットの作成

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

5_thumb4_thumb_thumb

「Name」の欄に「選択ボタン」と入力し、「Create」をクリックします。

1

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

2_thumb1_thumb

ボタンの追加

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

2_thumb[1]

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

4_thumb1

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

image_thumb1[1]

プロパティの追加と設定

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

9_thumb1_thumb3

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

プロパティ1つ目

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

プロパティ2つ目

  • Label: 項目名
  • Reference: field

プロパティ3つ目

  • Label: 選択条件
  • Reference: selection

image

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

14_thumb1_thumb_thumb

項目の選択処理の定義

フィールドの選択に関わるAPIとしては以下の様なAPIが提供されています。

  • app.field(項目名).select(選択するindex値の配列, toggle, softlock) : 指定した項目値の選択(index値を指定)
  • app.field(項目名).selectAll(softlock) : 項目値の全選択
  • app.field(項目名).selectAlternative(softlock) : 項目の代替値選択
  • app.field(項目名).selectExecluded(softlock) : 項目の除外値選択
  • app.field(項目名).selectMatch(条件文字列, softlock) : 条件文字列に合致する項目の値の選択
  • app.field(項目名).selectPossible(softlock) : 項目の絞込値選択
  • app.field(項目名).selectValues(選択する値の配列, toggle, softlock) : 指定した項目値の選択
  • app.field(項目名).toggleSelect(条件文字列,  softlock) : 項目値選択のトグル

ここでは項目名を指定して複数のレコードを選択する処理を組み込むために、app.field(項目名).selectValues(選択する値の配列, toggle, softlock)を利用します。尚、引数のtoggleとsoftlockにはtrue/falseを指定し、toggleをtrueとした場合は選択のトグル設定、softlockをtrueとした場合にはロックされた選択を上書きする設定となります。

HTMLエディタ上で以下の赤字部分を追加して保存します。選択を行う項目のレコードは、カンマ区切りで複数指定できるようにします。JavaScriptのsplit関数を利用して「選択条件」プロパティに設定されたカンマ区切りの項目を配列に格納し、selectValuesの引数として渡すことでレコードの選択を行います。

<lui-button ng-click="app.field(settings.field).selectValues(settings.selection.split(','),false,true)" x-variant="success">
	{{settings.label}}
</lui-button>

image

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

作成したウィジェットの選択ボタンを追加して以下の設定を行います。

  • ボタンラベル: 地域選択
  • 項目名: Region
  • 選択条件:Africa,Europe,Middle East

2

ボタンをクリックするとRegionのAfrica,Europe,Middle Eastが選択されることを確認します。

image

ブックマークの適用ボタンの作成

これまでは、選択条件を指定して項目の選択を行うウィジェットを作成してきました。項目の選択を行うには登録したブックマークを呼び出すことでも可能ですが、選択条件を適用する代わりにブックマークを適用する処理をウィジェットに組み込むこともできます。ブックワークに関わるAPIは以下が提供されており、ここではapp.bookmark.apply(ブックマークID)を利用することでブックマークの適用を行います。

  • app.bookmark.apply(ブックマークID) : ブックマークを適用
  • app.bookmark.create(ブックマーク名, ブックマークの説明): ブックマークを作成
  • app.bookmark.remove(ブックマークID): ブックマークを削除

先ほどと同様の手順で新規ウィジェットを作成し、以下の形でプロパティの設定と、HTMLでのボタンの追加と処理の定義を行います。

プロパティの追加と設定

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

プロパティ1つ目

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

プロパティ2つ目

  • Label: ブックマークID
  • Reference: bookmarkid

image

ブックマークの適用処理の定義

HTMLエディタ上で以下を追加して保存します。

<lui-button ng-click="app.bookmark.apply(settings.bookmarkid)" x-variant="success">
	{{settings.label}}
</lui-button>

image

ブックマークIDの確認

次に作成したウィジェットで呼び出すブックマークIDの確認を行います。ここではqw-sys-info、もしくはSingile Configuratorを利用した2つの方法をご紹介しますので、いずれかの方法で確認を行って下さい

qw-sys-infoを利用したビックマークIDの取得

ウィジェットにはqw-sys-infoというシステムのメタ情報を取得するタグが用意さえており、これを利用するとアプリ、シート、ブックマークなどのオブジェクトの情報を取得することができます。。(qw-sys-infoの詳細についてはQlik Sense Developers Helpの「Using the qw-sys-info component」をご参照ください。)

HTMLエディタ上で以下を追加して保存します。

<qw-sys-info content="bookmarks">
	<ul style="margin-left:20px;">
		<li ng-repeat="bookmark in bookmarks" >
			Title: {{bookmark.qData.title}}, ID: {{bookmark.qInfo.qId}}
		</li>
	</ul>
</qw-sys-info>

プレビューに以下の形でブックマーク名とIDが表示されますので、このIDをメモします。

qs-sys-info

Single Configuratorを利用したブックマークIDの確認

次に、Single Configuratorを利用したブックマークIDの確認方法をご紹介します。

Dev Hubトップ画面から「Single Configurator」をクリックします。

3

左上のプルダウンからアプリを選択し、任意のチャートを一覧から選択します。

4

右側パネル上のBookmarkから対象のブックマークを選択します。

5

上部のURLに表示される「bookmark=」の後にブックマークIDが表示されますので、このIDをメモします。

image

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

アプリ上にウィジェットを配置し、ボタンラベルを入力してさきほどメモしたブックマークIDを入力します。

image

ボタンをクリックするとブックマークが適用されることを確認します。

image

まとめ

以上、このエントリでは指定した項目の選択が実行される、また登録されたブックマークが適用されるウィジェットの作成方法をご紹介しました。