Line Breaks in SAP UI5

[Dhanasupriya]

Hello All

This post is on the line breaks using SAP UI5 controls. We might have requirements to display wide range of information in 2-3 lines in order to avoid occupying the whole screen for better look & feel and UI experiences in SAP UI5 applications. Here is the demo for such needs and can be achieved using line feed and carriage return.

It's always a best practice to use the combination of line feed and carriage return.

• Line feed: moving the test to next line.


• Carriage return: a space between the words.

Line Breaks using line feed and carriage return in <ViewName>.view.xml,  <FragmentName>.fragment.xml:Line Breaks using line feed and carriage return in <ViewName>.view.js,  <FragmentName>.fragment.js, <ControllerName>.controller.js, i18n files.i18n:sap.m.Label: For Label, set wrapping property to true. Line break would work in combination with wrapping and \r\n.

	<Label text="{i18n>Label}" wrapping="true" />

sap.m.<control>: Tooltip for SAP UI5 controls:

	<Button text="Tooltip" tooltip="{i18n>Label}" />

sap.m.Text:

	<Text text="{i18n>Label}" />

sap.m.MessageStrip:sap.m.MessageStrip

<MessageStrip text="{i18n>MessageStrip}"  enableFormattedText="true"/>

i18n: key-values for sap.m.MessageStrip:

MessageStrip=Default <em>(Information)</em> with default icon and <strong>close button</strong>:

sap.m.FormattedText: sap.m.FormattedText

Output:Thank you!!

#EnhanceLearning

BR// Dhanasupriya Sidagam