Edit

Open Edit Form

The Edit Form can be opened from the node menu, node click event, setting an option called nodeMouseClick or simply calling family.nodeUI.show method. Here is an example that demosntrates how to open the Edit Form with nodeMenu: 

 
 
    nodeMenu:{
        details: {text:"Details"},
        edit: {text:"Edit"},

    },
Open the Edit Form from node click event: 
 
 
family.onNodeClick((args) => {
    family.editUI.show(args.node.id, false); 
    // sender.editUI.show(args.node.id, true);  details mode
    return false; //to cansel the click event
});
nodeMouseClick option values: 
 
 
    nodeMouseClick: FamilyTree.action.edit, // edit mode
    //nodeMouseClick: FamilyTree.action.details, // details mode
    //nodeMouseClick: FamilyTree.action.none, // prevent opening

As you can see the Edit Form can be opened in two modes, edit mode and details mode, the details mode is read only and it is useful when the user has read only permissions. If you want the edit button in the Edit Form to be disabled set editForm.readOnly option to true: 

 
 
    editForm: {readOnly: true}

Configure Edit Form

The Edit Form is fully configurable and consists of the following components, Title, Photo, Buttons, Elements(inputs) and add "Add More Fields". You can bind Title, Photo and Elements to your json data. Lets assume you have the folloing json data: 

    
 
let nodes = [{ id: 1, Name: "John Smith", ImgUrl: "https://cdn.balkan.app/shared/anim/1.gif"}]
Here is how we can bind the title and the photo in the edit form: 
    
 
    editForm: {titleBinding: "Name", photoBinding: "ImgUrl"}

FamilyTree JS will display "Name" as Title and "ImgUrl" as Photo and "Name" and "ImgUrl" input Elements will be auto generated. If you want to change the labels of the auto generated input Elements set generateElementsFromFields option to false and bind input Elements to your data. You can add only the elements that you'd like to show. The below example will hide the photo link: 

    
 
    editForm: {
        generateElementsFromFields: false,
        elements: [
            { type: 'textbox', label: 'Full Name', binding: 'Name' },
            { type: 'textbox', label: 'Phone number', binding: 'phone' }        
        ]
    }

In the current version supported input Elements are textbox, select, multiselect, date and checkbox: 

  
   
            { type: 'textbox', label: 'Full Name', binding: 'EmployeeName'},
            { type: 'date', label: 'Start Date', binding: 'sdate' }
            { type: 'checkbox', label: 'Is Active', binding: 'active' },
            { type: 'select', options: [
                    {value: 'bg', text: 'Bulgaria'},
                    {value: 'ru', text: 'Russia'}], 
                label: 'Country', binding: 'country' },     
            { type: 'multiSelect', options: [
                    { value: 'tag0', text: 'Tag 0' },
                    { value: 'tag1', text: 'Tag 1' },
                    { value: 'tag2', text: 'Tag 2' },
                    { value: 'tag3', text: 'Tag 3' },
                    { value: 'tag4', text: 'Tag 4' },
                    { value: 'tag5', text: 'Tag 5' },
                    { value: 'tag6', text: 'Tag 6' }],
                label: 'Tags', binding: 'tags'
            }

Also you can add required or/and email validations to the textbox: 

  
   
            { 
                type: 'textbox', label: 'Email Address', binding: 'Email', 
                vlidators: { required: 'Is required', email: 'Invalid email' } 
            }

Here is how you can configure the Buttons: 

  
   
    editForm: {
        buttons:  {
            edit: {
                icon: FamilyTree.icon.edit(24,24,'#fff'),
                text: 'Edit',
                hideIfEditMode: true,
                hideIfDetailsMode: false
            },
            share: {
                icon: FamilyTree.icon.share(24,24,'#fff'),
                text: 'Share'
            },
            pdf: {
                icon: FamilyTree.icon.pdf(24,24,'#fff'),
                text: 'Save as PDF'
            },

        }
    }

If you don't need a particular button, you can set it to null. 

    
 
    editForm: {
        buttons:  {
            pdf: null
        }
    }

Set hideIfEditMode to true if you want specified button to be hidden in edit mode, and set hideIfDetailsMode to be hidden in details mode. Built-in buttons with actions are:

  • edit: will change the Edit Form to edit mode
  • share: is using the native share feature of the device
  • pdf: will export the data of the node to A4 pdf document
BALKAN Code Edit in BALKAN Code

You can set the text for the "Cancel" and "Save and close" buttons: 

    
 
    editForm: {
        cancelBtn: 'Close',
        saveAndCloseBtn: 'Save'
    }

You can change the Edit Form color for a node with CSS and node tags, see the CSS from the demo below or click one of the nodes to see the Edit Form:

BALKAN Code Edit in BALKAN Code

Add Your Buttons

In some cases you may want to add more buttons to the Edit Form, for example button that will change the template of the selected node or export to svg or open a new browser tab. The only thing that you will need is an svg image (icon). The demo below demonstrates how to open google maps for a node:

BALKAN Code Edit in BALKAN Code

"Add more fields"

To can change the text "Add More Fileds", or to hide it, set addMore, addMoreBtn and addMoreFieldName to what you need or to empty string or null: 

    
 
    editForm: {
        addMore: 'Add more elements',
        addMoreBtn: 'Add element',
        addMoreFieldName: 'Element name',
    }

Add Your Elements

Also you can add custom input Elements to Edit From by adding new static method to OrgChart.elements object. In the following demo we will add custom textarea Element to the Edit Form, click JavaScript tab to see the code:

BALKAN Code Edit in BALKAN Code

Custom Edit Form

If you dont like our Edit Form you can define your own. The first thing that you have to do is to create javascript class with the following methods:

 
 
let editForm = function () {

};

editForm.prototype.init = function (obj) {

};

editForm.prototype.show = function (node) {

};

editForm.prototype.hide = function (showldUpdateTheNode) {

};

Then instantiate the editForm object

 
 
    editUI: new editForm(),

Here is an example (to see the Edit Form click one the nodes):

BALKAN Code Edit in BALKAN Code

In this article