Skip to Content

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.

item.jpg (51.8 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    avatar image
    Former Member
    Oct 20, 2015 at 12:55 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 20, 2015 at 11:26 AM

    Hi Murali,

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

    SAPUI5 Explored

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 20, 2015 at 12:00 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 21, 2015 at 12:07 AM


    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.

    Add comment
    10|10000 characters needed characters exceeded