TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

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

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

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

 ・検索画面表示時

 ・検索画面非表示時

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事にリアクションしてみませんか?

What do you think of this post?
  • 分かりやすい (0)
  • 問題が解決した (0)
いいね!ボタンありがとうございます!

塚田 涼太郎

MotionBoard Dr.Sum
プロフィールへ >

2020年からDr.Sum MotionBoard のプリセールスとして活動しています。ユーザー様のお困りごと/お悩みごとを解決できるようブログ執筆の活動をしています。お困りごとが解決したら是非「いいね」ボタンのクリックをお願いします!

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【脱Excel】MotionBoardの入力機能で業務アプリをつくる

公開:2024.08.05
更新:2024.08.05

分かりやすい

2

解決した

0
  • データ入力
  • デザイン
  • コンテナ

MotionBoard

【まとめ】SVF Cloud帳票をinvoiceAgentに連携する方法

公開:2024.04.18
更新:2024.08.07

分かりやすい

2

解決した

2
  • 帳票作成・出力
  • システム連携
  • 電帳法
  • 文書定義
  • 処理定義

SVF

Dr.Sum Copilotをインストールしてみた【OpenAI】

公開:2024.04.05
更新:2024.04.18

分かりやすい

2

解決した

0
  • Copilot

Dr.Sum

Ranking

Rankingランキング

1

棒グラフを大きい順番に並び替えたい!(ソートしたい)

公開:2019.06.15
更新:2023.11.27

分かりやすい

13

解決した

12
  • デザイン
  • グラフ
  • 集計表

MotionBoard

2

経過時間を時:分:秒で時刻表示したい!【320秒→05:20】

公開:2022.08.02
更新:2024.05.08

分かりやすい

11

解決した

7
  • グラフ

MotionBoard

3

カスタム項目の書き方 よく使う関数からIfまで

公開:2023.07.28
更新:2024.10.30

分かりやすい

25

解決した

7
  • データ加工

MotionBoard

Info

Information

ウイングアーク1stからのお知らせ

int(57)