<!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
});
});