Introduction
Organizational Chart Userview Menu plugin is used to visualise organizational charts based on Joget Organization Chart data or Form Data. This plugin efficiently retrieves information related to organizations, departments, sub-departments, users and their job titles.
Plugin Information
Plugins Available in the Bundle:
Organizational Chart
This plugin bundle is compatible with Joget DX 8.
Expected Outcome
The user is able to view the organization chart data based on their plugin configurations, whether for it to be extracted from Joget Organization Chart, or from the Form Data.
Figure 1: Organizational Chart
Get Started
Steps
Where to get the plugin
- Please visit https://github.com/jogetoss/organizational-chart for the plugin's source code.
- You can find the latest release at https://github.com/jogetoss/organizational-chart/releases.
- Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.
How to install and use the plugin
Import Demo App
You can choose to import the demo app or create the app from scratch.
For demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (refer to another KB - Import Joget App for more details).
To create the app from scratch, please continue following the steps below.
Joget Organization Chart Data Method
1. Create a UI. Go to the UI and drag the Organizational Chart Userview Menu into the UI. Fill in the plugin configurations based on Organizational Chart Properties. For Data Source, select Joget Organization Chart.
Figure 2: UI Builder - Joget Organization Chart
2. Publish and launch the UI. You can now see the Organization Chart.
Figure 3: Joget Organization Chart View
3. The data is retrieved from Joget Organization Chart which can be accessed in the Admin Panel > Users. For more information, please refer to Organization, Department, Grade.
Figure 4: Data Source from Joget Organization Chart
Form Data Method
1. Create a form to store the organization details.
Figure 5: Form Builder - Create Organization Details for Form Data
2. Go to Generate App > Generate CRUD.
Figure 6: Form Builder - Generate CRUD
3. Go to the UI. You can see the CRUD created.
Figure 7: UI Builder - CRUD for Organization Chart Form
4. Now drag the Organizational Chart Userview Menu into the UI. Fill in the plugin configurations based on Organizational Chart Properties. For Data Source, select Form Data.
Figure 8: UI Builder - Form Data Organization Chart
5. Input some records into the form.
Figure 9: Input Data for Organization Chart Form
6. View the Organization Chart. It is generated dynamically based on the form data.
Figure 10: Form Data Organization Chart
Organizational Chart Properties
Configure Organizational Chart Menu
Figure 11: Organization Chart Configuration
| Name | Description |
|---|---|
| Label * | Menu label. |
| Menu ID | Menu element unique ID. |
| Layouts | The type of organizational chart layout.
|
| Enable Parent-Children-Sibling Behavior | If enabled, the behavior is enabled such as showing different colors to emphasize the different levels of chart when hovering on one of the node. |
| Enable Pan Zoom | If enabled, allows user to pan zoom the organization chart. If not enabled, the organization chart view is fixed. |
| Show All Levels | If enabled, all the levels will be visible. If not enabled, all the levels are collapsed. |
Configure Data Source
Figure 12: Organization Chart Configuration for Data Source
| Name | Description |
|---|---|
| Data Source | The data of the organization chart to be extracted from.
|
| Select Organization * | Select box to select from existing Joget Organization. |
| Form * | This field is visible when "Data Source" is Form Data. Defines the form for the defined form data for organization chart. |
| Field Mappings | Header field for field mappings. |
| Department Field * | This field is visible when "Data Source" is Form Data. Field with Department Name, data sample e.g: Marketing. |
| Name Field * | This field is visible when "Data Source" is Form Data. Field with Name, data sample e.g: Clark Kent. |
| Job Title Field * | This field is visible when "Data Source" is Form Data. Field with Job Title, data sample e.g: HOD |
| Parent ID Field * | This field is visible when "Data Source" is Form Data. Field with Parent ID of Department Field. |
Configure Color Scheme
Figure 13: Organization Chart Configuration for Color Scheme
| Name | Description |
|---|---|
| Parent Node Color | The parent node title color for Parent-Children-Sibling Behavior. |
| Sibling Node Color | The sibling node title color for Parent-Children-Sibling Behavior. |
| Children Node Color | The children node title color for Parent-Children-Sibling Behavior. |
| Node Title Background Color | The hovered node title color for Parent-Children-Sibling Behavior. |
| Node Content Background Color | The hovered node content color for Parent-Children-Sibling Behavior. |
| Title Font Color | The hovered node title font color for Parent-Children-Sibling Behavior. |
| Body Font Color | The hovered node body font color for Parent-Children-Sibling Behavior. |