Align Buttons to the next line in SAP UI5 "SimpleForm"

[rahuljain257]

Hello everyone,

I am a newbie in SAPUI5 😉 just started learning the basics. I want to know from you guys how can i align the buttons to the next line / row in the form. As you can see in the below image, Save & Cancel button are aligned to Pin-Code. So let me know. Here is the fiddle link : jsBin link

Also can one please tell me what is the meaning of this attribute, I have read the documentation but didn't quite got much hold of it. The terms are as follows : labelSpanXL, labelSpanL, labelSpanM, labelSpanS, emptySpanXL, emptySpanL, emptySpanM, emptySpanS, columnsXL, columnsL, columnsM, breakpointXL, breakpointL & breakpointM.

[rajeevgoswami1]

Add a blank label before button. May not perfect solution but It works.:)

[RameshShrestha]

How about keeping the buttons out of the form and keep into HBox. Add form and HBox into VBox.

In these VBox and HBox you can align as you wanted.

The terms are as follows : labelSpanXL, labelSpanL, labelSpanM, labelSpanS, emptySpanXL, emptySpanL, emptySpanM, emptySpanS, columnsXL, columnsL, columnsM, breakpointXL, breakpointL & breakpointM. These are used for responsiveness of the form. That is the size of the form will change depending upon the device screen size you use. S-->Mobile, M->Tablet, L-> Desktop

var container = new sap.m.VBox(); var oForm = new sap.ui.layout.form.SimpleForm({ title: "Sample Form", editable: true, layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout, columnsL : 2, columnsM : 2, columnsS : 2, content: [ new sap.m.Label({ text:"Name" }), new sap.m.Input({ placeholder:"Enter name here", width: "60%" }), new sap.m.Label({ text:"Company" }), new sap.m.Input({ placeholder: "InkYourCode", width: "60%" }), new sap.m.Label({ text:"Email"}), new sap.m.Input({ placeholder: "Enter email here", width: "60%" }), new sap.m.Label({ text:"Mobile"}), new sap.m.Input({ placeholder: "Enter Mobile here", width: "60%" }), new sap.m.Label({ text: "Pin Code" }), new sap.m.Input({ placeholder: "Enter Pin-Code here", width: "60%" }) ] }); container.addItem(oForm); var btnContainer = new sap.m.HBox(); btnContainer.addItem( new sap.m.Button({ text: "Save" , width:"80px"})); btnContainer.addItem( new sap.m.Button({ text: "Cancel" , width:"80px"})); container.addItem(btnContainer); container.placeAt("content");

With Regards,

Ramesh Shrestha

[rahuljain257]

Thanks @Ramesh for replying my thread. I have couple of queries more :

• How can I test this terns so that i can understand it better ? : labelSpanXL, labelSpanL, labelSpanM, labelSpanS, emptySpanXL, emptySpanL, emptySpanM, emptySpanS, columnsXL, columnsL, columnsM, breakpointXL, breakpointL & breakpointM ?

• Beside that as per your solution can you please tell me how can i achieve the same functionality "Putting the buttons @ the next line" using Form control ?

• The solution which have explained, can you please tell me how can i put the controls @ the center of the form ? currently its left aligned