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" />
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" />
3 Answers
Reset to default 10New lines in text controls can be added with the following characters:
In XML views or XML fragments:
- Line feed:
or
. - Remended:* In bination with carriage return:
or
.
- Line feed:
In JS or
i18n.propertiesfiles:Line feed:
\nor\u000a.Remended:* In bination with carriage return:
\r\nor\u000d\u000a.Alternatively, consider using template literals instead of concatenating the above characters manually (i.e. simply replace
"..."with`...`).
- Some UI5 controls allow the HTML tag
<br>(in XML:<br>) out of the box:sap.m.MessageStripsince UI5 v1.85: API reference, Samplesap.m.FormattedText: API reference
* See Issues with different newline formats. It is remended to use the bination with Carriage Return for most of the internet protocols.
Here is a UI5 demo with sap.suite.ui.mons.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">
<mons:TimelineItem xmlns:mons="sap.suite.ui.mons"
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./resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.suite.ui.mons"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-patversion="edge"
data-sap-ui-excludejquerypat="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.mons.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.
For UI5 Control Developers
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 */
}
Rather than \n you can use the expression:
'<br/>'
. For example:
Text="{TOPOLINO} - {=${PAPERINO} === 'NA' || ${PAPERINO} === 0 ? '---' : ${PAPERINO}}
<br/>{PAPERONE} "
You can use the embeddedControl aggregation to use the text control inside TimelineItem
<u:TimelineItem>
<u:embeddedControl><Text text="First Line\n SecondLine"></Text></u:embeddedControl>
</u:TimelineItem>