Organizational Chart Userview Menu

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.

Get started

Where to get the plugin

You can download the Organizational Chart Userview plugin from the JogetOSS Github Repository.

How to install

1. Click Download on this plugin screen (It will be a .jar file).
2. Go to your Joget localhost or server. In the Joget Console, go to Admin Bar > Systems Settings > Manage Plugins and click the Upload Plugins button.
3. Under Upload Plugin, select the plugin .jar file you downloaded and click Upload.
4. Depending on the plugin type, you can now view your new plugin in your form, List, or UI Builder.
5. Remember to uninstall the old plugin before uploading a new version.
6. The Joget Knowledge Base has more information on managing and developing plugins.

How to use it

Importing demo app

You can import the demo app or create the app from scratch.

For the demo app, go to Joget Home or All Apps and click Import App to import the downloaded demo app (See Import Joget App for more details).

To create the app from scratch, 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 it.
2. Fill in the plugin configurations based on the Organizational Chart Properties. For Data Source, select Joget Organization Chart.
   
   
3. Publish and launch the UI. You can now see the Organization Chart.
   
4. The data is retrieved from the Joget Organization Chart, which can be accessed in the Admin Panel > Users. For more information, see Organization, Department, and Grade.
   

Form data method

1. Create a form to store the organization details.
   
2. Go to Generate App > Generate CRUD.
   
3. Go to the UI. You can see the CRUD created.
   
4. Drag the Organizational Chart Userview Menu into the UI.
5. Fill in the plugin configurations based on Organizational Chart Properties.
6. For Data Source, select Form Data.
   
   
7. Input some records into the form.
   
8. View the Organization Chart. It is generated dynamically based on the form data.
   

Organizational Chart Properties

Fields to configure:

• Label*: Menu label.
• Menu ID: Menu element unique ID.
• Layouts: Types of organizational chart layouts:
  • Horizontal Chart
  • Vertical Chart
• Enable Parent-Children-Sibling Behavior:
  • If enabled, highlights different levels of the chart with different colors when hovering over a node.
• Enable Pan Zoom:
  • If enabled, allows users to pan and zoom the organization chart. If not enabled, the chart view remains fixed.
• Show All Levels:
  • If enabled, all levels of the chart are visible.
  • If not enabled, all levels are collapsed. Default is true.

Configure data source

Fields to configure:

• Data Source: The data of the organization chart to be extracted from:
  • Joget Organization Chart
  • Form Data
• Select Organization: Select the box to choose from the existing Joget Organization.
• Form: This field is visible when the Data Source is Form Data.
  Defines the form for the defined form data for the organization chart.

Field mappings

• Department Field: This field is visible when the Data Source is Form Data. Field with department name and data sample, e.g., Marketing.
• Name Field: This field is visible when the Data Source is Form Data. Field with Name, data sample, e.g., Clark Kent.
• Job Title Field: This field is visible when the 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 a Parent ID of Department Field.

Configure color scheme

Fields to configure:

• 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.

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.

Download plugin

• Organizational Chart

Download sample app