cancel
Showing results for 
Search instead for 
Did you mean: 

UI5 dynamically add elements vertically

I039810
Advisor
Advisor
0 Kudos

Hi Experts,

I am looking to achieve the following dynamically:

Based on the XML code below, I wrote the controller code as:

Still I get the layout with label on left and input on right (not one below other)

var form = new sap.ui.layout.form.SimpleForm();
				
form.setLabelSpanL(4);
form.setLabelSpanM(4);
form.setLabelSpanS(4);
form.setEmptySpanL(0);
form.setEmptySpanM(0);
form.setEmptySpanS(0);
form.setMaxContainerCols(2);
form.setLayout("ResponsiveGridLayout");

var lab = new sap.m.Label();
lab.setText("Ok to return");
form.addContent(lab);

var inp = new sap.m.Input();
inp.setValue("No");
form.addContent(inp);

var lab = new sap.m.Label();
lab.setText("Ok to return");
form.addContent(lab);

var inp = new sap.m.Input();
inp.setValue("No");
form.addContent(inp);


var rad = new sap.m.RadioButtonGroup();
var btn1 = new sap.m.RadioButton();
btn1.setText("sText1");
var btn2 = new sap.m.RadioButton();
btn2.setText("sText2");
rad.addButton(btn1);
rad.addButton(btn2);
form.addContent(rad);


The XML code is:

<forms:SimpleForm labelSpanL="4" labelSpanM="4" labelSpanS="4" emptySpanL="0" emptySpanM="0" emptySpanS="0" maxContainerCols="2"
		layout="ResponsiveGridLayout" width="100%">
		<!--<core:Title text="Termination information"/>-->
		<Label text="Ok to return"/>
		<Input value="No"/>
		
		<Label text="Regret Termination"/>
		<Input value="Yes"/>
		<Label text="Are you above 16 years old?"/>
		
		<RadioButtonGroup selectedIndex="2" >
		<buttons>
			<RadioButton groupName="GroupA" id="RB4-1" text="Option 1"/>
			<RadioButton groupName="GroupA" id="RB4-2" text="Option 2"/>
			<RadioButton groupName="GroupA" id="RB4-3" text="Option 3"/>
		</buttons>
		</RadioButtonGroup>
	</forms:SimpleForm>

Please help here.

Regards,

Shalini.

Accepted Solutions (0)

Answers (3)

Answers (3)

former_member365727
Active Contributor
0 Kudos

if you use SimpleForm layout...then below things will happen (taken from documentation)

  • A new Label starts a new row (FormElement) in the form.
  • All other controls will be assigned to the row (FormElement) that started with the last label.

This is the reason why you won't see the elements one below the other.

To display elements one below the other use vertical layout

former_member340030
Contributor
0 Kudos

Actually labelSpan = 12 in all the screen sizes(L,M,S,XL) will make that happen .. Input below the label not next to it ..

Thanks

Viplove

Sharathmg
Active Contributor
0 Kudos

You need to make right setting for the span of each control in terms of column.

Create a container and assign 12 column span for label, input field and other controls. This way, each control will occupy the full row and no allow any other control next to it. It will be responsive too.

If you are familiar with bootstrap, use the class col-md-12 and col-sm-12 for label and this will push the input field to next row.

Regards,

Sharath