Layout with 4 columns

[Murali_Shanmu]

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.

[Former Member · Accepted solution]

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

[Murali_Shanmu]

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.

[Murali_Shanmu]

I set the Form property editable="false" and the vertical spacing disappeared

[Former Member]

Hi Murali,

I would suggest using the Grid-Layout for this:

SAPUI5 Explored

With this layout you can define the look of your layout for any device (if they vary).

Kind Regards,
Ruben

[Former Member]

Hi Murali,

the SimpleForm might be a layout you are looking for. See here:

SAPUI5 Explored