How to create layout with HTML node in JavaScript Diagram?

This article explains how to create a layout with an HTML node in a JavaScript Diagram. HTML elements can be embedded in the JavaScript Diagram through the HTML type node. The shape property of the node allows you to set the type of node, and to create an HTML node, it should be set as "HTML."

Diagram provides a set of built-in automatic layout algorithms, which are used to arrange nodes automatically based on a predefined layout logic.

It includes the following layout modes:

• Hierarchical layout
• Organization chart layout
• Radial tree layout
• Symmetric layout
• Mind Map layout
• Complex hierarchical tree layout

Create layout in diagram

1. To generate a layout from the DataSource, you have to define the business object and add the necessary data to the DataSource collection. During the layout generation, nodes and connectors can be generated automatically with the information provided through the DataSource, and those items will be added to the NodeCollection and ConnectorCollection respectively.
2. Diagram has various layouts you can set as per requirement. Layout should be defined while initializing the diagram. "OrganizationalChart" type layout is used in this example. The following code explains how to define the layout.  

    let diagram: Diagram = new Diagram({
        width: '100%', height: '499px', 
       
         //Configures automatic layout
         layout: {
            type: 'OrganizationalChart',
                getLayoutInfo: (node, options) => {
                  /* tslint:disable:no-string-literal */
                  if (node.data['Role'] === 'General Manager') {
                    options.assistants.push(options.children[0]);
                    options.children.splice(0, 1);
                  }
                  if (!options.hasSubTree) {
                    options.type = 'Right';
                  }
                }
        },
        nodeTemplate:'#nodetemplate',
        getNodeDefaults: nodeDefaults,
}

Create the layout with HTML Node

1. To create an HTML node, you should set the type of the shape as HTML. The following code example explains the definition of the shape type as HTML.
2.  To add a template, define the template in the HTML file and append the ID to the nodeTemplate property.

function nodeDefaults(obj, diagram) {
  obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };
  obj.expandIcon = {
    height: 10,
    width: 10,
    shape: 'None',
    fill: 'lightgray',
    offset: {x: 0.5, y: 1}
  };
  obj.shape = { type: 'HTML' };
}

<script id="nodetemplate" type="text/x-template">
    <div>
    <div class=" componentSummary">
      <h1 class="myTitle">${data.Role}</h1>
      <div class="componentSummaryDetails">
        <div class="details">
          <h2>0.2 GB</h2>
          <span class="pf-emphasis">DATA2</span>
        </div>
        <div class="details">
          <h2>0.3%</h2>
          <span class="pf-emphasis">DATA3</span>
        </div>
      </div>
    </div>
  </div>
</script>

Refer to the working sample for additional details and implementation:  https://stackblitz.com/edit/7du2vj-29p2mh?file=index.ts,index.html

Conclusion

We hope you enjoyed learning how  to create layout with HTML node in JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!