Versions Compared

Old Version 1

changes.mady.by.user Ng Miao Xuan

Saved on

compared with

New Version Current

changes.mady.by.user Ng Miao Xuan

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents


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. 

Warning

Be aware that this Plugin comes with the following limitation:

  1. Note on "Display From Right To Left" setting.
    Please be aware that the Organizational chart feature may not display as intended when the "Display From Right To Left" setting is enabled (Settings→General Settings→Display From Right To Left ). For best results its recommended to keep the "Display From Right To Left" setting disabled for the organizational chart section.

  2. Note on Pan and Zoom Configuration
    When the 'Enable Pan Zoom' option within the 'Configure Organizational Chart Menu' is enabled and the chart is panned extensively to one side, collapsing a node might cause it to disappear from the screen. Reloading the page will resolve this.

Plugin Information

Plugins Available in the Bundle:

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

Image RemovedImage Added

Figure 1: Organizational Chart when Human Resource and Admin is hovered

Get Started

Steps

Where to get the plugin

  1. Please visit https://github.com/jogetoss/organizational-chart for the plugin's source code.
  2. You can find the latest release at https://github.com/jogetoss/organizational-chart/releases.
  3. 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 4: Data Source from Joget Organization Chart


Form Data Method

1. Create a form to store the organization details.

...

2. Go to Generate App > Generate CRUD.

Figure 6: Form Builder - Generate CRUD


3. Go to the UI. You can see the CRUD created.

Image Modified

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.

Image Modified

Figure 8: UI Builder - Form Data Organization Chart


5. Input some records into the form.

Image Modified

Figure 9: Input Data for Organization Chart Form


6. View the Organization Chart. It is generated dynamically based on the form data.

Image Modified

Figure 10: Form Data Organization Chart

Organizational Chart Properties

Configure Organizational Chart Menu

Image Modified

Figure 11: Organization Chart Configuration

NameDescription
Label *Menu label.
Menu IDMenu element unique ID.
Layouts

The type of organizational chart layout.

  • Horizontal Chart

  • Vertical Chart

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. Default is true.

Configure Data Source

Image Modified

Figure 12: Organization Chart Configuration for Data Source

NameDescription
Data Source

The data of the organization chart to be extracted from.

  • Joget Organization Chart

  • Form Data

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 MappingsHeader 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

Image Modified

Figure 13: Organization Chart Configuration for Color Scheme

NameDescription
Parent Node Color

The parent node title color for Parent-Children-Sibling Behavior.

Sibling Node ColorThe sibling node title color for Parent-Children-Sibling Behavior.
Children Node ColorThe children node title color for Parent-Children-Sibling Behavior.
Node Title Background ColorThe hovered node title color for Parent-Children-Sibling Behavior.
Node Content Background ColorThe hovered node content color for Parent-Children-Sibling Behavior.
Title Font ColorThe hovered node title font color for Parent-Children-Sibling Behavior.
Body Font ColorThe hovered node body font color for Parent-Children-Sibling Behavior.


Download Demo App

  • View file
    nameAPP_OrganizationalChartSampleApp-1-
    20240108161106
    20240307125736.jwa
    height250