问题

I defined the following simple form:

<form:SimpleForm id="SimpleFormChange354"
  editable="true"
  layout="ResponsiveGridLayout"
  title="Address"
  labelSpanXL="2"
  labelSpanL="2"
  labelSpanM="3"
  labelSpanS="12"
  adjustLabelSpan="false"
  emptySpanXL="0"
  emptySpanL="0"
  emptySpanM="0"
  emptySpanS="0"
  columnsXL="2"
  columnsL="2"
  columnsM="1"
  singleContainerFullSize="false"
>
  <Label text="Name1"/>
  <Input/>
  <Label text="Name2"/>
  <Input/>
  <Label text="Name3"/>
  <Input/>
</form:SimpleForm>

As you can see:

How to place the red marked element next to Name1 element?

回答1:

In order to enable multiple columns, the property column* or the <layoutData> aggregation should be adjusted respectively in (Simple)Form.

Using `ResponsiveGridLayout`

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
  definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
    xmlns:form="sap.ui.layout.form"
    xmlns:layout="sap.ui.layout"
    xmlns:core="sap.ui.core"
    xmlns="sap.m"
  >
    <form:SimpleForm title="Multiple Columns via GridData"
      editable="true"
      layout="ResponsiveGridLayout"
    >
      <Label text="Label 1">
        <layoutData>
          <layout:GridData span="L2 M2" />
        </layoutData>
      </Label>
      <Input>
        <layoutData>
          <layout:GridData span="L4 M4" />
        </layoutData>
      </Input>
      <Label text="Label 2">
        <layoutData>
          <layout:GridData span="L2 M2" />
        </layoutData>
      </Label>
      <Input>
        <layoutData>
          <layout:GridData span="L4 M4" />
        </layoutData>
      </Input>
      <Label text="Label 3">
        <layoutData>
          <layout:GridData span="L2 M2" />
        </layoutData>
      </Label>
      <Input>
        <layoutData>
          <layout:GridData span="L4 M4" />
        </layoutData>
      </Input>
    </form:SimpleForm>
    <form:SimpleForm title="Multiple Columns via Containers (columns* + sap.ui.core.Title)"
      editable="true"
      layout="ResponsiveGridLayout"
      columnsM="2"
    >
      <core:Title text="Container 1" />
      <Label text="Label 1" />
      <Input />
      <core:Title text="Container 2" />
      <Label text="Label 2" />
      <Input />
      <Label text="Label 3" />
      <Input />
    </form:SimpleForm>
  </mvc:View>`
}).then(view => view.placeAt("content"))));

<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
  data-sap-ui-preload="async"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
  data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Resources

ResponsiveGridLayout API reference
GridData API reference

Using `ColumnLayout`

As of v1.56, the new layout sap.ui.layout.form.ColumnLayout can be assigned to (Simple)Form which enables "a newspaper like style" without the need to insert any Titles, Toolbars, or any additional layout data to have multiple columns.

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
  definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
    xmlns:form="sap.ui.layout.form"
    xmlns="sap.m"
  >
    <form:SimpleForm title="Multiple Columns via ColumnLayout"
      editable="true"
      layout="ColumnLayout"
      columnsM="2"
    >
      <Label text="Label 1" />
      <Input />
      <Label text="Label 2" />
      <Input />
      <Label text="Label 3" />
      <Input />
    </form:SimpleForm>
  </mvc:View>`
}).then(view => view.placeAt("content"))));

<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
  data-sap-ui-preload="async"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
  data-sap-ui-xx-xml-processing="edge"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

In case more adjustments are required, the layout data sap.ui.layout.form.ColumnElementData^API can be assigned. E.g.:

<Label text="Label 3">
  <layoutData>
    <form:ColumnElementData cellsSmall="3" /> <!-- default: 12 -->
  </layoutData>
</Label>

Resources

ColumnLayout API reference
Test Page for ColumnLayout (source code can be found here)

来源：https://stackoverflow.com/questions/50216940/form-with-multiple-columns

标签

sapui5

Form with Multiple Columns?

问题

回答1:

Using ResponsiveGridLayout

Resources

Using ColumnLayout

Resources

Using `ResponsiveGridLayout`

Using `ColumnLayout`