<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div style="height: 100%;"
data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/Device",
], function(UIComponent, SampleModel, Device) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json",
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.setDensity().setModel(new SampleModel({
myItems: [
{
itemText: "123"
},
{
itemText: "abc"
},
{
itemText: 456
},
]
}));
},
setDensity: function({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
{
"_version": "1.25.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "App Title",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.58.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"js": [
],
"css": [
]
},
"models": {
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"async": true
}
}
}
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:layout="sap.ui.layout"
xmlns:my="demo.control"
displayBlock="true"
height="100%"
>
<App id="rootApp" autoFocus="false">
<Page showHeader="false" class="sapUiResponsiveContentPadding">
<layout:HorizontalLayout allowWrapping="true">
<!--Try also other container such as sap.m.HBox w/ renderType="Bare"-->
<my:LabelComboBox
required="true"
placeholder="Placeholder"
text="My awesome label"
>
<core:Item text="Item 1" key="key1" />
<core:Item text="Item 2" key="key2" />
<core:Item text="Item 3" key="key3" />
</my:LabelComboBox>
<my:LabelComboBox
placeholder="With binding"
items="{/myItems}"
text="My awesome suuuuuuuuuuuuuuuuuuuuuuuuuuuuper long text"
>
<core:Item text="{itemText}" />
</my:LabelComboBox>
</layout:HorizontalLayout >
</Page>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/XMLComposite",
], function(XMLComposite) {
"use strict";
/**
* MINIMAL SAMPLE
*/
return XMLComposite.extend("demo.control.LabelComboBox", {
// No renderer required.
metadata: {
properties: {
"text": {
type: "string",
bindable: true,
},
"required": {
type: "boolean",
bindable: true,
},
"placeholder": {
type: "string",
bindable: true,
},
"width": {
type: "sap.ui.core.CSSSize",
bindable: true,
defaultValue: "100%"
},
},
aggregations: {
"items": {
type: "sap.ui.core.Item",
multiple: true,
bindable: true,
forwarding: {
idSuffix: "--innerComboBox",
aggregation: "items",
forwardBinding: true,
}
}
},
defaultAggregation: "items",
},
onThemeChanged: function() {
alert("Theme changed")
}
});
});
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
<HBox id="containerBox"
alignItems="Baseline"
width="{$this>width}"
renderType="Bare"
wrap="Wrap"
>
<Label id="innerLabel"
required="{$this>required}"
text="{$this>text}:"
labelFor="innerComboBox"
wrapping="true"
wrappingType="Hyphenated"
class="sapUiTinyMarginEnd"
>
<layoutData>
<FlexItemData alignSelf="Center" />
</layoutData>
</Label>
<ComboBox id="innerComboBox" placeholder="{$this>placeholder}">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</ComboBox>
</HBox>
</core:FragmentDefinition>