Form with Multiple Columns?












0















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:



enter image description here



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






sapui5







share|improve this question





























    0















    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:



    enter image description here



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






    sapui5







    share|improve this question



























      0












      0








      0








      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:



      enter image description here



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






      sapui5







      share|improve this question
















      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:



      enter image description here



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






      sapui5




      sapui5






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 11 '18 at 8:57









      Boghyon Hoffmann

      5,85752456




      5,85752456










      asked May 7 '18 at 14:46









      zero_codingzero_coding

      7,4262064138




      7,4262064138
























          1 Answer
          1






          active

          oldest

          votes


















          3














          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.ColumnElementDataAPI 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)






          share|improve this answer

























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50216940%2fform-with-multiple-columns%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            3














            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.ColumnElementDataAPI 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)






            share|improve this answer






























              3














              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.ColumnElementDataAPI 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)






              share|improve this answer




























                3












                3








                3







                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.ColumnElementDataAPI 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)






                share|improve this answer















                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.ColumnElementDataAPI 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)






                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>





                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>





                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>





                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>






                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 13 '18 at 14:51

























                answered May 7 '18 at 15:40









                Boghyon HoffmannBoghyon Hoffmann

                5,85752456




                5,85752456






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50216940%2fform-with-multiple-columns%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    The Sandy Post

                    Image
                    The Sandy Post From Wikipedia, the free encyclopedia Jump to navigation Jump to search The Sandy Post Type Weekly Newspaper Format Tabloid Owner(s) Community Newspapers/Pamplin Media Group Publisher J. Mark Garber Editor Steve Brown Founded 1937  ( 1937 ) Headquarters Sandy, Oregon Circulation 3,800 Website www.pamplinmedia.com/sandy-post-home/ This article needs additional citations for verification . Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed. (February 2010) (Learn how and when to remove this template message) The Sandy Post is a weekly newspaper, published in Sandy, Oregon, United States. The paper, founded in 1937, serves the communities of Sandy, Boring, the Villages at Mount Hood and the surrounding areas. The newspaper is owned by Community Newspapers/Pamplin Media Group, a company of ...
                    Read more

                    Danny Elfman

                    Image
                    Danny Elfman From Wikipedia, the free encyclopedia Jump to navigation Jump to search Danny Elfman Elfman at the 2010 San Diego Comic-Con Born Daniel Robert Elfman ( 1953-05-29 ) May 29, 1953 (age 65) Los Angeles, California, U.S. Spouse(s) Bridget Fonda ( m.  2003) Children 1 Musical career Genres Rock [1] ska [2] new wave film music video game music Occupation(s) Composer, singer, songwriter, record producer Instruments Trombone guitar percussion vocals keyboards [3] Years active 1972–present Associated acts Oingo Boingo James Newton Howard Daniel Robert Elfman (born May 29, 1953) is an American composer, singer, songwriter, and record producer. Elfman first became known for being the lead singer and songwriter for the band Oingo Boingo from 1974 to 1995. He is well known for scoring films and television shows, particularly his frequent collabora...
                    Read more

                    Pages that link to "Head v. Amoskeag Manufacturing Co."

                    Image
                    Help Pages that link to "Head v. Amoskeag Manufacturing Co." ← Head v. Amoskeag Manufacturing Co. Jump to navigation Jump to search What links here Page:   Namespace:  all (Article) Talk User User talk Wikipedia Wikipedia talk File File talk MediaWiki MediaWiki talk Template Template talk Help Help talk Category Category talk Portal Portal talk Book Book talk Draft Draft talk TimedText TimedText talk Module Module talk Gadget Gadget talk Gadget definition Gadget definition talk   Invert selection Filters Hide transclusions | Hide links | Hide redirects The following pages link to Head v. Amoskeag Manufacturing Co. External tools: Show redirects only View (previous 50 | next 50) (20 | 50 | 100 | 250 | 500) Amoskeag Manufacturing Company ‎ (links | edit) List of United States Supreme Court cases by the Waite Court ‎ (links | edit) Talk:Head v. Amoskeag Manuf...
                    Read more