Having an issue with the CustomTreeItem in SAPUI5. I can successfully display the tree structure from JSON, but struggling to manually add data on click of the Add button.
https://i.sstatic.net/BpLOK.png
In the image above, when I click the + Button, I need to add a Tile below it. However, I am unable to do so and there are no error messages in the console either...
This is my XML code:
<Tree items="{selModel>/}" id="Tree" class="sapUiTinyMarginTop tilesClass selTree">
<CustomTreeItem id="treeItem" detailPress="pressCustomTreeItem">
<VBox class="customSelTile" id="customSelTile">
<HBox>
<VBox class="sapUiTinyMarginTop customTxts">
<Label class="sapUiSmallMarginBegin headTxtFont" text="{selModel>text}"/>
<Label class="sapUiSmallMarginBegin subHeadTxtFont" text="{selModel>subheader}"/>
</VBox>
<Button class="sapUiSmallMarginBegin sapUiTinyMarginTop" press="addTile" icon="sap-icon://add"/>
<Button class="sapUiTinyMarginBegin sapUiTinyMarginTop" press="removeTile" icon="sap-icon://less"/>
</HBox>
</VBox>
</CustomTreeItem>
</Tree>
Controller:
var selOrgJson = [{
"text": "Department",
"subheader": "Production Management JP",
"personName":"Kuwahara Atushi",
"nodes": [{
"text": "Department",
"subheader": "Production JP",
"personName":"Kawasaki Takeshi"
}, {
"text": "Department",
"subheader": "Planning Scheduling JP",
"personName":"Fukuyama Sumire",
"nodes": [{
"text": "Department",
"subheader": "Planning Operations",
"personName":"Sakata Junko"
}]
}, {
"text": "Department",
"subheader": "Sales Office, North East Japan",
"personName":"Emoto Hloronori"
}, {
"text": "Department",
"subheader": "Sales Office, South East Japan",
"personName":"Suzuki Aya"
}, {
"text": "Department",
"subheader": "Partner Sales JP",
"personName":"Kuwahara Atushi"
}]
}];
var selModel = new sap.ui.model.json.JSONModel();
selModel.setData(selOrgJson);
this.getView().setModel(selModel, "selModel");
addTile: function (oEvt) {
var vBox = new sap.m.VBox();
vBox.addStyleClass("customSelTile");
var hBox = new sap.m.HBox();
var insideVBox = new sap.m.VBox();
insideVBox.addStyleClass("sapUiTinyMarginTop customTxts");
var headInput = new sap.m.Input({
type: "Text"
});
var subInput = new sap.m.Input({
type: "Text"
});
insideVBox.addItem(headInput);
insideVBox.addItem(subInput);
hBox.addItem(insideVBox);
vBox.addItem(hBox);
var button1 = new sap.m.Button({
press: this.addTile,
icon: "sap-icon://add"
});
var button2 = new sap.m.Button({
press: this.removeTile,
icon: "sap-icon://less"
});
hBox.addItem(button1);
hBox.addItem(button2);
vBox.addItem(hBox);
},
Can someone please assist me with adding a tile to the CustomTreeItem on click of the Add button? If my current approach in the controller is incorrect, please provide an alternative solution. Thank you in advance.