JSFiddle - React, Tailwind, and code Playground

by Nagarjun NM

HTML

<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table"
				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>
				sap.ui.localResources("learning");
				var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

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

JavaScript

var oModel = new sap.ui.model.json.JSONModel();
		var odata = [
		             
		                        {"panelId":"001","panelName":"sap"},
		                        {"panelId":"002","panelName":"scn"}
		                        
		             
		         
		             
		             ];
		oModel.setData(odata);
		sap.ui.getCore().setModel(oModel);
		
		var odata1 = [
		              
		            	             {"sysId":"sys1","sysdes":"system1","group":"001"},
		            	             {"sysId":"sys2","sysdes":"system2","group":"002"}
		            	             
		              ];
		
		var oModel1 = new sap.ui.model.json.JSONModel();
		oModel1.setData(odata1);
		sap.ui.getCore().setModel(oModel1, "oModelData");
		
		
		var oRowRepeater = new sap.ui.commons.RowRepeater({
			
		});
		oRowRepeater.bindRows("/",new sap.m.Panel({
			headerText:"{panelName}",
			content:[
			         new sap.m.List({
			        	 items:{
			        		 path:"oModelData>/",
			        		 template:new sap.m.StandardListItem({
			        			title:"{oModelData>sysdes}", 
			        		 }),
			        	 }
			         })
			         ]
		}));
		
	
		
		
	oRowRepeater.placeAt("content");