Creating Custom Template

In some cases you would like to create your own custom template. Basically, what you need to do is to inherit one of the predifined templates and to override some properties.

Family Tree JS visual components

You can change the look and feel of the following Family Tree JS components.

  1. Node
  2. Fields
  3. Image
  4. Link
  5. Node menu button
  6. Menu button
  7. Move icon
The first thing that you need to do is to inherit some of the existing templates: 
 
    FamilyTree.templates.myTemplate = Object.assign({}, FamilyTree.templates.tommy);

1. Node customization

If you want to change the color, shape or size of the node you have to define node and size


Here is an example: 

     FamilyTree.templates.myTemplate.size = [200, 200];
     FamilyTree.templates.myTemplate.node =
                '<circle cx="100" cy="100" r="100" fill="#4D4D4D" stroke-width="1" stroke="#aeaeae"></circle>';
     FamilyTree.templates.myTemplate.defs = '';

You need to define male and female templates: 

    FamilyTree.templates.myTemplate_male = Object.assign({}, FamilyTree.templates.myTemplate);
    FamilyTree.templates.myTemplate_male.node = '<circle cx="100" cy="100" r="100" fill="#039be5" stroke-width="1" stroke="#aeaeae"></circle>';
    FamilyTree.templates.myTemplate_female = Object.assign({}, FamilyTree.templates.myTemplate);
    FamilyTree.templates.myTemplate_female.node = '<circle cx="100" cy="100" r="100" fill="#FF46A3" stroke-width="1" stroke="#aeaeae"></circle';

You will need to modify the ripple, color, radius and rect 

     FamilyTree.templates.myTemplate.ripple = {
        radius: 100,
        color: "#e6e6e6",
        rect: null
    };

Or you can disable the ripple 

     FamilyTree.templates.myTemplate.ripple = {
        radius: 0,
        color: "none",
        rect:null
    };

2. Field customization

To change the position of the fields define field_0 and field_1. You can define as many fields as you want 

     FamilyTree.templates.myTemplate.field_0 = '<text style="font-size: 24px;" fill="#ffffff" x="100" y="90" text-anchor="middle">{val}</text>';
     FamilyTree.templates.myTemplate.field_1 = '<text style="font-size: 16px;" fill="#ffffff" x="100" y="60" text-anchor="middle">{val}</text>';

3. Image customization

To change the position of the image define img_0 

     FamilyTree.templates.myTemplate.img_0 =
        '<clipPath id="ulaImg">'
        + '<circle cx="100" cy="150" r="40"></circle>'
        + '</clipPath>'
        + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#ulaImg)" xlink:href="{val}" x="60" y="110" width="80" height="80">'
        + '</image>';

4. Link customization

To change the links between the nodes override link 

     FamilyTree.templates.myTemplate.link =
        '<path stroke="#686868" stroke-width="1px" fill="none" data-l-id="[{id}][{child-id}]" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />';

5. Node menu button customization

To change the position and the shape of the node menu button nodeMenuButton 

     FamilyTree.templates.myTemplate.nodeMenuButton =
        '<g style="cursor:pointer;" transform="matrix(1,0,0,1,93,15)" data-ctrl-n-menu-id="{id}">'
        + '<rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22">'
        + '</rect>'
        + '<line x1="0" y1="0" x2="0" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
        + '<line x1="7" y1="0" x2="7" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
        + '<line x1="14" y1="0" x2="14" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
        + '</g>';

7. Menu button customization

To change the shape and the color define menuButton 

     FamilyTree.templates.myTemplate.menuButton =
        '<div style="position:absolute;right:{p}px;top:{p}px; width:40px;height:50px;cursor:pointer;" data-ctrl-menu="">'
        + '<hr style="background-color: rgb(255, 202, 40); height: 3px; border: none;">'
        + '<hr style="background-color: rgb(255, 202, 40); height: 3px; border: none;">'
        + '<hr style="background-color: rgb(255, 202, 40); height: 3px; border: none;">'
        + '</div>';

8. Move icon customization

To change the tree move icon define pointer 

     FamilyTree.templates.myTemplate.pointer =
        '<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)">><g transform="matrix(0.3,0,0,0.3,-17,-17)">'
        + '<polygon fill="rgb(255, 202, 40)" points="53.004,173.004 53.004,66.996 0,120" />'
        + '<polygon fill="rgb(255, 202, 40)" points="186.996,66.996 186.996,173.004 240,120" />'
        + '<polygon fill="rgb(255, 202, 40)" points="66.996,53.004 173.004,53.004 120,0" />'
        + '<polygon fill="rgb(255, 202, 40)" points="120,240 173.004,186.996 66.996,186.996" />'
        + '<circle fill="rgb(255, 202, 40)" cx="120" cy="120" r="30" />'
        + '</g></g>';

Voila, here is the result:

BALKAN Code Edit in BALKAN Code

9. Other examples:

You can rotate the text using transform. 

     FamilyTree.templates.myTemplate.field_0 =
        '<text width="230" transform="translate(300, -70) rotate(90)" style="font-size: 18px;" fill="#fff" x="125" y="95" text-anchor="middle">{val}</text>';

If you have any difficulties to create a template, please contact us, we will create a template that matches your project design for FREE.


We would be happy if you share your template with us. Please send it as jsfiddle or an html file to support@balkan.app

In this article