Fields

Define HTML fields

You can define fields using plain HTML. To bind fields, add the data-field attribute.

Let's use the following simple data:

[
    { 
        id: 1, 
        spouseIds: [2], 
        name: "Anna Smith",
        address: '45 Oak St, Springfield, Illinois'
    },
    { 
        id: 2, 
        name: "John Smith",
        address: '45 Oak St, Springfield, Illinois'
    }
]

Define a field in the template:

familyTree.template.html = function(node) {
    let name = node.familyMember.name ? node.familyMember.name : '';
    return `<h2 data-field="name">
                ${name}
            </h2>`;
}

In the following example, two fields are rendered only for the focused node:

familyTree.template.nodes.focus.html = function(node){
    let name = node.familyMember.name ? node.familyMember.name : '';
    let address = node.familyMember.address ? node.familyMember.address : '';
    return  `<div style="padding: 24px;">
                <h1 data-field="name">
                    ${name}
                </h1>
                <p data-field="address">
                    ${address}
                </p>
            </div>`;
}

Here is the result:

Edit in BALKAN Code

Define SVG fields

If your template does not need HTML fields, you can set html to an empty string and create SVG fields from scratch:

familyTree.template.html = function(node) { return `` };

familyTree.template.insertSvg = function(node) {
    return `<text fill="white" text-anchor="middle"
                x="${node.width / 2}" y="${node.height / 2}">
                ${node.familyMember.name}
            </text>`;
}

Edit in BALKAN Code

Add SVG fields

You can also append additional SVG fields with insertSvg:

familyTree.template.insertSvg = function(node) {
    return `<text fill="white" text-anchor="middle"
                x="${node.width / 2}" y="${node.height / 2 + 40}">
                ${node.familyMember.address}
            </text>`;
}

Edit in BALKAN Code

Add Image

If we have images in the data:

[
    { 
        id: 1, 
        spouseIds: [2], 
        link: "https://balkan.app",
        image: "https://cdn.balkan.app/shared/m30/1.jpg"
    },
    { 
        id: 2, 
        link: "https://balkan.app",
        image: "https://cdn.balkan.app/shared/w30/1.jpg"
    }
]

To make it simple here we will use the base templae:

familyTree.template = FamilyTree2.createTemplate("myTemplate", "base");
familyTree.templateName = "myTemplate";

With insertSvg, you can add an SVG image:

familyTree.template.insertSvg = function(node) {
    return `<image x="10" y="10" height="100" width="100"
        href="${node.familyMember.image}" />`;
}

Edit in BALKAN Code

Add Hyperlink

You can also add a hyperlink

If we have this data:

[
    { 
        id: 1, 
        spouseIds: [2], 
        name: "Elon Musk",
        wikiData: "Q317521"
    },
    { 
        id: 2, 
        name: "Shivon Zilis",
        wikiData: "Q112957545"
    }
]

We can add a hyperlink to Wikidata:

familyTree.template.html = function(node) {
    return `<a target="_blank"
               href="https://www.wikidata.org/wiki/${node.familyMember.wikiData}">
                ${node.familyMember.name}
            </a>`;
}

Edit in BALKAN Code