Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
168
rated 0 times [  173] [ 5]  / answers: 1 / hits: 38523  / 9 Years ago, thu, january 7, 2016, 12:00:00

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?


More From » xml

 Answers
16

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

[#63811] Tuesday, January 5, 2016, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elishaannac

Total Points: 28
Total Questions: 97
Total Answers: 101

Location: Samoa
Member since Mon, Nov 8, 2021
3 Years ago
elishaannac questions
Sun, Dec 5, 21, 00:00, 3 Years ago
Mon, Jun 14, 21, 00:00, 3 Years ago
Mon, Jul 22, 19, 00:00, 5 Years ago
Mon, Jul 8, 19, 00:00, 5 Years ago
;