TECH BLOG

MENU

MotionBoard

MotionBoard

チャートが多すぎて1つのボードに収まらない場合や、用途に応じてボードを分けたい場合など
ボードを作る際、1つのボードで複数の画面を切り替えたい時ってありませんか?

下記の記事でコンテナを用いて画面を切り替える方法をご紹介しましたが、表示非表示の設定が複雑になるためちょっと面倒に感じた方もいるのではないでしょうか。

そんな時は、タブを使いましょう!
MotionBoardのレイアウトモードでは、ボード内にタブを作成することができます。

タブでダッシュボードを切り替えたい

今回はタブを使用し、1つのボードで複数の画面を切り替える方法をご紹介します。

タブの作り方

タブを追加する

レイアウトモードのボードを編集モードで開きます

ボード状部にあるタブの、右側の[+]をクリックします。
MotionBoardのレイアウトタブの追加

タブが追加されました。

 

タブの設定を変更する

タブはタイトルを変更したり、形状を変更したりすることが可能です。
タブを右クリックし、[タブのプロパティ]を開きます。

MotionBoardのレイアウトタブのプロパティ

タブのプロパティ

タイトルを変更する

初期設定では「ページ1」「ページ2」のようになっています。タイトルを書き換えるとタブの表示名が変わります。

MotionBoardのレイアウトタブのタイトル変更

タブを非表示にする(編集時のみ表示する)

タブの切り替えは上部のタブをクリックして行う以外に、ボタンアイテムを使って切り替えることも可能です。
その場合はタブを表示させる必要がないため、[編集時のみ表示]にチェックを入れることで非表示にできます。

 

タブの形状を変更する

タブの形状は、デフォルトでは四角形になっています。
「四角形」「台形」「左かけ台形」「右かけ台形」「下台形」「左かけ下台形」「右かけ下台形」から選択して任意の形状に変更することが可能です。

例えば、「左かけ台形」を選択するとこのような表現ができます。

MotionBoardのレイアウトタブのスタイル変更

 

余白を調整する

タイトルの左右の余白を調整できます。
デフォルトでは「0」になっており、そのままでは窮屈な感じになってしまうため適当な余白を設定しましょう。

下に表示されるプレビューをみながら調整すると、調整しやすいです。

タブ選択時にボタンアイテムを実行する

タブを切り替えたタイミングでボタンアイテムを実行することができます。
例えば、検索を実行するボタンを作って設定しておけば、タブを切り替えた際に検索を実行することができます。

 
 

タブの色を変更する

タブの色を変えることもできます。
「通常時」「マウスオーバー時」「タブ選択時」で、それぞれ異なる色を設定できます。
MotionBoardのレイアウトタブのデザイン変更

まとめ

タブを使用すると、1つのボードで複数の画面を切り替えることができます。
置きたいチャートが1画面に収まらない場合や、画面を分けたい場合にぜひ試してみてくださいね!

レイアウトタブのスタイル・デザイン変更

コンテナを使って複数画面を切り替える方法はこちら

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

  • 分かりやすい (2)
  • 問題が解決した (0)
ありがとうございます✨
プロフィールへ

ウイングアーク テクニカルエンジニア

ウイングアーク1stの技術部隊が記載しています。中の人は製品に詳しく、日頃からお客様と接点のある人です。お役立ち情報をたくさん書いていきますので、どうぞよろしくお願いします!

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【まとめ】invoiceAgentのWeb APIを使ってみる

  • #API

2023.04.05

invoiceAgent

ユーザーごとに閲覧可能なデータを制御しよう!

  • #集計表
  • #データ加工

2021.02.26

Dr.Sum

まるでWebサイト!? 折りたたみメニューの作り方!

  • #集計表
  • #デザイン
  • #コンテナ
  • #ボタン

2021.01.13

MotionBoard

Ranking

Rankingランキング

1

Excelのデータを加工したい。~変換(横持ち⇔縦持ち)について~

  • #データ取り込み
  • #データ加工

2021.01.19

Dr.Sum

2

SVFエラー解決までの近道 -帳票が出力されない編

  • #帳票作成・出力

2018.11.06

SVF

3

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

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

2019.06.15

MotionBoard

Info

Information

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