How to create a complex HTML template using the HTML node in JS Diagram?
This article explains how to create a complex HTML template using the HTML node in JS Diagram. In the diagram, we are able to group two or more nodes by using the group node. A group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). An HTML node can be created by applying the type as HTML. An HTML node can also be grouped by using the group node. The following code explains how to create a complex HTML template by using HTML nodes.
let nodes = [
{
id: 'child1_1', offsetX: 200, offsetY: 125, height: 250, width: 350,
annotations: [
{
content: 'Implement regular usages of OKR by end of quarter to increase alignment',
offset: { x: 0.5, y: 0.2 }
},
{
content: 'Requirement',
offset: { x: 0.15, y: 0.35 },
style: { fill: 'yellow', color: 'red' }
}
],
shape: { cornerRadius: 3 }
},
{
id: 'child1_2', offsetX: 50, offsetY: 130, height: 30, width: 30,
shape: {
type: 'Image',
source: 'https://ej2.syncfusion.com/react/demos/src/diagram/employees/image30.png'
},
style: { strokeWidth: 0 }
},
{
id: 'child1_3', offsetX: 90, offsetY: 130, height: 30, width: 30,
shape: {
type: 'Image',
source: 'https://ej2.syncfusion.com/react/demos/src/diagram/employees/image2.png'
},
style: { strokeWidth: 0 }
},
{
id: 'child1_4', offsetX: 130, offsetY: 130, height: 30, width: 30,
shape: {
type: 'Image',
source: 'https://ej2.syncfusion.com/react/demos/src/diagram/employees/image1.png'
},
style: { strokeWidth: 0 }
},
{
id: 'node1_1', offsetX: 200, offsetY: 180, height: 40, width: 330,
annotations: [
{
content: 'Increase each store weekly sales from 10K to ... ',
offset: { x: 0.42, y: 0.5 }
},
{
content: '30%',
offset: { x: 0.9, y: 0.5 },
style: { fill: 'white', color: 'yellow', height: 10, width: 20 }
}
],
shape: { cornerRadius: 3 }
},
{
id: 'node2_1', offsetX: 200, offsetY: 220, height: 40, width: 330,
annotations: [
{
content: 'Increase each store weekly sales from 10K to ... ',
offset: { x: 0.42, y: 0.5 }
},
{
content: '30%',
offset: { x: 0.9, y: 0.5 },
style: { fill: 'white', color: 'yellow', height: 10, width: 20 }
}
],
shape: { cornerRadius: 3 }
},
{
id: 'html_node1', offsetX: 240, offsetY: 130, height: 30, width: 80, shape: { type: 'HTML' }
},
{
id: 'progress_bar1',
offsetX: 330, offsetY: 110, height: 100, width: 80,shape: { type: 'HTML' }
},
{
id: 'group',
children: [
'child1_1',
'child1_2',
'child1_3',
'child1_4',
'node1_1',
'node2_1',
'html_node1',
'progress_bar1'
]
},
];
We can collect the nodes from the diagram. With the help of that, each node can be stored into the JSON. The following code snippet will explain how to store data as JSON.
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].children && nodes[i].children.length > 0) {
var datePicker = document.getElementById(
nodes[i].children[6] + '_DatePicker'
);
var date = datePicker.value;
var progressbar = document.getElementById(
nodes[i].children[7] + '_ProgressBar'
);
var score = progressbar.innerText;
var outEdges = [];
var inEdges = [];
var isSourceExist = false;
var isSourceLinked = false;
if (nodes[i].outEdges && nodes[i].outEdges.length) {
isSourceLinked = true;
for (var j = 0; j < nodes[i].outEdges.length; j++) {
var connector = diagramInstance.getObject(nodes[i].outEdges[j]);
outEdges.push(connector.targetID);
}
}
if (nodes[i].inEdges && nodes[i].inEdges.length) {
isSourceExist = true;
for (var j = 0; j < nodes[i].inEdges.length; j++) {
var connector = diagramInstance.getObject(nodes[i].inEdges[j]);
inEdges.push(connector.sourceID);
}
}
data1 = {
name: nodes[i].id,
score: score,
cycle: date,
isSourceExist: isSourceExist,
isSourceLinked: isSourceLinked,
parent: inEdges,
okrviewContributors: outEdges,
isContributorExist: true
};
// Push the data to the JSON
json.push(data1);
}
console.log(json);
}
Refer to the working sample for additional details and implementation: link here.
For more information, please refer our documentation.
Conclusion
We hope you enjoyed learning about how to create a complex HTML template using the HTML node in JS Diagram.
You can refer to our JS Diagram feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation 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!
