Видимые проблемы с настройками - Макет как один из столбцов в таблице SAP UI5 с текстовым полем и комбинированным списком

У меня есть следующий XML, который является древовидной структурой.

<?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>

и у меня есть следующая страница sapui5

    <!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. Я определил таблицу дерева с именем в качестве одного из столбца
  2. Я определил еще одно значение столбца, который имеет макет в качестве шаблона.
  3. Этот макет имеет oDynamicTFValue и oDynamicCBValue в качестве содержимого.
  4. Я показываю текстовое поле или комбинированный список на основе значения DDLSTENABLE.
  5. если раскрывающийся список включен, я показываю значения из LST1 (часть XML)

Мои запросы

  1. Как установить для текстового поля и поля со списком видимое значение false, если ISKPI имеет значение false, и показать либо текстовое поле / поле со списком (на основе DDLSTENABLE), где значение ISKPI равно true

  2. Диамические выпадающие значения, основанные на значении MNLCNFDDLSTID ->

Как установить выпадающие значения на основе значений MNLCNFDDLSTID, например

если MNLCNFDDLSTID = 1, то в раскрывающейся ячейке должны отображаться значения из LST1 (т. е. - 11,12)

если MNLCNFDDLSTID = 2, то в раскрывающемся списке ячеек должны отображаться значения из LST2 (т. е. - 21,22)

  1. Как обновить значение текстового поля значением, выбранным из раскрывающегося списка. (если текстовое поле не видно и выпадающий список виден)

Заранее спасибо.

2 ответа

Решение

Я преобразовал ваши XML-данные в JSON (так как мне удобнее работать с данными JSON).

Ниже приведены ваши данные в формате JSON:

{
    "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"
                    }]
                }
            }
        }
    }
}

Запрос 1: Как установить для текстового поля и поля со списком видимое значение false, если ISKPI имеет значение false, и показать либо текстовое поле / поле со списком (на основе DDLSTENABLE), где ISKPI имеет значение true.

Ответ: Из вашего комментария видно, что вы уже сделали это. Ниже приведен код. Отсутствует привязка видимого свойства для макета.

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

Запрос 2: раскрывающиеся значения Dyamic на основе значения MNLCNFDDLSTID.

Ответ: Для этого нам понадобился динамический путь для элементов ComboBox. Я выбрал текущий контекст каждого экземпляра горизонтального макета. Таким образом, я могу получить требуемое значение:_MNLCNFDDLSTID для этого конкретного экземпляра горизонтальной разметки, а затем создать динамический путь на основе значения _MNLCNFDDLSTID. Ниже приведен код:

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); 

дайте мне знать, если вам нужно больше объяснений.

Сначала представьте jsonmodel для ваших наборов строк и используйте данные через связывание. Тогда вы можете использовать значения также для:

  1. Вы можете связать видимый атрибут, например visible={ISKPI} (Условное связывание см. Https://openui5.hana.ondemand.com/#docs/guide/c98d57347ba444c6945f596584d2db45.html). Поэтому вам необходимо активировать сложное связывание:

    данные крушины щ-bindingSyntax="Комплекс">

см.: https://openui5.hana.ondemand.com/#docs/guide/0c803921b1bf4b3a97a038fbd51ef542.html

  1. Использовать привязку выражения

  2. Если вы используете двустороннюю привязку, она будет обновлена ​​автоматически после завершения привязки.

Другие вопросы по тегам