CODEWITHSUNDEEP
sapui5
Michu93
Michu93

Reputation: 5689

SapUi5 write text in many rows one under another without :

I am trying to achive something like this in SapUi5:

First row
Second row
Third row
Fourth row

and actually all I can do is:

First Row:
Second row:
Third row:
Fourth row:

when I used:

<f:FormElement label="First Row"/>
<f:FormElement label="Second row"/>
<f:FormElement label="Third row"/>
<f:FormElement label="Fourth row"/>

Is there any chance to remove :? Should I use something other than label?

Upvotes: 0

Views: 1392

Answers (2)

Inizio
Inizio

Reputation: 2256

Using CSS

.sapUiForm.sapUiFormLblColon .sapUiFormElementLbl>.sapMLabel {
   content: "" !important;
}

If you don't want to override the default CSS for all the form, you can give custom class to the form(like testForm) so that you can use the CSS to override only for the specific form.

.testForm.sapUiForm.sapUiFormLblColon .sapUiFormElementLbl>.sapMLabel {
   content: "" !important;
}

Upvotes: 1

TiiJ7
TiiJ7

Reputation: 3392

Option 1:

You can use a sap.ui.layout.VerticalLayout. As for the actual elements, a Label is normally more used as a caption to another element, like a form field or a table column. So for general text, you want to use sap.m.Text.

Sample (ignore the boilerplate of the XMLview creation):

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
    XMLView.create({
        definition: $('#myView').html()
    }).then(function(oView) {
        oView.placeAt('content');
    });
});
<html>

  <head>
    <meta charset="utf-8">
    <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m,sap.ui.layout'></script>
    <script id="myView" type="sapui5/xmlview">
      <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout">
        
        <Panel headerText="My Panel">
          <l:VerticalLayout>
            <Text text="First row" />
            <Text text="Second row" />
            <Text text="Third row" />
            <Text text="Fourth row" />
          </l:VerticalLayout>
        </Panel>

      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>

</html>

Option 2:

Put the text inside a proper Text instead of the label, eg:

<f:FormElement><Text text="First row" /></f:FormElement>

Option 3:

Hide the colon with CSS, but in this case you should prefer the other options since label is not meant to just display some independent text.

Upvotes: 1

Related Questions