UI5 Simpleform Field Layout

Question

I am having a bit of trouble setting a layout in a SimpleForm control. Here is the XML code:

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
    <f:content>
        <Toolbar>
            <ToolbarSpacer/>
            <Button icon="sap-icon://phone" tooltip="Client Numbers"/>
        </Toolbar>
        <Title text="Business Phone" level="H5" titleStyle="H5"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
        <Label text="Business Extension" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <Input id="businessPhoneExtension" value="{business_phone_extension}">
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </Input>
        <Title text="Business Fax" level="H5"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
    </f:content>
</f:SimpleForm>

I want the third field (Business Fax) to be displayed underneath the 'Business Phone' field. Instead, it displays as such:

I'm sure I am missing something simple. Perhaps I need to use the 'Form' control instead? I tried putting an empty label as the next element, but that didn't seem to work, either. If there was a fourth field (i.e Business Fax Extension), then the layout would line up.

Any help would be appreciated! Thanks!

UPDATE:

I have taken the advice given in the answers. I was able to get the layout to work a little better, though still not quite what I want. This will probably suffice:

I added the 'core:Title' to both 'groups', though I still noticed some oddities in the layout. I removed the 'GridData' tags and I ended up with what's in the image above. I also played around with using a 'Toolbar', which had the same effect. I tried using 'core:Toolbar', but it complained that library did not exist, despite the documentation showing 'core:Toolbar' as an aggregation of the SimpleForm control. Here is the final code:

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
    <f:content>
        <core:Title text="Business Phone"/>
        <Label text="Number" design="Bold"/>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
        </MaskInput>
        <Label text="Business Extension" design="Bold"/>
        <Input id="businessPhoneExtension" value="{business_phone_extension}"/>
        <core:Title text="Business Fax"/>
        <Label text="Number" design="Bold"/>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
        </MaskInput>
    </f:content>
</f:SimpleForm>

Thanks for your answers! If there is any other way to have the layout like I originally wanted, additional input would be great!

Answer 1

I ended up finding out how to do exactly what I was looking to do. By adding the 'columnsM' and 'columnsL' properties to the SimpleForm control, it is now displayed in the format I want:

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers" columnsM="1" columnsL="1">
    <f:content>
        <core:Title text="Business Phone"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
        <Label text="Extension" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <Input id="businessPhoneExtension" value="{business_phone_extension}">
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </Input>
        <core:Title text="Business Fax"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
    </f:content>
</f:SimpleForm>

Now the form displays as such:

Thanks to everyone who answered, it was helpful and I have a better understanding of how the form layouts work now!

Cheers!

Answer 2

EDIT: Previous answer was not completely accurate.

Even though title aggregation multiplicity is 0..1, is true that the documentation also says A new Title or Toolbar starts a new group (FormContainer) in the form.

Therefore, several options:

• Option 1: Use sap.ui.core.Title instead of sap.m.Title (by @fabiopagoti)
• Option 2: Delete the second title
• Option 3: Add a second SimpleForm

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
  <f:content>
    <Toolbar>
        <ToolbarSpacer/>
        <Button icon="sap-icon://phone" tooltip="Client Numbers"/>
    </Toolbar>
    <Title text="Business Phone" level="H5" titleStyle="H5"/>
    <Label text="Number" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
        placeholderSymbol="_">
        <rules>
            <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
        </rules>
        <layoutData>
            <l:GridData span="XL4 L4 M4 S6"/>
        </layoutData>
    </MaskInput>
    <Label text="Business Extension" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <Input id="businessPhoneExtension" value="{business_phone_extension}">
      <layoutData>
          <l:GridData span="XL4 L4 M4 S6"/>
      </layoutData>
    </Input>
  </f:content>
</f:SimpleForm>
<f:SimpleForm id="faxFormSimple" editable="true" layout="ResponsiveGridLayout">
  <f:content>
    <Title text="Business Fax" level="H5"/>
    <Label text="Number" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
        <rules>
            <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
        </rules>
        <layoutData>
            <l:GridData span="XL4 L4 M4 S6"/>
        </layoutData>
    </MaskInput>
  </f:content>
</f:SimpleForm>

Answer 3

I believe you are having trouble with your form because you are using sap.m.Title instead of sap.ui.core.Title.

Trying replacing them like this

// as is
<Title text="Business Phone" level="H5" titleStyle="H5"/>
// to be
<core:Title text="Business Phone" level="H5" />

Like this you will have different sections in your form. Check out the result without the GridData in all controls as well.

Do not forget to add the core namespace to your xml file

<mvc:View 
 controllerName="your.controller.name"  
 displayBlock="true" 
 xmlns:mvc="sap.ui.core.mvc"
 xmlns:f="sap.ui.layout.form" 
 xmlns:l="sap.ui.layout" 
 xmlns:core="sap.ui.core"
 xmlns="sap.m" >