How To Add A Line Break To Text In Ui5?

Question

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:

Solution 1:

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

In XML views or XML fragments:
- Line feed: 
   or 
  .
- Recommended:* In combination with carriage return: 
   or 
  .
In JS 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 `...`).
Some UI5 controls allow the HTML tag <br> (in XML: <br>) out of the box:
- sap.m.MessageStrip since UI5 v1.85: API reference, Sample
- sap.m.FormattedText: API reference

Here is a UI5 demo with sap.suite.ui.commons.TimelineItem* and sap.m.Text:

Baca Juga

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/m/Text",
], async (XMLView, Text) => {
  "use strict";
  
  const view = awaitXMLView.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 = newText({
    renderWhitespace: true,
    text: "And this\nis\u000aanother\r\ntext (created in JS)!",
  });
  view.byId("myBox").addItem(textCreatedInJS);
  view.placeAt("content");
});

<scriptid="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><bodyid="content"class="sapUiBody"></body>

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

Solution 2:

You can use the embeddedControl aggregation to use the text control inside TimelineItem

<u:TimelineItem><u:embeddedControl><Texttext="First Line\n SecondLine"></Text></u:embeddedControl></u:TimelineItem>

JavaScript Test

How To Add A Line Break To Text In Ui5?

Solution 1:

In XML views or XML fragments:

In JS or `i18n.properties` files:

For UI5 Control Developers

Solution 2: