ダッシュボード機能
2023年7月28日に待望の新機能、「ダッシュボード」がリリースされました。
https://pleasanter.org/manual/dashboard
用途に合わせて作成した複数のダッシュボードを切り替えて使いたい
ダッシュボードは、テーブルやフォルダなどと同じように誰でも、いくつでも作成することができます。
また、ダッシュボードにアクセス権を設定することで、部署単位やチーム単位、ユーザ単位のダッシュボードを作成することも可能です。
しかしながら、トップ画面として設定できるダッシュボードは１つだけのため、複数のダッシュボードを作成して使い分けるにはちょっとした工夫が必要となります。
そこで、今回は複数のダッシュボードを簡単に切り替える方法について、一例をご紹介します。
サイドバーで複数のダッシュボードを切り替えるサンプル
下図のように、サイドバーのボタンにより表示するダッシュボードを行き来できるUIを実現します。
作成するダッシュボード
例として、下記６つのダッシュボードがあるとします。
- 各ダッシュボードは目的に合わせて、組織、グループ、ユーザ単位でアクセス権が設定されています。
- 各ダッシュボードには、下記「サイトグループ名」を設定しておきます。（これが今回の肝です！）
| No. | ダッシュボード | アクセス権 | サイトグループ名 |
|---|---|---|---|
| 1 | 全社ポータル | 全ユーザ | 全社用ダッシュボード |
| 2 | 開発部ポータル | 開発1部,開発2部 (組織) | 部署用ダッシュボード |
| 3 | 営業部ポータル | 営業部 (組織) | 部署用ダッシュボード |
| 4 | ○×開発プロジェクト | 開発チームA (グループ) | プロジェクト用ダッシュボード |
| 5 | 加藤専用 | 加藤 誠 (ユーザ) | 個人用ダッシュボード |
| 6 | 自分用 | 斎藤 美樹 (ユーザ) | 個人用ダッシュボード |
サイトグループ設定例
サイトグループ名は、「ダッシュボードの管理」-「全般」タブで設定します。
クイックアクセスでサイドメニューを作成する
クイックアクセスで切り替え用のサイドメニューを作成します。「サイトID」には、前述の表にある「サイトグループ名」を指定します。
全社用ダッシュボード,部署用ダッシュボード,プロジェクト用ダッシュボード,個人用ダッシュボード"
上記の様にカンマ区切りで指定しても良いですが、今回はボタンに表示されるアイコンも変えたいので下記のようにJSON形式で設定を行います。
[
{
"Id": "全社用ダッシュボード",
"Icon":"apartment"
},
{
"Id": "部署用ダッシュボード",
"Icon":"groups"
},
{
"Id": "プロジェクト用ダッシュボード",
"Icon":"factory"
},
{
"Id": "個人用ダッシュボード",
"Icon":"person"
}
]
このように設定することで、下図のようなサイドバーが出来上がります。
- IDに指定した「サイトグループ名」が設定されたダッシュボードの全てが表示対象となります。
- 表示対象の中でログインしているユーザにアクセス権があるものだけが表示されます。
-
全てのダッシュボードにアクセス権を持つ管理者ユーザの場合
-
「開発２部」で「開発チームA」に所属している加藤 誠さんの場合
-
「営業部」の斎藤 美樹さんの場合
どのダッシュボードでも同じサイドバーが出るようにする
サイドバーでダッシュボードを切り替えた際に、切り替えた先のダッシュボードでも同じサイドバーが表示されている必要があります。
そのためには、すべてのダッシュボードに同じサイドバーの設定を追加する必要があります。
ダッシュボードのテンプレートを作成しておく
そこで、テンプレート用のダッシュボードを１つ作成しておき、これをサイトパッケージとしてエクスポートして使いまわすようにします。
-
テンプレートの例
-
「ダッシュボードパーツ」に「サイドバー」の設定を行った「クイックアクセス」を追加
アクティブなダッシュボードのボタンの色を変える
下記のスクリプトとスタイルを用意して、ダッシュボードを切り替えるたびに現在表示ているダッシュボードのボタンだけ色を変えるようにします。
- スクリプト
リンクのURLと現在のページのURLが一致しているボタンを探し、その要素に"active"クラスを付与します。
$(function(){
let $active = $('.dashboard-part-nav-item').has('.dashboard-part-nav-link[href="'+location.pathname+'"]');
$active.addClass('active');
});
- スタイル
activeクラスを含むボタン要素の背景色を緑に設定します。
.dashboard-part-nav-item.active {
background-color: #C9FF2F;
}
これをテンプレートの「スタイル」と「スクリプト」に設定しておきます。
これでテンプレートは完成です。ダッシュボード表示画面で「管理」メニュー「サイトパッケージのエクスポート」からサイトパッケージを作成します
※ なお、意図しないアクセス権が付与されないよう、エクスポート時は「サイトのアクセス制御」を含まないようにしてください。
テンプレートからダッシュボードを作成する
それでは、テンプレートからダッシュボードを作成してみたいと思います。
- 「開発２部」の吉田 結さんでログインします
- テンプレートのサイトパッケージをインポートします。
- インポートしたテンプレートを開き、「ダッシュボードの管理」-「全般」タブで「タイトル」を変更し、サイトグループ名に「個人用ダッシュボード」と入力します。
- 「サイトのアクセス制御」タブを開き、自分（吉田 結）のみにアクセス権があることを確認します。
（部署や、プロジェクト用のダッシュボードを作る場合は、対象の組織やグループにアクセス権を割り当てます。）
- 設定を保存し、作成したダッシュボードを表示してみましょう。
個人用のダッシュボードとして、サイドバーに追加されているのが確認できます。
また、既存のダッシュボードのサイドバーにも（設定を変更することなく）新しいダッシュボードが追加されているのが分かります。
まとめ
ダッシュボード間で共通のパーツ（クイックアクセスを利用したサイドバー）を用意することで、タブ切り替えのようなUIでダッシュボードの切り替えができるようになりました。
複数のダッシュボードを使い分ける場合に非常に便利だと思いますので、この記事を参考にぜひ一度お試しください。