Overview of Our Organizational Chart Editor

Starting with version 1.1, the dhtmlxDiagram library provides its users with the possibility to adjust on-the-fly changes to the organizational chart. Our brand new Org Chart Editor significantly simplifies the way of modifying the appearance of the diagram. There’s no longer any need to mess with the source code when you want to add some changes. From now on you can customize the appearance of you app either using drag-and-drop oriented interface of the editor or changing the properties via the editor’s sidebar.

In this article, we’ll consider the way of adding the editor to your app and check the features it provides.

Adding Live Editor to Your Org Chart App

First, you have to add a new container to the page and initialize the editor within it. The next step is to create a button that runs the editor. It should contain the onclick event that is required to call the function that describes the logic for running the org chart editor. After the application is initialized, the editor window is hidden. All that a user sees is the org chart and the Edit button:

To enable such behavior we have to make the editor window hidden by default. To run the editor, a user should click the Edit button. On running the editor, the application will hide container with the organizational chart, and the container with the editor will appear on the screen:

You can check our org chart editor guide to learn how everything works and what code is required for adding the Editor to your application.

Working With the Org Chart Editor

The Toolbar

The toolbar of the org chart editor contains three types of buttons:

  • the Reset Changes button allows resetting all made changes;
  • the Apply All button allows applying all made changes;
  • using the Reset and Apply buttons you can reset changes to the previous step or revert them;

Our editor provides two ways of changing the state of the organizational chart. First, you can use the interface of the org chart. The second option is to apply changes with the use of the sidebar of Editor.

Using the Interface for Editing the Chart

The toolbar contains four buttons that allow performing the following actions:

  • add a sub-node for the selected node
  • delete the selected node (except for the root one)
  • choose vertical or horizontal arranging mode

Here’s how the vertical arranging mode looks:

Besides that, the org chart editor has drag-and-drop support. It allows you to edit the chart using your mouse. You can drag a particular node to change its position. You can also drag the root node in order to change the position of the whole diagram.

Each selected node has special resizing handles that you can use to change its size:

To edit the organizational chart you can use the sidebar as well.

Using the Sidebar of the Editor

You can change the title of the node and edit the displayed text. The editor allows uploading an image for the card from your computer. Using the colorpicker, you can modify the color of the header. Besides that, the sidebar allows setting the exact size of the selected node in pixels and change its position relative to the initial one.

To learn more about the possibilities of the editor and its API, visit this documentation page.

Here we post news about our JavaScript UI libraries. In addition to this, we also share useful tips, news and articles about JavaScript.