Search code examples
javascriptxmlsapui5

How to either introduce an an logic statement into XML-views or how to change the way certain items of Table are being Showcased


I have the following Table,TableAs you can see one Name can have multiple values, which are displayed as a block. I want for it looks like this: if a Name has multiple Values, the Values should be displayed inline.

View-part: Is done in XML, with the access to a Model data. In this case: model>Name and model>Value. The data in the Model is represented the way it is in the Table.

I do not want to change the way data is being displayed in the Model, however, I would like for the View-part to look different.

What I tried: Wanted to change the way Data is being displayed in the Model but realized, the Data within the Model is being used for different circumstances those changing it could cause more Problems

How do I introduce some logic into XML or Another way to display the data how iI want for it to be displayed?


Solution

  • I think you are looking for this (conditional binding).

    new Text({"visible" : "{= ${status} === 'critical' && ${amount} > 10000 }"});
    

    This can be used for simple checks (booleans, length of array, value bigger or small, etc).

    If you need more advanced logic on you bindings you should use formatters, look here.

    // In view
    <ObjectStatus text="{path: 'invoice>Status', formatter: '.formatter.statusText' }"/>
    // In formatter
    statusText: function (sStatus) {
            var resourceBundle = this.getView().getModel("i18n").getResourceBundle();
            switch (sStatus) {
                case "A":
                    return resourceBundle.getText("invoiceStatusA");
                case "B":
                    return resourceBundle.getText("invoiceStatusB");
                case "C":
                    return resourceBundle.getText("invoiceStatusC");
                default:
                    return sStatus;
            }
        }