<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-onInit="onUI5Init"
      data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
      data-sap-ui-modules="demo/Ternary"
      data-sap-ui-async="true"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-excludeJQueryCompat="true"
      data-sap-ui-resourceRoots='{ "demo": "./" }'
      data-sap-ui-xx-waitForTheme="init"
    ></script>
    <script>
      globalThis.onUI5Init = () => sap.ui.require([
        "sap/ui/core/mvc/XMLView",
        "sap/ui/model/json/JSONModel",
      ], (XMLView, JSONModel) => {
        "use strict";
        XMLView.create({
          definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
            xmlns="sap.m"
            xmlns:form="sap.ui.layout.form"
            xmlns:core="sap.ui.core"
            core:require="{
              MyTernaryType: 'demo/Ternary',
              SapUiModelTypeBoolean: 'sap/ui/model/type/Boolean'
            }"
            height="100%"
          >
            <App autoFocus="false">
              <Page showHeader="false" class="sapUiResponsiveContentPadding">
                <form:SimpleForm
                  editable="true"
                  layout="ColumnLayout"
                >
                  <core:Title text="Two-Way Data Binding for CompositeBinding" />
                  <Label text="Bind" />
                  <SegmentedButton selectedKey="{
                    path: '/condition',
                    type: 'SapUiModelTypeBoolean'
                  }">
                    <items>
                      <SegmentedButtonItem key="true" text="a" />
                      <SegmentedButtonItem key="false" text="b" />
                    </items>
                  </SegmentedButton>
                  <Label text="Input" />
                  <Input valueLiveUpdate="true" value="{
                    parts: [
                      {path: '/condition'},
                      {path: 'a>/value'},
                      {path: 'b>/value'}
                    ],
                    type: 'MyTernaryType'
                  }" />
                  <Label text="A" />
                  <Text text="{a>/value}" />
                  <Label text="B" />
                  <Text text="{b>/value}" />
                </form:SimpleForm>
              </Page>
            </App>
          </mvc:View>`,
          models: {
            undefined: new JSONModel({
              "condition": true
            }),
            "a": new JSONModel({ value: "Alice" }),
            "b": new JSONModel({ value: "Bob" }),
          },
        }).then(view => view.placeAt("content"));
      });
    </script>
  </head>
  <body id="content" class="sapUiBody">
  </body>
</html>
<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:form="sap.ui.layout.form"
  xmlns:core="sap.ui.core"
  core:require="{
    MyTernaryType: 'demo/Ternary',
    SapUiModelTypeBoolean: 'sap/ui/model/type/Boolean'
  }"
  height="100%"
>
  <App autoFocus="false">
    <Page showHeader="false" class="sapUiResponsiveContentPadding">
      <form:SimpleForm
        editable="true"
        layout="ColumnLayout"
      >
        <core:Title text="Two-Way Data Binding for CompositeBinding" />
        <Label text="Bind" />
        <SegmentedButton selectedKey="{
          path: '/condition',
          type: 'SapUiModelTypeBoolean'
        }">
          <items>
            <SegmentedButtonItem key="true" text="a" />
            <SegmentedButtonItem key="false" text="b" />
          </items>
        </SegmentedButton>
        <Label text="Input" />
        <Input valueLiveUpdate="true" value="{
          parts: [
            {path: '/condition'},
            {path: 'a>/value'},
            {path: 'b>/value'}
          ],
          type: 'MyTernaryType'
        }" />
        <Label text="A" />
        <Text text="{a>/value}" />
        <Label text="B" />
        <Text text="{b>/value}" />
      </form:SimpleForm>
    </Page>
  </App>
</mvc:View>
sap.ui.define([
  "sap/ui/model/CompositeType",
], function(CompositeType) {
  "use strict";

  return CompositeType.extend("demo.model.type.Ternary", {
    constructor: function() {
      CompositeType.apply(this, arguments);
      this.bParseWithValues = true; // make 'parts' available in parseValue
    },

    /**
     * Displaying data from the right model
     */
    formatValue: parts => parts[0] ? parts[1] : parts[2],

    /**
     * Assigning entered value to the right model
     */
    parseValue: (enteredValue, stuff, parts) => parts[0] ? [
      parts[0],
      enteredValue,
      parts[2],
    ] : [
      parts[0],
      parts[1],
      enteredValue,
    ],

    validateValue: () => true // Nothing to validate here
  });
});