How to create a complex HTML template using the HTML node in JS Diagram?
In the diagram, we can able to group two or more nodes by using the group node. 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). The HTML node can be created by applying type as HTML. And HTML node also can group by using the group node. The following code explains how to create complex HTML template by using HML 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 diagrm. With 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);
}
Please refer the sample link here.
For more information, please refer our documentation.
Conclusion
I 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, Direct-Trac, or feedback portal. We are always happy to assist you!
