Dashboard Function: Add Parts
## Overview
Add parts to the dashboard.
Change the position and size of the added parts and then save the layout.
## Prerequisites
* You need "Site Administration Permission" to add parts.
* You need "Update Permission" to save the layout after changing the position and size of the added perspective.
## Operation Procedure
1. Open the target "[Dashboard](/en/manual/dashboard)".
1. From the "Manage" menu, click "Dashboard Management".
1. Click on the "Dashboard Parts" tab.
1. Click the "Create New" button.
1. Enter the appropriate settings and click the "Add" button.
1. Click the "Update" button in the command button area.
1. Return to the "[Dashboard](/en/manual/dashboard)" and change the position and size of the added part as needed. To change the position, drag and drop the part. To change the size, drag the diagonal double-arrow icon displayed in the bottom left of the part to the desired size.
1. Click the "Save Layout" button.
![image](https://pleasanter.org/binaries/3cafd56a009744a78f62fc8e7d18b59b)
## Asynchronous Loading
If you want to display dashboard parts with asynchronous loading, check the "Asynchronous Loading" checkbox on the "Dashboard Parts" tab.
![image](https://pleasanter.org/binaries/0144ca3121ff4965826b9ed6e2b1554a)
|Asynchronous Loading|Dashboard Display Behavior|
|:-|:-|
|Checked|Display data will be acquired for each part. Parts will be displayed in order starting from the parts for which data acquisition has been completed.|
|Unchecked|Display data for all parts will be acquired at once. The screen will not be displayed until all data acquisition is complete.|
### Asynchronous Loading Completion Event
If asynchronous loading is enabled, the content of the part will be updated when asynchronous loading is complete. If you use a script to customize the content of a part, such as creating a screen within a part using custom HTML, write that processing in the event (after_set_DashboardPart) that is executed when the loading of the part is complete.
##### JavaScript
```
// Event triggered when the asynchronous loading of the dashboard part is complete. {n} contains the part's ID.
$p.events.after_set_DashboardPart_{n} = function() {
// Write the process to customize the content of the part here.
};
```
For details on each part, please refer to the following.
[Dashboard Function: Add Parts: Quick Access](dashboard-quickaccess)
[Dashboard Function: Add Parts: Timeline](dashboard-timeline)
[Dashboard Function: Add Parts: Custom](dashboard-custom)
[Dashboard Function: Add Parts: Custom HTML](dashboard-customhtml)
[Dashboard Function: Add Parts: Calendar](dashboard-calendar)
[Dashboard Function: Add Parts: Kanban](dashboard-kanban)