growing hard days.

re:dashで必須でない検索条件を作りたい

2016/12/31

re:dashで必須ではない任意検索のためのフォームを実装したい、となりましたのでとりあえずやってみました。

目次

re:dashでパラメータを利用して検索フォームを作る

re:dashでパラメータを利用して、例えば商品マスタをIDで検索をする場合、このようにクエリーとダッシュボードを作ります。

※ダッシュボードのテキストウィジェットでフォーム作るには.env.iniに次の設定が必要です。
export REDASH_ALLOW_SCRIPTS_IN_USER_INPUT=true

クエリーのSQL

SELECT
 CODE,
 NAME,
 UNIT_PRICE
FROM 
 MASTER.PRODUCT
WHERE
 CODE = ‘{{code}}’

1

2

3

4

5

6

7

8

9

SELECT

CODE,

NAME,

UNIT_PRICE

FROM

MASTER.PRODUCT

WHERE

CODE = ‘{{code}}’

ダッシュボードに追加するウィジェット

<div>
 <p>商品検索</p>
 <form action="/queries/1" method="get">
  <b>商品CODE</b>
  <input type="text" name="p_code">
  <input type="submit">
 </form>
</div>

1

2

3

4

5

6

7

8

9

<div>

<p>商品検索</p>

<form action="/queries/1" method="get">

<b>商品CODE</b>

<input type="text" name="p_code">

<input type="submit">

</form>

</div>

re:dashで必須ではない検索パラメータを使う

ですが、下記のような条件で検索したい場合

・単価の幅で検索した
・入力していない場合は検索条件にしたくない

要は必須ではない任意の検索条件を設定したい場合の方法がわからなかったので、以下のようにしました。

クエリーのSQL

SELECT
 CODE,
 NAME,
 UNIT_PRICE
FROM 
 MASTER.PRODUCT
WHERE
 CODE = {{code}}
 {{search_condition_1}}
 {{search_condition_2}}

1

2

3

4

5

6

7

8

9

10

11

SELECT

CODE,

NAME,

UNIT_PRICE

FROM

MASTER.PRODUCT

WHERE

CODE = {{code}}

{{search_condition_1}}

{{search_condition_2}}

ダッシュボードに追加するウィジェット

<div>
 <p>商品検索</p>
 <form>
  <b>商品CODE : </b>
  <input type="text" id="code">
  <b>単価 : </b>
  <input type="text" id="minimum_unit_price">
  <b> ~ </b>
  <input type="text" id="max_unit_price">
  <input type="button" onClick="submit_parameter()" value="送信">
 </form>
</div>

&ltscript&gt
 function submit_parameter(){
  var code = document.getElementById(code).value;
  var minimum_unit_price = document.getElementById(‘minimum_unit_price’).value;
  var max_unit_price = document.getElementById('max_unit_price').value;
  if (code == ''){
    alert('商品CODEを入力してください');
    return false;
  }
  var search_condition_1 = ‘’;
  var search_condition_2 = ‘’;
  if (minimum_unit_price != ''){
    search_condition_1 = '&p_search_condition_1=' + escape("AND UNIT_PRICE >=" + minimum_unit_price + “ “);
  }else{
    search_condition_1 = '&p_search_condition_1=' + escape(" ");
  }
  if (max_unit_price != ''){
    search_condition_2 = '&p_search_condition_2=' + escape("AND UNIT_PRICE <=" + max_unit_price + “ “);
  }else{
    search_condition_2 = '&p_search_condition_2=' + escape(" ");
  }
  location_url = '/queries/1?p_code='
  + code
  + search_condition_1
  + search_condition_2;
  window.open().location.href=location_url;
 }
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<div>

<p>商品検索</p>

<form>

<b>商品CODE : </b>

<input type="text" id="code">

<b>単価 : </b>

<input type="text" id="minimum_unit_price">

<b> ~ </b>

<input type="text" id="max_unit_price">

<input type="button" onClick="submit_parameter()" value="送信">

</form>

</div>

&ltscript&gt

function submit_parameter(){

var code = document.getElementById(code).value;

var minimum_unit_price = document.getElementById(‘minimum_unit_price’).value;

var max_unit_price = document.getElementById('max_unit_price').value;

if (code == ''){

alert('商品CODEを入力してください');

return false;

}

var search_condition_1 = ‘’;

var search_condition_2 = ‘’;

if (minimum_unit_price != ''){

search_condition_1 = '&p_search_condition_1=' + escape("AND UNIT_PRICE >=" + minimum_unit_price + “ “);

}else{

search_condition_1 = '&p_search_condition_1=' + escape(" ");

}

if (max_unit_price != ''){

search_condition_2 = '&p_search_condition_2=' + escape("AND UNIT_PRICE <=" + max_unit_price + “ “);

}else{

search_condition_2 = '&p_search_condition_2=' + escape(" ");

}

location_url = '/queries/1?p_code='

+ code

+ search_condition_1

+ search_condition_2;

window.open().location.href=location_url;

}

</script>

単価に入力があれば単価の検索条件を1行まるごとパラメータに渡します。
入力がない場合に半角スペースをパラメータに渡しているのは、クエリーに設定されているパラメータがない場合は次のエラーが発生し実行されないためです。

Error running query: missing value for search_condition_2 parameter.

フォームのサブミットをやめてlocation.hrefにしたのは、スペースを自動変換した際に「+」に変換されてクエリー側でそのまま使用されてSQLエラーとなるためです。
そのため、先にescapeで変換したものをそのまま渡しています。

もっといい方法があればぜひぜひ教えてください。

最後までお読みいただきましてありがとうございました！

「AWS認定資格試験テキスト＆問題集　AWS認定ソリューションアーキテクト - プロフェッショナル改訂第2版」という本を書きました。

「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー改訂第3版」という本を書きました。

「ポケットスタディ AWS認定デベロッパーアソシエイト［DVA-C02対応］」という本を書きました。

「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。

「AWSではじめるLinux入門ガイド」という本を書きました。

開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター5年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。

このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。

また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。

Tweet

関連記事

: re:dash Error running query: ‘ascii’ codec can’t encode characters

エラー内容 re:dashの画面に「Error running query: & …

: Backlogの実績工数をAmazon QuickSightで可視化してわかったこと

今年に入ってから、Backlogで個人タスクを登録しだして、予定工数、実績工数を …

: re:dashのパラメータクエリでシングルクォーテーションが文字参照に変わって検索できないので出来るようにする

re:dashでシングルクォーテーションをパラメータとして渡したい場合の方法に悩 …

: AWS上にMetabaseサーバーを起動してみました

データ可視化ツールのMetabaseがいいらしいという声をいくつか聞いたのでAW …

: re:dashで「Error running query: ‘ascii’ codec can’t encode」

re:dash の画面に表示されたエラー Error running query …

: Re:dash CSVの出力文字コードをUTF-8からShift-JISに変更する

Re:dashの[Download Dataset] – [Down …

: 勉強会用にre:dashの環境構築した記録

先日の「ヤマムギVol5 BI ファーストステップ ~re:dash , Pow …

: Pentaho Communitation EditionをAWS EC2 Amazon Linux にインストールしてみました

BIというか、簡単なグラフが表示出来ればいいレベルでいいので、商用のBIを購入す …

: RedashでSendGridのActivityを見る(Amazon S3 -> Athena経由)

Redash Advent Calendar 2017に参加しましたので、今年リ …

: PentahoでMySQLテーブルデータソースを作成しようとした時のエラー対応

PentahoでMySQLのテーブルへデータソースを作成しようとしてエラーが発生 …

PREV: SQLAlchemyのModelクラスをMySQLから自動生成する
NEXT: re:dashのパラメータクエリでシングルクォーテーションが文字参照に変わって検索できないので出来るようにする