Menu
The escape character \n and Unicode character \u000a will only work in JavaScript. However, I'm trying to add a line break in XML view as below. But doesn't work:
<u:TimelineItem text="First Line\n SecondLine" />
200
New lines in text controls can be added with the following characters:
or 
. or 
.i18n.properties files:Line feed: \n or \u000a.
Recommended:* In combination with carriage return: \r\n or \u000d\u000a.
Alternatively, consider using template literals instead of concatenating the above characters manually (i.e. simply replace "..." with `...`).
<br> (in XML: <br>) out of the box:
sap.m.MessageStrip since UI5 v1.85: API reference, Sample
sap.m.FormattedText: API reference
* See Issues with different newline formats. It is recommended to use the combination with Carriage Return for most of the internet protocols.
Here is a UI5 demo with sap.suite.ui.commons.TimelineItem* and sap.m.Text:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/m/Text",
], async (XMLView, Text) => {
"use strict";
const view = await XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m" autoFocus="false">
<Page showHeader="false" class="sapUiResponsiveContentPadding">
<commons:TimelineItem xmlns:commons="sap.suite.ui.commons"
text="Multiline supported in Timeline items (XML)"
/>
<HBox id="myBox" justifyContent="SpaceAround">
<Text
text="This is
a text (created in XML view)!"
renderWhitespace="true"
/>
</HBox>
</Page>
</App>
</mvc:View>`,
});
const textCreatedInJS = new Text({
renderWhitespace: true,
text: "And this\nis\u000aanother\r\ntext (created in JS)!",
});
view.byId("myBox").addItem(textCreatedInJS);
view.placeAt("content");
});<script id="sap-ui-bootstrap"
src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.suite.ui.commons"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>* The TimelineItem had a bug in earlier versions of UI5 preventing multilines. According to their changelog for 1.44.5:
[FIX] sap.suite.ui.commons.Timeline: Rendering of multiline text improved
In case the control sap.m.Text is used, keep in mind to enable the properties renderWhitespace and wrapping in order render the new lines in the DOM.
Rendering text in DOM can be achieved via the API .text(/*...*/) from the RenderManager. That API, however, doesn't necessarily apply newlines even if the text contains the above mentioned line break characters. In that case, the white-space property pre-line can be applied to the control's CSS style:
.myControlWithText {
/* ...; */
white-space: pre-line; /* Allows line break characters to be applied */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
