たくさんの検索条件を画面上に配置すると、チャートの表示エリアが狭くなってしまい、本来見たいチャートが小さくなり見づらくなるということがないでしょうか?そんな時、必要な時だけ検索条件表示をコントロールできる便利なコンテナ機能を紹介しますので、試してみてくださいね。

課題点:【検索エリア画面表示】検索エリアを画面に表示(左側に検索項目を配置すると、チャートが小さくなりますね)

解決策:【検索画面表示・非表示】検索画面を必要な時だけ表示(チャートを大きく表示できます)

　・検索画面表示時

　・検索画面非表示時

検索画面表示・非表示設定画面の作成方法

1.検索条件を設定し、ボード上に配置をする。

　検索条件を設定します。詳細な方法は下記の記事で解説しています。を参考にしてください。

検索条件をボード上に配置したい

https://navi.wingarc.com/product/motionboard/9224

MotionBoardではデータソースに対して検索を行う「個別検索」という機能があります。期間やグループを絞ることができる検索ですが、より使いやすくするためにボード上に配置をすることがあります。今回は個別検索をダッシュボード上に配置をする方法を紹介します。下記のように、検索用のチェックボックスやリストボックスなどを配置し、簡単な操作でチャートを更新できる画面を作成していきます。  本記事の設定手順は、動画でも公開しています。https://youtu.be/cm4rpDQvlT4動画ナレッジでは、よく使われている機能を動画...

WingArc TECH BLOG

2018.06.26

2.検索条件を配置する「コンテナ」を作成する。

　(1)検索アイテムを配置する「コンテナ」を作成します。「コンテナ」作成ボタンをクリックし、コンテナを自由配置で作成します。作成するには、コンテナの左上をクリックしそのまま右下にドラッグして大きさを決めてください。作成したコンテナに名前をつけて「OK」をクリックしてください。(ここでは「検索コンテナ」とします)

　(2)「レイアウト編集」ボタンをクリックし、コンテナ内のレイアウトを分割しておきます。

　(3)分割されたコンテナの上に、1.で設定した検索条件の選択画面を配置しましょう。「検索」メニューからデーターソース(ここでは売上明細)を選択すると、検索画面が表示されます。検索条件の右にある⊕をクリックし、検索条件を配置する場所を選択できるようになりますので、コンテナ内に配置していきます。

　(4)引き続き「都道府県」を2段目、「会社名」を3段目に検索条件を配置し、「レイアウト編集」でエリアの大きさを修正します。

3.ボタンを使って、コンテナの表示と非表示の切り替えを行う。

　(1)検索用のコンテナを非表示にするボタンを作成します。ボタンアイテムを選択し、検索コンテナ内の一番下に配置します。

　(2)「アクション種別」は「表示非表示の切り替え」を選択します。

　(3)「検索コンテナ」の「表示/非表示」の個所を空白(非表示)にしましょう。これで、このボタンを押した時に検索コンテナを非表示にすることができるようになりました。

　(4)ボタンに名前をつけて、表示するテキストや色を設定して「OK」をクリックします。

　(5)検索用コンテナとコンテナを非表示にするボタンが配置されました。

　(6)検索用コンテナを表示するボタンを作成しましょう。まずレイアウト編集でボタンを配置するエリアを作成しておきます。

　(7)検索条件を表示するボタンを⑥で作成したエリアに作成します。「アクション種別」は「表示非表示切り替え」を選択し、検索コンテナの「表示/非表示」チェックをONにします。「OK」ボタンをクリックします。

　(8)ボタンに名前をつけて、表示するテキストや色を設定して「OK」をクリックします。

　(9)検索用コンテナを表示するためのボタンが作成されました。ここまで作成できたら、ボードを保存しましょう。

いかがでしょうか?このテクニックを使えば、必要な時だけ検索条件画面を表示し、画面の広さを最大限に活用することができますよね。

コンテナは検索条件だけでなく、様々なアイテム(チャートなど)を配置することができます。たとえばチャートをコンテナに配置して、表示するコンテナを切り替えるなどしてボードを切り替えることなく複数のチャートを表示することも可能です。方法については、引き続き掲載していきますのでお楽しみに!