JSFiddle - React, Tailwind, and code Playground

by gopalnair

HTML

<!DOCTYPE html>
<title>SAPUI5</title>
<script
        id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
        data-sap-ui-theme="sap_belize"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-preload="async" >
</script>
<body>
  <script id="myView" type="ui5/xmlview">
    <mvc:View 
      controllerName="com.timodenk.sapui5.example.controller.App"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
      
      <Table items="{ path: 'modelPath>/arrayName' }">
        <columns>
          <Column><Text text="Name" /></Column>
          <Column><Text text="Age" /></Column>
          <Column></Column>
        </columns>
        <items>
          <ColumnListItem>
            <cells>
              <Text text="{modelPath>firstName} {modelPath>lastName}" />
              <Text text="{modelPath>age} years" />
              <Button press="rowClicked" icon="sap-icon://hint" />
            </cells>
          </ColumnListItem>
        </items>
      </Table>
    </mvc:View>
  </script>
  
  <main id="content"></main>
</body>

JavaScript

sap.ui.getCore().attachInit(function() {
  
  // define controller
  sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast"
  ], function (Controller, MessageToast) {
    "use strict";
    return Controller.extend("com.timodenk.sapui5.example.controller.App", {
      onInit: function() {
        var model = new sap.ui.model.json.JSONModel();
        model.setData({ 
          arrayName: [
            { firstName: "Albert", lastName: "Einstein", age: 76, born: 1879 },
            { firstName: "Thomas", lastName: "Edison", age: 84, born: 1847 },
            { firstName: "Neil", lastName: "Armstrong", age: 82, born: 1930 }
          ]
        });
        this.getView().setModel(model, "modelPath");
      },
      
      rowClicked: function(oEventArgs) {
        var row = oEventArgs.getSource();
        var context = row.getBindingContext("modelPath");

        // get binding object (reference to an object of the original array)
        var person = context.oModel.getProperty(context.sPath);
        
        MessageToast.show(person.firstName + " was born in " + person.born + ".")
      }
    });
  });
  
  // add XML view
  sap.ui.xmlview({
    viewContent: jQuery("#myView").html()
  }).placeAt("content");
});