I have the following xml which is tree structure.
<?xml version="1.0" encoding="UTF-8"?>
<Rowsets>
<Rowset>
<Row NAME="PH1A" NODE_TYPE="PLANT" DDLSTENABLE="---" ISKPI="false" MNLCNFDDLSTID="NA">
<Row NAME="LINE1" NODE_TYPE="LINE" DDLSTENABLE="true" ISKPI="true" MNLCNFDDLSTID="1"/>
<Row NAME="LINE2" NODE_TYPE="LINE" DDLSTENABLE="false" ISKPI="true"MNLCNFDDLSTID="2"/>
</Row>
<Row NAME="PN2A" NODE_TYPE="PLANT" DDLSTENABLE="---" ISKPI="false" MNLCNFDDLSTID="NA">
<Row NAME="UNIT1" NODE_TYPE="LINE" DDLSTENABLE="false" ISKPI="true" MNLCNFDDLSTID="2"/>
</Row>
<Row NAME="PN3A" NODE_TYPE="PLANT" DDLSTENABLE="--" ISKPI="false" MNLCNFDDLSTID="NA">
<Row NAME="UNIT6" NODE_TYPE="LINE" ISKPI="true" MNLCNFDDLSTID="1"/>
</Row>
</Rowset>
<DDLSTS>
<LST1>
<Rowset>
<Row>
<MNLCNFDDITMID>1</MNLCNFDDITMID>
<MNLCNFDDITMRNK>11</MNLCNFDDITMRNK>
</Row>
<Row>
<MNLCNFDDITMID>2</MNLCNFDDITMID>
<MNLCNFDDITMRNK>12</MNLCNFDDITMRNK>
</Row>
</Rowset>
</LST1>
<LST2>
<Rowset>
<Row>
<MNLCNFDDITMID>1</MNLCNFDDITMID>
<MNLCNFDDITMRNK>21</MNLCNFDDITMRNK>
</Row>
<Row>
<MNLCNFDDITMID>2</MNLCNFDDITMID>
<MNLCNFDDITMRNK>22</MNLCNFDDITMRNK>
</Row>
</Rowset>
</LST2>
</DDLSTS>
</Rowsets>
and i have follwing sapui5 page
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script id="sap-ui-bootstrap"
src="/sapui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons,sap.ui.core,sap.ui.ux3,sap.ui.table,sap.m"
data-sap-ui-compatVersion="edge">
</script>
<script>
var oMdlAprvlData;
$(document).ready(function (){
debugger;
fnLdAprvData();
});
function fnLdAprvData() {
$.ajax({
type: "POST",
async: true,
url: "/XMII/Runner",
dataType: "xml",
data: {
"Transaction": "sandbox/MJain/TRX_GETTREE",
"OutputParameter": "OUTXML",
"Content-Type": "text/xml"
},
success: function (xmlData) {
oMdlAprvlData = new sap.ui.model.xml.XMLModel(xmlData);
oTableDataEntry.setModel(oMdlAprvlData);
},
error: function (jqXHR, textStatus, errorThrown) {
sap.ui.commons.MessageBox.show(errorThrown, sap.ui.commons.MessageBox.Icon.ERROR, "Error Message");
},
complete: function () {}
});
}
var oDynamicTFValue = new sap.ui.commons.TextField({
visible:{
path: "@DDLSTENABLE",
type: new sap.ui.model.type.String(),
formatter : function(DDLSTENABLE) { return !DDLSTENABLE; }
}
});
var oDynamicCBValue = new sap.ui.commons.ComboBox({
visible:{
path: "@DDLSTENABLE",
type: new sap.ui.model.type.String()
},
items: {
path: "/DDLSTS/0/LST1/0/Rowset/0/Row",
template: new sap.ui.core.ListItem({
key: "{MNLCNFDDITMID}",
text: "{MNLCNFDDITMRNK}"
})
}
});
var oDynamicLayoutValue = new sap.ui.layout.HorizontalLayout("layout1",{content: [oDynamicTFValue, oDynamicCBValue ]});
var oTableDataEntry = new sap.ui.table.TreeTable({
width: "100%",
height: "100%",
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
selectionBehavior: sap.ui.table.SelectionBehavior.Row,
expandFirstLevel: true,
columns: [
new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "NAME"
}),
template: new sap.ui.commons.TextView({
text: "{@NAME}"
})
}),
new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Value",
}),
template: oDynamicLayoutValue
})
]
});
oTableDataEntry.bindRows("/Rowset");
oTableDataEntry.placeAt("content");
</script>
</HEAD>
<BODY > <div id="content"></div>
<input type="hidden" id="IllumLoginName" value="{IllumLoginName}"> </input>
<input type="hidden" id="IllumLoginRoles" value="{IllumLoginRoles}"></input>
</BODY>
</html>
- I have defined a tree table with Name as one of the column
- I have defined one more column value which has layout as its template.
- This layout has oDynamicTFValue and oDynamicCBValue as its content.
- I am showing either the textfield or combobox based on the DDLSTENABLE value.
- if the dropdown is enabled I am showing the values from the LST1 (part of xml)
My queries
How to set both textfield and combobox visible to false where ISKPI is false and show either textfield / combobox (based on DDLSTENABLE) where ISKPI is true
Dyamic dropdown values based on MNLCNFDDLSTID value -->
How to set dropdown values based on the MNLCNFDDLSTID values for example
if the MNLCNFDDLSTID = 1 then that cell dropdown should show values from LST1 (i.e - 11,12)
if the MNLCNFDDLSTID = 2 then that cell dropdown should show values from LST2 (i.e - 21,22)
- How to update the textfield value with the value selected from the dropdown. (if text field is not visible and dropdown in visible)
Thanks in advance.
I've converted your XML data to JSON (as I'm more comfortable working with JSON data).
Below is your data in JSON Format:
Query 1: How to set both textfield and combobox visible to false where ISKPI is false and show either textfield / combobox (based on DDLSTENABLE) where ISKPI is true.
Answer: From your comment is figured you have already done this. Below is the code. Visible property binding was missing for Layout.
Query 2: Dyamic dropdown values based on MNLCNFDDLSTID value .
Answer: For this, we needed dynamic path for items of the ComboBox. I fetched the current context of each instance of Horizontal layout. This way I can fetch the required value of :_MNLCNFDDLSTID for that particular instance of Horizontal layout and then create the dynamic path based on the '_MNLCNFDDLSTID' value. Below is the code:
let me know if you need anymore explanation.