CODEWITHSUNDEEP
javascriptxmlsapui5
Benvorth
Benvorth

Reputation: 7722

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

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?

Upvotes: 13

Views: 45554

Answers (4)

MegaCookie
MegaCookie

Reputation: 5255

In the context of XML Templating as one of the Preprocessing Instructions, another option is to define Fragment's fragmentName as an Expression Binding like this:

<core:Fragment fragmentName="{= ${path: 'facet>Target', formatter: 'sap.ui.model.odata.AnnotationHelper.isMultiple'} === 'true'
    ? 'sap.ui.core.sample.ViewTemplate.scenario.TableFacet'
    : 'sap.ui.core.sample.ViewTemplate.scenario.FormFacet' }" type="XML"/>

Documentation: https://ui5.sap.com/#/topic/65da02badf704e03a4fd6bd4c5aba8f4

Upvotes: 2

Marc
Marc

Reputation: 6190

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}"/>

Upvotes: 15

JamieC
JamieC

Reputation: 607

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.

Upvotes: 5

user2808624
user2808624

Reputation: 2530

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

Upvotes: 7

Related Questions