javascriptfamily-tree

Customization of the Balkan FamilyTree Js library


Can you tell me if there is any possibility of adding custom buttons or links, or changing existing buttons and their routes on the display of the library family tree? For example, add a button next to a person's circle.enter image description here

Example of filling in the code for tree rendering

var family = new FamilyTree(document.getElementById("tree"), {
        template: 'john',
        
        nodeMouseClick: FamilyTree.action.details,
        siblingSeparation: 150,
        enableSearch: false,
        nodeBinding: {
            img_0: "img",
            field_0: 'name',
            field_1: "date",
        },

        editForm: {
            titleBinding: false,
            photoBinding: "img",
            edit: false,
            generateElementsFromFields: false,
            addMore: false,
            cancelBtn: 'Закрыть',

            saveAndCloseBtn: 'Редактировать',
            elements: [
                {type: 'textbox', label: 'Полное имя', id: 'name', binding: 'fullname'},
                [
                    {type: 'textbox', label: 'Дата рождения', binding: 'birthDate'},
                    {type: 'textbox', label: 'Дата смерти', binding: 'deathDate'}
                ],
                [
                    {type: 'textbox', label: 'Место рождения', binding: 'placebirth'},
                    {type: 'textbox', label: 'Место смерти', binding: 'burialplace'},
                ],
                {type: 'textbox', label: 'Причина смерти', binding: 'reasondeath'},
                // {type: 'textbox', label: 'Photo Url', }


            ],
            buttons: {
                edit: {
                    icon: FamilyTree.icon.edit(24, 24, '#fff'),
                    text: 'Edit',
                    hideIfEditMode: true,
                    hideIfDetailsMode: false
                },
                remove: null,
                share: null,
                pdf: null
            }
        }`

Solution

  • I'm one of the developers of BALKAN FamilyTreeJS

    Created a Code demo for you with a button and on click event listener

    enter image description here