Search code examples
sapui5

How to wrap texts to auto-adjust row height?

I do have an sap.m.Table that looks as the following:

<Table id="idTable" growing="true" mode="SingleSelectMaster" items="{modelExample>/}">
  <columns>
    <Column width="20%">
      <Text text="Category" />
    </Column>
    <Column width="20%">
      <Text text="Description"/>
    </Column>
    <Column width="30%">
      <Text text="Choice"/>
    </Column>
  </columns>
  <ColumnListItem>
    <Label text="{modelExample>category}" design="Bold"/>
    <Label text="{modelExample>description}" />
    <l:HorizontalLayout>
      <Button text="{modelExample>choice/0}" />
      <Button text="{modelExample>choice/1}" />
    </l:HorizontalLayout>
  </ColumnListItem>
</Table>

This Table delivers the following result:

Table with unadjusted Row - Height

Problem: The description column does have a lot more text than it is being shown, which is represented as "...".

Question: How to change the row height in such a manner that it automatically adjusts itself to the amount of the text content?

What I want: Table with adjusted Row - Height

Solution

  • sap.m.Label supports wrapping as of UI5 1.50.

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

    But: if the app should be aligned with the Fiori UX, Label should be used only if it's labeling something (e.g. in combination with the labelFor association). If not, a different text control should be used. From https://experience.sap.com/fiori-design-web/label/:

    • Do not use the label control to display the data
    • Do not use bold labels.

    The other control sap.m.Text has wrapping property too which is enabled by default. If the text needs to be in bold, try sap.m.FormattedText with htmlText="&lt;strong>{myText}&lt;/strong>*.

    * To allow complex binding syntax, assign "edge" to data-sap-ui-compatversion in index.html.