data-binding expression sapui5 conditional-operator

How to switch applying a property binding using ternary operator in Expression Binding?

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!

Solution

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/nightly/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-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

The issue with highlight="{= ... ? ... : false }" is that false is not a valid value from the enum sap.ui.core.MessageType or .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.