Insert data into table while adding nodes of FamilyTree

Question

hope you all will be fine (sorry for my bad English), I am making a FamilyTree in Oracle apex using PL/SQL Dynamic Content following this example this. Here multiple nodes can be made but the problem is that actually I want to add Node's Data into database table ,How can I do It, Here is my code

declare
Begin
Htp.p('
<script src="https://balkan.app/js/FamilyTree.js"></script>
<div id="tree"/>
<script>
//JavaScript

FamilyTree.templates.tommy.nodeCircleMenuButton = FamilyTree.templates.tommy_female.nodeCircleMenuButton = FamilyTree.templates.tommy_male.nodeCircleMenuButton = {
    radius: 25,
    x: 230,
    y: 60,
    color: ''#fff'',
    stroke: ''#aeaeae''
};

var family = new FamilyTree(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name"
    },
    nodeCircleMenu: {
        editNode: {
            icon: FamilyTree.icon.edit(30, 30, ''#aeaeae''),
            text: "Edit node",
            color: "white"
        },
     },
       
});
family.nodeCircleMenuUI.on(''show'', function (sender, args) {
    var node = family.getNode(args.nodeId);
    if (FamilyTree.isNEU(node.mid)) {
        args.menu.husband = {
            icon: FamilyTree.icon.husband(30, 30, ''#F57C00''),
            text: "Add partner",
            color: "white"
        };
    }
    if (FamilyTree.isNEU(node.fid)) {
        args.menu.father = {
            icon: FamilyTree.icon.father(30, 30, ''#039BE5''),
            text: "Add Head",
            color: "white"
        };
    }
});
family.nodeCircleMenuUI.on(''click'', function (sender, args) {
    var node = family.getNode(args.nodeId);

    switch (args.menuItemName) {
        case "husband":
            family.addPartnerNode({ gender: ''male'', pids: [args.nodeId] });
            break;
        case "wife":
            family.addPartnerNode({ gender: ''female'', pids: [args.nodeId] });
            break;
        case "pet":
            family.addPartnerNode({ gender: ''pet'', pids: [args.nodeId] });
            break;
        case "mother":
            var data = { gender: ''female'' };
            if (!FamilyTree.isNEU(node.fid)) {
                data.pids = [node.fid];
            }
            family.addParentNode(args.nodeId, ''mid'', data);
            break;
        case "father":
            var data = { gender: ''male'' };
            if (!FamilyTree.isNEU(node.mid)) {
                data.pids = [node.mid];
            }
            family.addParentNode(args.nodeId, ''fid'', data);
            break;
        
        case "editNode": family.editUI.show(args.nodeId);
            break;
        default:
    };
});family.load([
]);</script>');end;

I am totally new programmer ,

Answer 1

You need to use the event listeners "add" and "update": https://balkan.app/FamilyTreeJS/API/classes/FamilyTree#on-1

You can also see some server isde examples for Org Chart JS (it is almost the same): https://balkan.app/OrgChartJS/Docs/GitHub