Fields

Define HTML fields

We can define fields using plain HTML. To bind the fields we add data-field property. Here is how we define a field in the template:

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

In the below code we define 2 fields only for the focused node:

       Copy 
    template.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>`;
    }
 

Hee is the result:

Edit in BALKAN Code

Define SVG fields

If you have any HTML fields in the template, you can set the HTML to an empty string and create the SVG fields from scrach:

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

    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

Here is how to add a field to the SVG:

       Copy 
    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

With insertSvg we can add an SVG image:

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

Edit in BALKAN Code

Add Hyperlink

And here is how to add a hyperlink:

       Copy 
    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