Search code examples
sapui5

UI5 Simpleform Field Layout

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:

Phone form layout

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:

Phone Form Layout 2

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!

Phone form 3

Solution

  • 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>