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

回答1:

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

In XML views or XML fragments:
- Line feed: 
   or 
  .
- In combination with carriage return: 
   or 
  .
In JS or i18n*.properties files:
- Line feed: \n or \u000a.
- 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 `...`):
```
const myMultiLineText = `Template literals are string literals where you can use
multi
line
strings.`; // No need to use "\n" or "\r\n".
```
  ^{This does not apply to i18n*.properties files.}

See also Issues with different newline formats. It is recommended to use the combination with Carriage Return for most of the internet protocols.

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

sap.ui.require([
  "sap/ui/core/Core"
], Core => Core.attachInit(() => 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)!",
  });
  Core.byId(view.createId("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-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>

In case the control sap.m.Text is used, add renderWhitespace: true together with wrapping: true (default) in order render the new lines in the DOM.

About the TimelineItem not supporting multiline: that was a bug in SAPUI5 which is fixed with version 1.44.5+.

[FIX] sap.suite.ui.commons.Timeline: Rendering of multiline text improved

回答2:

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>

来源：https://stackoverflow.com/questions/47148073/how-to-add-a-line-break-to-text-in-ui5

标签

javascript

xml

sapui5

newline

line-breaks

How to add a line break to text in UI5?

问题

回答1:

In XML views or XML fragments:

In JS or `i18n*.properties` files:

回答2:

How to add a line break to text in UI5?

问题

回答1:

In XML views or XML fragments:

In JS or i18n*.properties files:

回答2:

In JS or `i18n*.properties` files: