javascriptxmlsapui5newlineline-breaks

How to add a line break to text in UI5?

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" />
Solution

  • New lines in text controls can be added with the following characters:

    * 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&#10;in Timeline items (XML)"
          />
          <HBox id="myBox" justifyContent="SpaceAround">
            <Text
              text="This&#10;is&#x0A;a&#13;&#10;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.

    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 */
}