Designing a layout in SAPUI5

Question

I'm designing a layout in SAPUI5, but I'm having trouble in picking the best fitting layout for the job. I have tried a Grid Layout and a Simple Form, but I can't seem to get them right. There's always some scalability issues etc. If anyone would point me in the right direction to create such a layout, that would be a really good start for me. Any tips or suggestions will be massively appreciated.

What I'm trying to achieve is this:

Desktop

Mobile

Thanks in advance

Answer 1

Hope this will help you, using the Grid layout and layout GridData properties you can achieve it.

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:l="sap.ui.layout"
  controllerName="example.responsiveDesign">
  <Page
    title="Title">
    <content>
      <l:VerticalLayout
        width="100%">
        <l:Grid
          containerQuery="true"
          hSpacing="1"
          vSpacing="1"
          position="Center">
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL12 L12 M12 S12" />
            </layoutData>
          </Input>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL6 L6 M6 S12" />
            </layoutData>
          </Input>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL6 L6 M6 S12" />
            </layoutData>
          </Input>
        </l:Grid>
      </l:VerticalLayout>
    </content>
  </Page>
</mvc:View>

Desktop

Mobile

Note: Include xmlns:l="sap.ui.layout" namespace.