cancel
Showing results for 
Search instead for 
Did you mean: 

SimpleFormLayout.ColumnLayout not usable

Former Member
1,552

In an XML view of a SAPUI5 app, I am defining a sap.ui.form.SimpleForm. I am using SAP Web IDE.

Within the declaration of the SimpleForm, when I define layout="ColumnLayout", WebIDE gives me a semantic error, stating that the property value is incorrect. Each of the 3 other SimpleFormLayouts works without error.

It appears that this layout definition is also not working at runtime, as the content displays in one column despite my specifying otherwise.

Is there any reason why ColumnLayout is not being recognized as a valid SimpleFormLayout?

Accepted Solutions (0)

Answers (1)

Answers (1)

I had the same issue. I do not believe that they support the ColumnLayout any more (???)

But, my goal was to get two columns in the output. If that is also your goal, (???) then I ended up using the ResponsiveGridLayout. I had to split the columns myself by adding a form:FormContainer around each column.

The ResponsiveGridLayout will automatically split Containers into 1 or 2 or 3,..columns if there is room. I already had the column (container) labels setup from previous work and so this did not bother me overly much. Although I see the concern if you do no already have the inputs grouped.

<form:Form app:Delete="1" app:Insert="1" app:Update="1" class="editableForm" editable="true" id="idForm">
    <form:layout>
        <form:ResponsiveGridLayout adjustLabelSpan="false" 
             columnsL="2" 
             columnsM="2" 
             columnsXL="2" 
             emptySpanL="0" 
             emptySpanM="0" 
             emptySpanS="0" 
             emptySpanXL="0" 
             labelSpanL="4" 
             labelSpanM="12" 
             labelSpanS="12" 
             labelSpanXL="4" 
             singleContainerFullSize="false"/>
	</form:layout>
	<form:FormContainer title="Column 1">
            <form:FormElement>
	        <form:label>
	            <smartField:SmartLabel labelFor="id___projWBSCode"/>
	        </form:label>
	        <smartField:SmartField id="id___projWBSCode" suggest="suggest" value="{projWBSCode}"/>
	    </form:FormElement>
	    <form:FormElement>
		<form:label>
			<smartField:SmartLabel labelFor="id___projName"/>
		</form:label>
		<smartField:SmartField id="id___projName" suggest="suggest" value="{projName}"/>
	    </form:FormElement>
        </form:FormContainer>
        <form:FormContainer title="Column 2">
            <form:FormElement>
	        <form:label>
	            <smartField:SmartLabel labelFor="id___projWBSCode1"/>
	        </form:label>
	        <smartField:SmartField id="id___projWBSCode1" suggest="suggest" value="{projWBSCode}"/>
	    </form:FormElement>
	    <form:FormElement>
		<form:label>
			<smartField:SmartLabel labelFor="id___projName1"/>
		</form:label>
		<smartField:SmartField id="id___projName1" suggest="suggest" value="{projName}"/>
	    </form:FormElement>
        </form:FormContainer>
</form:Form>
		
0 Kudos

This is also useful when you want to achieve a specific arrangement between the columns of the form.