0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Yellowfinのコードモードで適用されたフィルターの値を取得する方法

Posted at

#どのような時に必要か
Yellowfinのダッシュボード構築中に、フィルターがたくさんある場合、どのフィルターの何の値で絞られた結果なのかを表示したい場合などに使えると便利だと思います。予めフィルターの状態を表示するテキストの箇所を配置してinnerHTMLで突っ込むイメージです。
YellowfinWikiに説明がありますが少し分かりづらいです。また、デフォルトの値も取得することができます。(同じページ内の記述参照)

#各フィルターの種類によって取得の仕方が変わる
これが一番わかりにくいのですが、大きく分けて「一覧に含む」、「〜の間」、「単一入力」の3種類のフィルターの絞り込む種類によって適用されている値の取得法が変わります。

##フィルターの種類が「一覧に含む」の場合(リスト・チェックボックスなど)
フィルターオブジェクトのappliedValues.valueListに値が格納されるのでこれをforやforeachで取得する。

inList.js
let comments = this.apis.canvas.select('current_filters');
let text_detail = '';
let filters = this.apis.dashboard.filters;
let filter1 = filters.getFilter('一覧に含むフィルター');

if (filter1.appliedValues.valueList.length > 0) {
	text_detail = '<b>一覧に含むフィルター:</b>';
	for (var i = 0; i < filter1.appliedValues.valueList.length; i++) {
		text_detail = text_detail + ' ' + filter1.appliedValues.valueList[i];
	}
	text_detail = text_detail + ' ';
}

##フィルターの種類が「〜の間」の場合(日付や年齢など)
フィルターオブジェクトのappliedValueOneとappliedValueTwoにそれぞれの値が格納されるのでそれぞれのプロパティから取得する。

between.js
let comments = this.apis.canvas.select('current_filters');
let text_detail = '';
let filters = this.apis.dashboard.filters;
let filter2 = filters.getFilter('〜の間フィルター');

if (filter2.appliedValues) {
	text_detail = text_detail + '<b>〜の間フィルター:</b>';
	text_detail = text_detail + ' ' + filter2.appliedValueOne + '~' + filter2.appliedValueTwo + ' ';
}

##フィルターの種類が「単一入力」の場合(名前など)
フィルターオブジェクトのappliedValueOneに値が格納されるのでそこから値を取得する。

textbox.js
let comments = this.apis.canvas.select('current_filters');
let text_detail = '';
let filters = this.apis.dashboard.filters;
let filter3 = filters.getFilter('単一入力フィルター');

if (filter3.appliedValues) {
	text_detail = text_detail + '<b>単一入力フィルター:</b>';
	text_detail = text_detail + ' ' + filter3.appliedValueOne + ' ';
}

#値の表示について
current_filtersの名前がついたオブジェクトの文字列に取得したtext_detail変数を突っ込みます。

innnerHTML.js
comments.innerHTML = text_detail;

#まとめ
複雑なフィルターを駆使している場合、ぱっと見でわかるような仕組みはすごく便利ですよね。
コードモードを使用することによってフィルターの表示の仕方も自由度が上がりましたね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?