How to Use the editUI`show Event Listener in OrgChart JS to Show a Custom Edit Form

OrgChart JS is a powerful tool for creating interactive organizational charts. One of its useful features is the ability to customize the edit form for nodes. In this blog post, we'll walk you through how to use the editUI show event listener to display a custom edit form for a node.

Code example

Step-by-Step Guide

1. Include OrgChart JS Library First, include the OrgChart JS library in your HTML file:

   <script src="https://cdn.balkan.app/orgchart.js"></script>
   <div id="tree"></div>

2. Initialize the Chart Create a new OrgChart instance. Here we bind the name field to the nodes:

   let chart = new OrgChart("#tree", {
       nodeBinding: {
           field_0: "name",
       },
   });

3. Load the Data Load the data into the chart:

   chart.load([
       { id: 1, name: "John" },
       { id: 2, pid: 1, name: "Ana" },
       { id: 3, pid: 1, name: "Mark" }
   ]);

4. Customize the Edit Form Use the editUI show event listener to customize the edit form based on the node's ID. Make sure to include this event listener before loading the data:

   chart.editUI.on('show', function (sender, id) {
       if (id == 1) {
           chart.config.editForm.buttons = {
               edit: null,
               share: {
                   icon: OrgChart.icon.share(24, 24, '#fff'),
                   text: 'Share'
               },
               pdf: {
                   icon: OrgChart.icon.pdf(24, 24, '#fff'),
                   text: 'Save as PDF'
               },
               remove: null
           };
       } else {
           chart.config.editForm.buttons = {
               edit: {
                   icon: OrgChart.icon.edit(24, 24, '#fff'),
                   text: 'Edit',
                   hideIfEditMode: true,
                   hideIfDetailsMode: false
               },
               share: {
                   icon: OrgChart.icon.share(24, 24, '#fff'),
                   text: 'Share'
               },
               pdf: {
                   icon: OrgChart.icon.pdf(24, 24, '#fff'),
                   text: 'Save as PDF'
               },
               remove: {
                   icon: OrgChart.icon.remove(24, 24, '#fff'),
                   text: 'Remove',
                   hideIfDetailsMode: true
               }
           };
       }
   });

Explanation

• Event Listener: The editUI show event listener is triggered when the edit form is shown. It allows you to customize the form based on some conditions.
• Custom Buttons: Depending on the node's ID, different buttons are displayed in the edit form. For example, the node with ID 1 has only "Share" and "Save as PDF" buttons, while other nodes have "Edit", "Share", "Save as PDF", and "Remove" buttons.

Custom Edit for a node - OrgChart JS

This simple customization can help you tailor the user experience based on specific nodes in your organizational chart. Happy coding!