ダッシュボード機能:パーツの追加
## 概要
ダッシュボードにパーツを追加します。
追加したパーツの位置、サイズを変更した後にレイアウトを保存します。
## 前提条件
* パーツの追加を行うには「サイトの管理権限」が必要です。
* 追加したパースの位置、サイズ変更後のレイアウト保存を行うには「更新権限」が必要です。
## 操作手順
1. 対象の[ダッシュボード](/ja/manual/dashboard)を開いてください。
1. 「管理」メニューから「ダッシュボードの管理」をクリックしてください。
1. 「ダッシュボードパーツ」タブをクリックしてください。
1. 「新規作成」ボタンをクリックしてください。
1. 適宜設定内容を入力後、「追加」ボタンをクリックしてください。
1. コマンドボタンエリア部の「更新」ボタンをクリックしてください。
1. [ダッシュボード](/ja/manual/dashboard)に戻り、追加したパーツの位置、サイズを適宜変更してください。位置変更はパーツをドラッグ&ドロップしてください。サイズ変更はパーツの左下に表示する斜め両矢印アイコンをドラッグして任意のサイズに変更してください。
1. 「レイアウトの保存」ボタンをクリックしてください。
![image](https://pleasanter.org/binaries/8a448bcedb3642af9ee08845f1c9c60d)
## 非同期読み込み
ダッシュボードパーツを非同期読み込みで表示させたい場合には、「ダッシュボードパーツ」タブの「非同期読み込み」チェックボックスにチェックを入れてください。
![image](https://pleasanter.org/binaries/994cad6538144e2ea759b45f23fdb4f3)
|非同期読み込み|ダッシュボード表示時の動作|
|:-|:-|
|チェックあり|パーツ毎に表示データを取得します。データの取得が完了したパーツから順次表示を行います。|
|チェックなし|全てのパーツの表示データを一度に取得します。全データの取得が完了するまで画面は表示されません。|
### 非同期読み込み完了時のイベント
非同期読み込みを有効にすると、パーツの内容は非同期読み込みが完了した時点で更新されます。カスタムHTMLなどでパーツ内の画面を作成するなど、パーツの内容をカスタマイズするスクリプトを使う場合には、その処理をパーツの読み込みが完了した時に実行されるイベント(after_set_DashboardPart)内に記述してください。
##### JavaScript
```
//ダッシュボードパーツの非同期読み込み完了時のイベント。{n}にはパーツのIDが入ります。
$p.events.after_set_DashboardPart_{n} = function() {
//ここにパーツの内容をカスタマイズする処理を記述
};
```
各パーツについての詳細は下記をご参照ください。
[ダッシュボード機能:パーツの追加:クイックアクセス](dashboard-quickaccess)
[ダッシュボード機能:パーツの追加:タイムライン](dashboard-timeline)
[ダッシュボード機能:パーツの追加:カスタム](dashboard-custom)
[ダッシュボード機能:パーツの追加:カスタムHTML](dashboard-customhtml)
[ダッシュボード機能:パーツの追加:カレンダー](dashboard-calendar)
[ダッシュボード機能:パーツの追加:カンバン](dashboard-kanban)