Organizational Chart Editor Demo & Matrix Children Layout

This Organization Chart shows hierarchy having large number of direct reports.

Leaves are children without own children. For example: all children can be placed horizontally regardless of number of levels in hierarchy and leaves are shaped into matrixes. This helps to adopt to organizational chart hierarchy changes without necessity of manual layout.

This demo implemented in form of stand alone jQuery UI widget wrapping Organizational Chart bpOrgDiagram widget inside, see bporgeditor.latest.js for sources. Consider it as example of application component implemented in jQuery UI widget specification. It is licensed under the same license as jQuery itself, so it can be used for code snippets without any limitations.

Organizational chart editor assumes "document" editing approach, that means it does not provide information about exact change user made in hierarchy, but only notifies about it. So application can load and save the whole hierarchy. This is convinient for Undo/Redo implementation, so user can make significant change in hierarchy and then undo in case of mistake. Some options and operations are not always obvious.

In order to store changes in database, application should keep original copy of hierarchy before editing and compaire it to incomig changes from widget. All missing items should be removed from database. All new items should be added. All matching items should be updated. If you need to keep history of changes in database, consider to store the whole hierarchy as object serialized into JSON in blob field in database.

 

Basic Primitives

JavaScript jQuery UI Widgets

  • Increase font size
  • Default font size
  • Decrease font size