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
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>
Note: Include xmlns:l="sap.ui.layout" namespace.
I'd suggest using the Grid layout. I designed a small prototype with the layout you're looking for:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:layout="sap.ui.layout"
xmlns="sap.m"
controllerName="sap.ui.layout.sample.GridProperties.GridProperties"
xmlns:html="http://www.w3.org/1999/xhtml">
<layout:VerticalLayout
width="100%">
<layout:Grid defaultIndent="L0 M0 S0" defaultSpan="L12 M6 S12" position="Center" width="80%" containerQuery="false" hSpacing="1" vSpacing="1" visible="true">
<layout:content>
<layout:Grid defaultIndent="L0 M0 S0" defaultSpan="L3 M6 S6" position="Center" width="100%" containerQuery="false" hSpacing="0" vSpacing="1" visible="true">
<layout:content>
<Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
<Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
<Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
<Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
<Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
<Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
<Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
<Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
</layout:content>
</layout:Grid>
<Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
<layout:Grid defaultIndent="L0 M0 S0" defaultSpan="L6 M12 S12" position="Center" width="100%" containerQuery="false" hSpacing="0" vSpacing="1" visible="true">
<layout:content>
<Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
<Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
</layout:content>
</layout:Grid>
</layout:content>
</layout:Grid>
</layout:VerticalLayout>
</mvc:View>
It's a minimalistic design so it uses no margins or formatting but it should be enough for what you want.
Desktop
Mobile
