comboboxsapui5treetable

visible setting issues - Layout as one of the column in SAP UI5 table with textfield and combobox

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>
  1. I have defined a tree table with Name as one of the column
  2. I have defined one more column value which has layout as its template.
  3. This layout has oDynamicTFValue and oDynamicCBValue as its content.
  4. I am showing either the textfield or combobox based on the DDLSTENABLE value.
  5. if the dropdown is enabled I am showing the values from the LST1 (part of xml)

My queries

  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

  2. 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)

  1. 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.

Solution

  • I've converted your XML data to JSON (as I'm more comfortable working with JSON data).

    Below is your data in JSON Format:

    {
    "Rowsets": {
        "Rowset": {
            "Row": [{
                "Row": [{
                    "_NAME": "LINE1",
                    "_NODE_TYPE": "LINE",
                    "_DDLSTENABLE": "true",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "1"
                }, {
                    "_NAME": "LINE2",
                    "_NODE_TYPE": "LINE",
                    "_DDLSTENABLE": "false",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "2"
                }],
                "_NAME": "PH1A",
                "_NODE_TYPE": "PLANT",
                "_DDLSTENABLE": "---",
                "_ISKPI": "false",
                "_MNLCNFDDLSTID": "NA"
            }, {
                "Row": {
                    "_NAME": "UNIT1",
                    "_NODE_TYPE": "LINE",
                    "_DDLSTENABLE": "false",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "2"
                },
                "_NAME": "PN2A",
                "_NODE_TYPE": "PLANT",
                "_DDLSTENABLE": "---",
                "_ISKPI": "false",
                "_MNLCNFDDLSTID": "NA"
            }, {
                "Row": {
                    "_NAME": "UNIT6",
                    "_NODE_TYPE": "LINE",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "1"
                },
                "_NAME": "PN3A",
                "_NODE_TYPE": "PLANT",
                "_DDLSTENABLE": "--",
                "_ISKPI": "false",
                "_MNLCNFDDLSTID": "NA"
            }]
        },
        "DDLSTS": {
            "LST1": {
                "Rowset": {
                    "Row": [{
                        "MNLCNFDDITMID": "1",
                        "MNLCNFDDITMRNK": "11"
                    }, {
                        "MNLCNFDDITMID": "2",
                        "MNLCNFDDITMRNK": "12"
                    }]
                }
            },
            "LST2": {
                "Rowset": {
                    "Row": [{
                        "MNLCNFDDITMID": "1",
                        "MNLCNFDDITMRNK": "21"
                    }, {
                        "MNLCNFDDITMID": "2",
                        "MNLCNFDDITMRNK": "22"
                    }]
                }
            }
        }
    }
}

    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.

    var oDynamicLayoutValue = new sap.ui.layout.HorizontalLayout("layout1",{
            content: [oDynamicTFValue, oDynamicCBValue ],
            visible:{
                path: "_ISKPI",
                type: new sap.ui.model.type.String()
            }
        });

    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:

    oDynamicLayoutValue.addEventDelegate({
            onAfterRendering: function () {
                console.log('hey');

                var oCB = this.getContent()[1];
                if (oCB.getVisible()) {
                    if (!this.getBindingContext()) {
                        return;
                    }
                    var oContext = this.getBindingContext().getObject();
                    var path = '/Rowsets/DDLSTS/';
                    if (oContext._MNLCNFDDLSTID === '1') {
                        path = path + "LST1/Rowset/Row/"
                    } else {
                        path = path + "LST2/Rowset/Row/"
                    }

                    oCB.bindAggregation('items',{
                        path:path,
                        template:new sap.ui.core.ListItem({
                            key: "{MNLCNFDDITMID}",
                            text: "{MNLCNFDDITMRNK}"
                        })
                    })
                    console.log('path',path)
                }


            }
        },oDynamicLayoutValue);

    let me know if you need anymore explanation.