How to use an if-else condition in a SAPUI5 XML-Vi

Question

How can I implement an if-else condition in a XML-View in SAPUI5 that uses a flag (condition) from a JSONModel?

So far I have a Controller:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("sap.ui.demo.myApp.myController", {
        onInit: function () {
            //// set data model on view
            var oData = {
                title: "A cool title",
                values: [{name: "Text 1", marketed: true}, {name: "Text 2", marketed: false}, {name: "Text 3", , marketed: true}]
            };

            var oModel = new JSONModel(oData);
            this.getView().setModel(oModel);
        }
    });
});

and a View:

<mvc:View
    controllerName="sap.ui.demo.myApp.myController"
    xmlns="sap.m">

    <!-- using aggregation binding -->
    <Panel expandable="true" expanded="true" headerText="{/title}" width="100%" content="{/values}">
        <content>
            <Label text="{name}"/>
            <!-- if {marketed} 
                    <Label text="product is marketed"/> 
                 else 
                    add nothing
            -->
        </content>
    </Panel>

</mvc:View>

Edit:

Is there a better way to do it than by implementing an overkill-feeling XML-Preprocessor?

Answer 1

OpenUI5 supports Preprocessing Instructions and Expression Binding.

With Preprocessing Instructions you can do stuff like this:

<template:if test="{marketed}">
    <template:then>
        <Label text="product is marketed" />
    </template:then>
    <template:else>
        <Image src="path.jpg" />
    </template:else>
</template:if>

I am not sure if the test in the first line tests for null/not null or true/false. This is where the Expression Binding might be handy: it allows for complex expressions within the curly brackets:

<template:if test="{= ${marketed} === true}">

---

Edit

The following solution might be more simple, but seems a little hacky.

Embed both elements in your XML view, but toggle the visibility with complex expression binding:

<Label text="product is marketed" visible="{= ${marketed} === true}"/>
<Image src="path.jpg" visible="{= ${marketed} === false}"/>

Answer 2

I am not sure I got your requirement, but it looks like simply binding the visible attribute to the marketed-flag would do.

If you need to bind in a negated way you can use expression binding like

 visible="{= !${/marketed}}"

Answer 3

If I've understood your question propery, you could use a formatter function.

<Label text="{
    path: 'marketed'
    formatter: '.formatter.marketed'
}"/>

.formatter.marketed in this example references a function in a separate formatter.js file:

marketed: function(marketed) {
    if(marketed) {
        return 'product is marketed';
    } else {
        return '';
    }
}

See the ui5 SDK for hpow to set up the formatter function correctly:

https://sapui5.hana.ondemand.com/sdk#docs/guide/0f8626ed7b7542ffaa44601828db20de.html

In your example, as this is just a label, we're returning an empty string, so it will just be blank. The Label will still be rendered, but it's an empty string, so there's nothing to show, so the user will never know it's there. I'm not entirely sure, but if you return undefined instead of an empty string, the label may not be rendered at all.