Custom details view - OrgChart JS | BALKANGraph

Custom details view with custom template. author(s): BALKAN Software Plamen Peshev

by Serhii Matrunchyk

HTML

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>


<div id="editForm"
style="
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px; display: none; opacity: 0;
text-align:center; border: 1px solid #aeaeae;width:300px;background-color:#fff;z-index:10000;border-radius: 15px; filter: drop-shadow(5px 5px 5px #909090);">
<table style="margin: 10px; width: 280px;">
  <tr>
    <td colspan="2" style="text-align: right;">
      <span id="close" style="font-weight: 300;font-family: Arial, sans-serif; cursor: pointer;">x</span>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <td>
            <img id="img" src="" style="width: 70px; border-radius: 35px;" />
          </td>
          <td style="text-align: left; padding-left: 10px;">
            <div id="name" style="font-size: 24px;font-weight: bold;"></div>
            <div id="title"></div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <svg style="height: 24px; width:24px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path fill="#ccc" d="M467,61H45C20.218,61,0,81.196,0,106v300c0,24.72,20.128,45,45,45h422c24.72,0,45-20.128,45-45V106
              C512,81.28,491.872,61,467,61z M460.786,91L256.954,294.833L51.359,91H460.786z M30,399.788V112.069l144.479,143.24L30,399.788z
               M51.213,421l144.57-144.57l50.657,50.222c5.864,5.814,15.327,5.795,21.167-0.046L317,277.213L460.787,421H51.213z M482,399.787
              L338.213,256L482,112.212V399.787z" />
        </g>
      </svg>
    </td>
    <td id="email" style="color: #37D8BF;text-align: left; padding-left: 10px;"></td>
  </tr>

  <tr>
    <td>
      <svg style="height: 24px; width:24px" viewBox="0 0 512.021 512.021" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path fill="#ccc"
            d="m367.988 512.021c-16.528...

CSS

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: Helvetica;
}

#tree {
  width: 100%;
  height: 100%;
  background-color: #F6F7F8;
}


.bg-toolbar-container {
  top: 30px;
  bottom: initial !important;
}

JavaScript

window.onload = function () {
  OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);

  OrgChart.templates.myTemplate.size = [125, 170];
  OrgChart.templates.myTemplate.node = '<rect x="0" y="0" height="170" width="125" fill="#ffffff" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect>';

  OrgChart.templates.myTemplate.field_0 = '<text width="100" text-overflow="multiline" style="font-size: 24px;font-weight: bold;" fill="#2D2D2D" x="62.5" y="85" text-anchor="middle">{val}</text>';
  OrgChart.templates.myTemplate.field_1 = '<text width="110" text-overflow="multiline"  style="font-size: 14px;" fill="#2D2D2D" x="62.5" y="132" text-anchor="middle">{val}</text>';

  OrgChart.templates.myTemplate.img_0 = '<clipPath id="{randId}"><circle cx="60" cy="37" r="30"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="30" y="7"  width="60" height="60"></image>';


  OrgChart.templates.myTemplate.plus = '<circle cx="15" cy="15" r="15" fill="#57B6F1" stroke="#ffffff" stroke-width="1"></circle>'
    + '<line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#ffffff"></line>'
    + '<line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#ffffff"></line>';
  OrgChart.templates.myTemplate.minus = '<circle cx="15" cy="15" r="15" fill="#37D8BF" stroke="#ffffff" stroke-width="1"></circle>'
    + '<line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#ffffff"></line>';



  const editForm = function () {
    this.nodeId = null;
  };

  editForm.prototype.init = function (obj) {
    const that = this;

		this.obj 					= obj;
    this.editForm 		= document.getElementById("editForm");
    this.emailInput 	= document.getElementById("email");
    this.addressInput = document.getElementById("address");
    this.phone1Input 	= document.getElementById("phone1");
    this.phone2Input 	= document.getElementById("phone2");
    this.imgInput 		= document.getElementById("img");
   ...