Hi All,
I am using following sapui5 code to build a form i am able to load the form perfectly when increasing and decreasing the size of a browser.
When it is loaded in mobile it is not working perfectly if is showing full screen layout.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<script id="sap-ui-bootstrap" data-sap-ui-theme="sap_goldreflection" data-sap-ui-trace="false" type="text/javascript" data-sap-ui-libs="sap.ui.commons" src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js">
</script>
<script type="text/javascript">
var oLayout1 = new sap.ui.commons.form.ResponsiveLayout("L1");
var oForm1 = new sap.ui.commons.form.Form("F1",{
minWidth : 1024,
layout: oLayout1,
formContainers: [
new sap.ui.commons.form.FormContainer("F1C1",{
title: "BUSINESS INFORMATION",
formElements: [
new sap.ui.commons.form.FormElement({
label: "Legal Name",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Business Name (if different from legal name)",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Contact Name",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Street Address",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "City",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "State",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Country",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Zip",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Email Address",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Phone Number",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Fax Number",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}) ] }),
new sap.ui.commons.form.FormContainer("F1C2",{
title: "PAYMENT TERMS & CONDITIONS",
formElements: [
new sap.ui.commons.form.FormElement({
label: "Payment Method",
fields: [new sap.ui.commons.DropdownBox("PaymentMethod", { items : [
new sap.ui.core.ListItem("PaymentMethod1", {text:"Wire"}),
new sap.ui.core.ListItem("PaymentMethod2", {text:"ACH"}),]})
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Payment Terms",
fields: [new sap.ui.commons.DropdownBox("Pay", {items : [
new sap.ui.core.ListItem("Pay1", {text:"NET30"}),
new sap.ui.core.ListItem("Pay2", {text:"NET45"}),
new sap.ui.core.ListItem("Pay3", {text:"NET60"}),]})
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Bank Name",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Bank Address",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Bank Routing Number",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "IBAN Number",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Swift Code",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Bank Key or ABA number",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Account Number",
fields: [new sap.ui.commons.TextField()
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}) ] }),
new sap.ui.commons.form.FormContainer("F1C3",{
title: "TAX INFORMATION",
formElements: [
new sap.ui.commons.form.FormElement({
label: "Tax Classification",
fields: [new sap.ui.commons.RadioButton({
text : 'Individual/Sole Proprietor',
tooltip : 'Select for Individual/Sole Proprietor',
groupName : 'Group1',
selected : true, } ),
new sap.ui.commons.RadioButton({
text : 'Corporation',
tooltip : 'Select for Corporation',
groupName : 'Group1', } ),
new sap.ui.commons.RadioButton({
text : 'Partnership',
tooltip : 'Select for Partnership',
groupName : 'Group1',} ) ],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Tax Exempt",
fields: [new sap.ui.commons.CheckBox({
text : 'Social Security Number',
tooltip : 'Social Security Number',
checked : false,
}),
new sap.ui.commons.CheckBox({
text : 'Employer Identification Number',
tooltip : 'Employer Identification Number',
checked : false,
})
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
label: "Limited Liability Company",
fields: [new sap.ui.commons.DropdownBox("Company", {items : [
new sap.ui.core.ListItem("Company1", {text:"Disregarded"}),
new sap.ui.core.ListItem("Company2", {text:"Corporation"}),
new sap.ui.core.ListItem("Company3", {text:"Partnership"}),]})
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}),
new sap.ui.commons.form.FormElement({
fields: [new sap.ui.commons.Button("myButton1",{text:"Cancel",press:function(){} }),
new sap.ui.commons.Button("myButton2",{text:"Save",press:function(){} })
],
layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: true})
}) ] })]});
oForm1.placeAt("sample1");
</script>
<body class="sapUiBody" role="application">
<div id="sample1"></div>
</body>
</html>
output screens are shown below.
Which was not working on this screen ...
Thanks in advance
Ravi Varma.