Overview

This example was developed to showcase the usage of the OrgChart widget used to display data of an organization in the tree data structure.

We have optimized this widget to be highly scalable and working well even with thousands of entries.

Stand-alone widget link: Stand-alone Widget

Documentation

DEMO USER:
User name: orguser
Password: 1

Org-Chart widget
This widget was developed to display data of an organization in the tree data structure using our OrgChart widget.
We have optimized the widget to be highly scalable and working well even with thousands of entries.

Organizations tab
Overview of organizations, organization entity could be an entire company or a company subdivision. 
Upon selecting any organization a read-only OrgChart widget preview of the organization is shown.

Positions tab
Where new position/employee entities are created or edited and used in the Designer tab

Designer tab
Contains the editable OrgChart widget with all the functionality listed below:  

Supported features:

• It is possible to export the entire structure into an SVG file that is compatible with PowerPoint or other third party applications
• Fully functional search
• Zoom feature
• Drag and drop features
• Entries with profile pictures
• Detach function

Configuration of the Org-Chart widget:
See screenshots for further information.

Behavior tab

On Click: Microflow actions

• ACT_OrgHelper_SetSelectedPosition
  • Selects entity and displays it’s attributes at the bottom of the screen
• ACT_OrgHelper_DoNothing
  • This is used instead of regular Do Nothing on click action to prevent errors
  • Do not use this microflow for read-only OrgChart, the widget will default to the nanoflow actions use default Do Nothing

On Drag Start: Nanoflow action

• ACT_OrgHelper_SetDragStartPos
  • JavaScript callback at the end of the nanoflow must not be removed to ensure proper function

On Drag End: Nanoflow action

• ACT_OrgHelper_SetDragEndPos