How to upgrade JSON data from EJ1 to EJ2 JavaScript diagram?

This article explains how to upgrade the JSON data saved from the EJ1 diagram to an EJ2 diagram-compatible version.

Steps to upgrade the JSON data saved from EJ1 to EJ2 diagram

1. An application has been created, which has an upload option. The users can upload the JSON data (should be in text (.txt) or json (.json) file format) saved from EJ1 diagram. Refer to the screenshot as follows.

2. After uploading the JSON file, convert that JSON data into an EJ2 diagram-compatible format. The converted data will be downloaded in the browser, and it will be visualized with the EJ2 diagram. Refer to the screenshot as follows.

In the EJ1 diagram, to render an HTML or native node, define HTML or SVG content in a script template and set that ID in the templateId property of the node. In EJ2, define HTML or SVG content as a string in the node shape content property. The getTemplateContent method has been provided in the nodeProperties.js file. You can return HTML or native content in this method based on the template ID and then map it in the node shape content property. Refer to the code example as follows.

Code example

//method returns an html content

function getTemplateContent(templateId) {

var content = '<div style="background:#6BA5D7;height:100%;width:100%;"><button type="button" style="width:100px"> Button</button></div>';

return content;

}

function setShape(newNode, node) {

case "html":

            newNode.shape = { type: "HTML", content: getTemplateContent(node.templateId) };

            break;

}

Download the converter application from Convertor.

Conclusion

We hope you enjoyed learning about how to upgrade JSON data from EJ1 to EJ2 JavaScript diagram.

You can refer to our JavaScript Diagram feature tour page to learn 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!