【新機能・ダッシュボード】プリザンターで複数のダッシュボードを使い分ける

# ダッシュボード機能
2023年7月28日に待望の新機能、「ダッシュボード」がリリースされました。
https://pleasanter.org/manual/dashboard

# 用途に合わせて作成した複数のダッシュボードを切り替えて使いたい
ダッシュボードは、テーブルやフォルダなどと同じように誰でも、いくつでも作成することができます。
また、ダッシュボードにアクセス権を設定することで、部署単位やチーム単位、ユーザ単位のダッシュボードを作成することも可能です。

しかしながら、トップ画面として設定できるダッシュボードは１つだけのため、複数のダッシュボードを作成して使い分けるにはちょっとした工夫が必要となります。
そこで、今回は複数のダッシュボードを簡単に切り替える方法について、一例をご紹介します。

# サイドバーで複数のダッシュボードを切り替えるサンプル

下図のように、サイドバーのボタンにより表示するダッシュボードを行き来できるUIを実現します。

![dashboards.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/06ecf1f6-ee3d-876c-c725-7555a84a9c31.gif)

## 作成するダッシュボード

例として、下記６つのダッシュボードがあるとします。
- 各ダッシュボードは目的に合わせて、組織、グループ、ユーザ単位でアクセス権が設定されています。
- 各ダッシュボードには、下記「サイトグループ名」を設定しておきます。（__これが今回の肝です！__）

|No.|ダッシュボード|アクセス権|サイトグループ名|
|--|--|--|--|
|1|全社ポータル|全ユーザ|全社用ダッシュボード|
|2|開発部ポータル|開発1部,開発2部 (組織)|部署用ダッシュボード|
|3|営業部ポータル|営業部 (組織)|部署用ダッシュボード|
|4|○×開発プロジェクト|開発チームA (グループ)|プロジェクト用ダッシュボード|
|5|加藤専用|加藤 誠 (ユーザ)|個人用ダッシュボード|
|6|自分用|斎藤 美樹 (ユーザ)|個人用ダッシュボード|

### サイトグループ設定例

サイトグループ名は、「ダッシュボードの管理」-「全般」タブで設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/057048c3-7588-a2d2-3e5c-a7423b75759f.png)


## クイックアクセスでサイドメニューを作成する

クイックアクセスで切り替え用のサイドメニューを作成します。「サイトID」には、前述の表にある「サイトグループ名」を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/961b3cfc-2010-5056-1e6b-a185aa5aac48.png)

```
全社用ダッシュボード,部署用ダッシュボード,プロジェクト用ダッシュボード,個人用ダッシュボード"
```

上記の様にカンマ区切りで指定しても良いですが、今回はボタンに表示されるアイコンも変えたいので下記のようにJSON形式で設定を行います。

```json
[
    {
        "Id": "全社用ダッシュボード",
        "Icon":"apartment"
    },
    {
        "Id": "部署用ダッシュボード",
        "Icon":"groups"
    },
    {
        "Id": "プロジェクト用ダッシュボード",
        "Icon":"factory"
    },
    {
        "Id": "個人用ダッシュボード",
        "Icon":"person"
    }
]
```

このように設定することで、下図のようなサイドバーが出来上がります。
- IDに指定した「サイトグループ名」が設定されたダッシュボードの全てが表示対象となります。
- 表示対象の中でログインしているユーザにアクセス権があるものだけが表示されます。

1. 全てのダッシュボードにアクセス権を持つ管理者ユーザの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/10cc2c02-1381-c752-de6a-822729bf9177.png)

2. 「開発２部」で「開発チームA」に所属している加藤 誠さんの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/8af3ab3e-dafc-4cd8-01dd-90ecfd388c0d.png)

3. 「営業部」の斎藤 美樹さんの場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/ef019f5d-2a50-fa10-77fa-464da412d39b.png)

## どのダッシュボードでも同じサイドバーが出るようにする

サイドバーでダッシュボードを切り替えた際に、切り替えた先のダッシュボードでも同じサイドバーが表示されている必要があります。
そのためには、すべてのダッシュボードに同じサイドバーの設定を追加する必要があります。

### ダッシュボードのテンプレートを作成しておく

そこで、テンプレート用のダッシュボードを１つ作成しておき、これをサイトパッケージとしてエクスポートして使いまわすようにします。

- テンプレートの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/c276568c-0d75-fcb6-0050-c9f1a381a6c7.png)

- 「ダッシュボードパーツ」に「サイドバー」の設定を行った「クイックアクセス」を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/1d1903b0-9e71-16ad-f242-6f125e933eb5.png)

## アクティブなダッシュボードのボタンの色を変える

下記のスクリプトとスタイルを用意して、ダッシュボードを切り替えるたびに現在表示ているダッシュボードのボタンだけ色を変えるようにします。

- スクリプト
リンクのURLと現在のページのURLが一致しているボタンを探し、その要素に"active"クラスを付与します。
```js
$(function(){
    let $active = $('.dashboard-part-nav-item').has('.dashboard-part-nav-link[href="'+location.pathname+'"]');
    $active.addClass('active');
});
```

- スタイル
activeクラスを含むボタン要素の背景色を緑に設定します。
```css
.dashboard-part-nav-item.active {
   background-color: #C9FF2F;
}
```
これをテンプレートの「スタイル」と「スクリプト」に設定しておきます。

これでテンプレートは完成です。ダッシュボード表示画面で「管理」メニュー「サイトパッケージのエクスポート」からサイトパッケージを作成します

※ なお、意図しないアクセス権が付与されないよう、エクスポート時は「サイトのアクセス制御」を含まないようにしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/a1ee89a1-b962-6c08-1f6a-82bad555b7ad.png)


## テンプレートからダッシュボードを作成する

それでは、テンプレートからダッシュボードを作成してみたいと思います。

1. 「開発２部」の吉田 結さんでログインします
2. テンプレートのサイトパッケージをインポートします。
3. インポートしたテンプレートを開き、「ダッシュボードの管理」-「全般」タブで「タイトル」を変更し、サイトグループ名に「個人用ダッシュボード」と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/0d76ff86-1eb7-66c6-dd30-469c9a18a626.png)
4. 「サイトのアクセス制御」タブを開き、自分（吉田　結）のみにアクセス権があることを確認します。
　（部署や、プロジェクト用のダッシュボードを作る場合は、対象の組織やグループにアクセス権を割り当てます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/3d4b1116-ecf1-442d-686a-e50236968af4.png)
5. 設定を保存し、作成したダッシュボードを表示してみましょう。

個人用のダッシュボードとして、サイドバーに追加されているのが確認できます。
また、既存のダッシュボードのサイドバーにも（設定を変更することなく）新しいダッシュボードが追加されているのが分かります。
![dashboards-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28805/d97d1fe8-6909-1122-d916-c7405560b26e.gif)

# まとめ

ダッシュボード間で共通のパーツ（クイックアクセスを利用したサイドバー）を用意することで、タブ切り替えのようなUIでダッシュボードの切り替えができるようになりました。

複数のダッシュボードを使い分ける場合に非常に便利だと思いますので、この記事を参考にぜひ一度お試しください。