Fields

There are two types of fields, node fields and link fields, you can define unlimeted number of fields. To do that you have to override the template.

Node text fields

In the following example we are going to demonstrate how to add four text fields. Define 4 fields in the template:

 
    
FamilyTree.templates.tommy.field_0 =
    `<text class="field_0" style="font-size: 20px;" fill="#ffffff" x="125" y="30" text-anchor="middle">{val}</text>`;
FamilyTree.templates.tommy.field_1 =
    `<text class="field_1" style="font-size: 14px;" fill="#ffffff" x="125" y="50" text-anchor="middle">{val}</text>`;
FamilyTree.templates.tommy.field_2 =
    `<text class="field_2" style="font-size: 14px;" fill="#ffffff" x="125" y="70" text-anchor="middle">{val}</text>`;
FamilyTree.templates.tommy.field_3 =
    `<text class="field_3" style="font-size: 14px;" fill="#ffffff" x="125" y="90" text-anchor="middle">{val}</text>`;
  
    

Then define the binding in the family definition:

 
    
     nodeBinding: {
        field_0: "name",
        field_1: "gender",
        field_2: "phone",
        field_3: "email"
    },

    

Here is the result:


Note that the email in the last node is missing, the fields are not mandatory in the JSON object.

Node image fields

In the following example we are going to demonstrate how to add two image fields. Define two fields in the template:

 
    
FamilyTree.templates.tommy.img_0 = 
    `<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="20" y="-15" width="80" height="80"></image>`;
FamilyTree.templates.tommy.img_1 = 
    `<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="150" y="-15" width="80" height="80"></image>`;

    

Then define the node binding in the configuration:

 
    
    nodeBinding: {
        field_0: "name",
        img_0: "photo1",
        img_1: "photo2",
    } 
    

Node SVG fields

The nodes are not limited to text and image fileds, you can define any svg element as field. In the following example we are going to demonstrate how to add phone call icon with a link. Define the field in the template:

 
    
    FamilyTree.templates.tommy_male.call = '<g transform="translate...';
    FamilyTree.templates.tommy_female.call = '<g transform="translate...';

Then add the field in nodeBinding:

 
    
        call: "phone"
    

Here is the result:


Node HTML fields

In some cases you will need to add HTML tags inside the node.

In the following example we are going to demonstrate how to add HTML tags into the html. Define new field in the template:

 
    
FamilyTree.templates.tommy.html = 
    `<foreignobject class="node" x="10" y="10" width="200" height="100">{val}</foreignobject>`;

    

Add the field in nodeBinding:

 
    
        html: "html"
    
Data example:
 
    
        { id: "1", html: "<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id pellentesque lacus.</div>" },
    

Here is the result:


Another example could be if spefic css property is not supported in SVG, the demo below demostrates how to flip nodes with perspective css property:


Hyperlink text field

You can use onField event to change a node field value. For example you can add a clickable link that will open another page. Here is the example:

 
    

family.onField((args) => {
     if (args.name == 'name') {
        var name = args.data["name"];
        var link = args.data["link"];
        args.value = '<a target="_blank" href="' + link + '">' + name + '</a>';
     }
});
    
You should load the data after the event listener:
 

family.load([
    { id: 1, name: "BALKAN App", link: "https://balkan.app" },
])