TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

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

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

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

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

タブの作り方

タブを追加する

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

ボード状部にあるタブの、右側の[+]をクリックします。

タブが追加されました。

 

タブの設定を変更する

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

タブのプロパティ

タイトルを変更する

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

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

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

 

タブの形状を変更する

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

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

 

余白を調整する

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

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

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

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

 
 

タブの色を変更する

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

まとめ

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

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

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

What do you think of this post?
  • 分かりやすい (4)
  • 問題が解決した (1)
お役に立てて嬉しいです!

Matsuura Takaya

MotionBoard
プロフィールへ >

2019年4月からWingArcにJoinし、主に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)