Having two distinct values such as QtValidF and DocDate, I want to be able to display DocDate only if QtValidF comes null. How could I condition this?
<Text text="{
path: 'QtValidF',
formatter:'.formatoFecha'
}"/>
I'm trying this but doesn't work.
<Text text="{= ${QtValidF} != 'null' ? {
path: 'DocDate',
formatter: '.formatoFecha'
} : {
path: 'QtValidF',
formatter: '.formatoFecha'
}}"/>
In general, you can make use of expression binding for a short and simple conditional expression.
<MyControl anyProperty="{= ${myPrimary} || ${mySecondary}}" />
Just like in JS, when the first operand results in one of the falsy values, the second one is taken into account.
In case a formatter is preferred, the composite binding syntax can be used:
<MyControl anyProperty="{
parts: [
'myPrimary',
'mySecondary'
],
formatter: '.getThatValue'
}" />
Then in the controller:
getThatValue: function(primaryValue, secondaryValue) {
return primaryValue || secondaryValue;
},
For more information, please take a look at the topics Binding Syntax and Composite Binding.
Here is the inline binding expression:
value='{= ${/QValidF} !== null ? ${/QValidF} : ${/DocDate} }'
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Bernard LeTourneur - UI5 Single Page</title>
<script
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
id='sap-ui-bootstrap'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-bindingSyntax='complex'
data-sap-ui-compatVersion='edge'
data-sap-ui-preload='async'>
</script>
<script id='myXmlView' type='ui5/xmlview'>
<mvc:View
controllerName='MyController'
xmlns='sap.m'
xmlns:core='sap.ui.core'
xmlns:mvc='sap.ui.core.mvc'>
<Input id='inputStatus' enabled='false' value='{= ${/QValidF} !== null ? ${/QValidF} : ${/DocDate} }' />
<Button press="handleDataChange" text='{= ${/QValidF} !== null ? "Set QValidF to Null" : "Set QValidF to something"}' />
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
'use strict';
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function (Controller, JSONModel) {
'use strict';
return Controller.extend('MyController', {
onInit : function () {
var that = this;
var data = {QValidF: "something", DocDate: "2018/06/08"};
var oModel = new JSONModel(data);
this.getView().setModel(oModel);
},
handleDataChange: function(){
var isNull = this.getView().getModel().getProperty("/QValidF");
console.log(isNull);
if (isNull=="something"){
this.getView().getModel().setProperty("/", {QValidF: null, DocDate: "2018/06/08"});
}
else{
this.getView().getModel().setProperty("/", {QValidF: "something", DocDate: "2018/06/08"});
}
}
});
});
sap.ui.xmlview({
viewContent : jQuery('#myXmlView').html()
}).placeAt('content');
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
