Simple Form with SAP UI5


<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
		var oSimpleForm = new sap.ui.layout.form.SimpleForm(
				{ 

				layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
				content:[
							
				new sap.ui.core.Title({ text: "Header1",
										icon: "sap-icon://home" ,
										level: sap.ui.core.TitleLevel.H3 ,
									 }), 
												    
			    new sap.ui.commons.Label({text:"Input_1",
										design: sap.ui.commons.LabelDesign.Bold ,											
										textDirection: sap.ui.core.TextDirection.RTL,
										wrapping: true ,
										width: "1px",
										textAlign: sap.ui.core.TextAlign.Left
										}),
				new sap.ui.commons.TextField( "Input1", {
											value: "Input1",
											TextDirection: sap.ui.core.TextDirection.RTL,
											width : "50%",
											maxLength: 10,
											ValueState: sap.ui.core.ValueState.Success,
											TextAlign: sap.ui.core.TextAlign.Begin,
											design: sap.ui.core.Design.Monospace,
											helpid: "Input1 Help",																								  																  
											}),
				new sap.ui.commons.TextField( "Input2", {
											enabled: false,									  
											}),
				new sap.ui.commons.Label({text:"Date"}),
				new sap.ui.commons.DatePicker("Input3",{yyyymmdd : "20170303"}),
														
				new sap.ui.commons.Label({text:"RadioButton1"}),
				new sap.ui.commons.RadioButtonGroup({
											   columns: 2,
											   items: [ new sap.ui.core.Item({text: "Real"}),
													    new sap.ui.core.Item({text: "Unreal"}) ] 					
												}),
														
				new sap.ui.core.Title({ text: "Header2",
									icon: "sap-icon://goal" ,
									level: sap.ui.core.TitleLevel.H3 ,
									}), 
												 
				new sap.ui.commons.Label({text:"Input4"}),
				new sap.ui.commons.TextField({}),
				new sap.ui.commons.Label({text:"Input5"}),
				new sap.ui.commons.TextField({}),

				new sap.ui.core.Title({ text: "Header3",
								icon: "sap-icon://flag" ,
								level: sap.ui.core.TitleLevel.H3 ,
							 	}), 
							 
				new sap.ui.commons.Label({text:"Input6"}),
				new sap.ui.commons.TextField({}),
				new sap.ui.commons.Label({text:"Input7"}),
				new sap.ui.commons.TextField({}),
							
				] }).placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

Leave a comment

Your email address will not be published. Required fields are marked *