How to switch applying a property binding using ternary operator in Expression Binding?
Question
See, I have a table where duplicate entries are highlighted using the highlight property of sap.m.Table . Now im trying to implement a toggle button that lets the user decide whether he wants the duplicates highlighted or not.
In my controller, I created the toggle button function which toggles the model property "compare" of the client-side model "compareModel" which is bound to my table.
My default model is the model for the table items. The bound "dupe" property either contains "Success" or "Error" .
This works:
<ColumnListItem highlight="{dupe}">
<Text text="{myItemText}" />
<!-- ... -->
</ColumnListItem>
Now for my problem:
I want to set the highlight property based on whether the toggle button is pressed or not. So far, my expression binding attempts looked something like this:
<ColumnListItem highlight="{= ${compareModel>/compare} ? ${dupe} : false }">
I tried putting quotation marks here and there but so far no luck. Hoping somebody can help me out!
1 answers
solution1
1 ACCPTED 2023-01-19 17:33:36
Try with highlight="{= ${compareModel>/compare}? ${dupe}: undefined } .
Working sample:
globalThis.onUI5Init = () => sap.ui.require([ "sap/ui/core/mvc/XMLView", "sap/ui/model/json/JSONModel", // sample model. Applies also to ODataModel ], async function (XMLView, JSONModel) { "use strict"; const control = await XMLView.create({ definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true" height="100%" > <App> <Page title="Toggle Highlight"> <headerContent> <Switch state="{compareModel>/compare}" customTextOn=" " customTextOff=" " /> </headerContent> <List items="{/items}"> <StandardListItem title="{myItemText}" highlight="{= %{compareModel>/compare}? %{dupe}: undefined }" /> </List> </Page> </App> </mvc:View>`, models: { "compareModel": new JSONModel({ "compare": true }), undefined: new JSONModel({ "items": [ { "myItemKey": 1, "myItemText": "A", "dupe": "Error" }, { "myItemKey": 2, "myItemText": "B", "dupe": "Success" }, { "myItemKey": 3, "myItemText": "A", "dupe": "Error" } ] }), }, }); control.placeAt("content"); });
<script id="sap-ui-bootstrap" src="https://sdk.openui5.org/resources/sap-ui-core.js" data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified" data-sap-ui-async="true" data-sap-ui-oninit="onUI5Init" data-sap-ui-theme="sap_horizon" data-sap-ui-compatversion="edge" data-sap-ui-excludejquerycompat="true" data-sap-ui-xx-waitfortheme="init" ></script> <body id="content" class="sapUiBody"></body>
The issue with highlight="{=... ? ... : false }" is that false is not a valid value from the enum sap.ui.core.MessageType / .IndicationColor for the list item's highlight property. You should see a console error reporting a similar issue.
With undefined , however, the default value of highlight will be applied which is "None" for sap.m.ListBase controls.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.