Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Layout with 4 columns

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 replied

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

0 View this answer in context

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question