Hi,
Is there any way to define the json template in a separate file and load here dynamically? Thanks !
Regards,
Kannan
Kannan Thirumal wrote on Mar 12
th, 2019 at 8:22am:
Hi,
I've attached a sample layout image of my application node.
It has main image at the center and first image at the top-left corner and second image at the top-right corner and third image below the second image and fourth image at the bottom-right corner and a text box in the left-bottom corner.
I've defined a CompositeNode like below. But the node displayed in the diagram is NOT like the attached sample image layout.
OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2",
{
component: "GridPanel",
id: "id",
rowDefinitions: ["*"],
columnDefinitions: ["22"],
children:
[
{
component: "GridPanel",
rowDefinitions: ["18", "5"],
columnDefinitions: ["18", "5"],
children:
[
{
gridColumn: 0,
component: "Image",
name: "MainImage",
autoProperty: true,
location: "MainImage.png",
margin: "3",
imageAlign: "TopLeft"
},
{
gridColumn: 0,
component: "Image",
name: "FirstImage",
autoProperty: true,
location: "FirstImage.png",
margin: "3, 3, 0, 0",
imageAlign: "TopLeft"
},
{
gridColumn: 1,
component: "Image",
name: "SecondImage",
autoProperty: true,
location: "SecondImage.png",
margin: "3, 3, -50, 5",
imageAlign: "TopRight"
},
{
gridColumn: 1,
component: "Image",
name: "ThirdImage",
autoProperty: true,
location: "ThirdImage.png",
margin: "3, 30, -50, 3",
imageAlign: "TopRight",
width: "3"
},
{
gridColumn: 1,
component: "Image",
name: "FourthImage",
autoProperty: true,
location: "FourthImage.png",
margin: "3, 50, -50, 3",
imageAlign: "BottomRight",
width: "3"
},
{
gridColumn: 0,
component: "Text",
name: "NoOfElementsText",
autoProperty: true,
text: "title",
margin: "3, 40, 0, 0",
font: "Verdana 12px",
textAlign: "BottomLeft"
},
]
},
});
I've set the images and text like this,
var node = new this.OrgChartNode2();
node.setMainImage("./../../../../images/MainImage.png");
node.setFirstImage("./../../../../images/First.png");
node.setSecondImage("./../../../../images/Second.png");
node.setThirdImage("./../../../../images/Third.png");
node.setFourthImage("./../../../../images/Fourth.png");
node.setNoOfElementsText("8");
this.diagram.addItem(node);
My requirement is, all the small images should be shown within the main image as described above. But the images are not properly placed using the above code.
Also I need the following,
* Image/Text are dynamically set visible
* Image/Text position also set dynamically
* Image/Text size also set dynamically
May I know how to solve this issue? Thank you !
Regards,
Kannan