Skip to Content
0
Jun 05, 2018 at 04:17 AM

UI5 dynamically add elements vertically

2003 Views

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.

Attachments