JSFiddle - React, Tailwind, and code Playground

by indrajith patel

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.m,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 busyDialog1 = new sap.m.BusyDialog('busy1',{text:'i am soo busy doing stuff', title: 'Busy'})
		
		  var data = [ {fname : "indrajith" , lname : ""},
			             {fname : "fred" , lname : ""},
			             {fname : "den" , lname : ""},
			             {fname : "foo" , lname : ""},
			             {fname : "red" , lname : ""},
			            ]
			var oModel = sap.ui.model.json.JSONModel();
			oModel.setData(data)
	              

					
		var oTable = new sap.m.Table({
		
			
			columns: [
			          new sap.m.Column({
			              
			              header : new sap.m.Label({
			                  text : "First Name"
			              })
			          }),
			          new sap.m.Column({
			             
			              header : new sap.m.Label({
			                  text : "Last Name"
			              })
			          })
			        ],
			        
			        
			  
		});
		
			oTable.setModel(oModel)

		
		oTable.bindAggregation("items", {
	        path: "/",
	        template: new sap.m.ColumnListItem({
	            cells: [new sap.m.Text({ text: "{fname}" }),
	                    new sap.m.Button({
	                    	
	                    	text : "Open the dialog",
	                    	press : function(e)
	                    	{
	                    		var id = e.getSource().sId;
	                    		var index = id.substr(-1);
	                    		console.log(index)
	                    		  var oDialog = new sap.m.Dialog();
	              				
	          					var oText = new sap.m.Input({value: ""});
	          					oDialog.addContent(oText);
	          			
	          					
	          					oDialog.addContent(new sap.m.Button({text : "OK",
	          						
	          					press : function()
	          					{
	          						/* 
	        	                    var m = oTable.getModel();
	        	                    var data = m.getData();
	        	                    var val = oText.getValue();
	        	              data[index].fname =...