on 10-20-2015 8:31 AM
Hi,
I am working with XML views and looking to place multiple elements in the below layout. I am using Labels and Text controls.
F1 V1 F2 V2
F3 V3 F4 V4
F5 V5 F6 F7
Currently, all my Field/Value are displayed one below the other as shown below. There is lot of screen space which I would like to use and hence looking to place them in 4 columns instead of 2.
I would need this to work mostly for Desktop, but also needs to represent well when viewed in Mobile device too. Can someone point me to some sample XML code.
Thanks,
Murali.
Hi,
You can use form/ responsive gird layout to achieve this.
<Form xmlns="sap.ui.layout.form" id="idForm" editable="true">
<layout>
<ResponsiveGridLayout xmlns="sap.ui.layout.form"
labelSpanL="4" labelSpanM="2" emptySpanL="0" emptySpanM="0"
columnsL="2" columnsM="2" />
</layout>
<formContainers> <!-- sap.ui.layout.form.FormContainer -->
<FormContainer xmlns="sap.ui.layout.form" id="idFormContainerLeft"
expanded="true" expandable="false" visible="true" textAlign="Left">
<formElements> <!-- sap.ui.layout.form.FormElement -->
<FormElement xmlns="sap.ui.layout.form" id="idF1V1Element"
visible="true">
<label>
<Label xmlns="sap.m" text="F1" visible="true"
labelFor="idF1value1" textAlign="Left" textDirection="RTL">
</Label>
</label>
<fields>
<Text xmlns="sap.m" text="V1"
id="idF1value1">
</Text>
</fields>
</FormElement>
<FormElement xmlns="sap.ui.layout.form" id="idF3V3Element"
visible="true">
<label>
<Label xmlns="sap.m" text="F3" visible="true"
labelFor="idF3value3" textAlign="Left" textDirection="RTL">
</Label>
</label>
<fields>
<Text xmlns="sap.m" text="V3"
id="idF3value3">
</Text>
</fields>
</FormElement>
<FormElement xmlns="sap.ui.layout.form" id="idF5V5Element"
visible="true">
<label>
<Label xmlns="sap.m" text="F5" visible="true"
labelFor="idF5value5" textAlign="Left" textDirection="RTL">
</Label>
</label>
<fields>
<Text xmlns="sap.m" text="V5"
id="idF5value5">
</Text>
</fields>
</FormElement>
</formElements>
</FormContainer>
<FormContainer xmlns="sap.ui.layout.form" id="idFormContainerRight"
expanded="true" expandable="false" visible="true" textAlign="Left">
<formElements> <!-- sap.ui.layout.form.FormElement -->
<FormElement xmlns="sap.ui.layout.form" id="idF2V2Element"
visible="true">
<label>
<Label xmlns="sap.m" text="F2" visible="true"
labelFor="idF2value2" textAlign="Left" textDirection="RTL">
</Label>
</label>
<fields>
<Text xmlns="sap.m" text="V2"
id="idF2value2">
</Text>
</fields>
</FormElement>
<FormElement xmlns="sap.ui.layout.form" id="idF4V4Element"
visible="true">
<label>
<Label xmlns="sap.m" text="F4" visible="true"
labelFor="idF4value4" textAlign="Left" textDirection="RTL">
</Label>
</label>
<fields>
<Text xmlns="sap.m" text="V4"
id="idF4value4">
</Text>
</fields>
</FormElement>
<FormElement xmlns="sap.ui.layout.form" id="idF6V6Element"
visible="true">
<label>
<Label xmlns="sap.m" text="F6" visible="true"
labelFor="idF6value6" textAlign="Left" textDirection="RTL">
</Label>
</label>
<fields>
<Text xmlns="sap.m" text="V6"
id="idF6value6">
</Text>
</fields>
</FormElement>
</formElements>
</FormContainer>
</formContainers>
</Form>
Thanks,
Rumeshbabu S
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thanks Rumesh,
I have seen lot of examples in Explored App and other discussions. Most of them were around two columns. Your example was helpful. I ended up getting my fields in the required layout. But there is lot of space above/below and between the lines. Is there a proerty to reduce that space.
I have a table at the bottom of the view and dont want to see it pushed down. I am trying to avoid any scroll.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Murali,
I would suggest using the Grid-Layout for this:
With this layout you can define the look of your layout for any device (if they vary).
Kind Regards,
Ruben
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
101 | |
13 | |
13 | |
11 | |
11 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.