MII Page with UI5 Controls 2 – Table

In the previous blog, we saw how to create a ui5 table on irpt page and bind it with the dummy Json data object. Here in this space, we will see how to bind the json output data from a MII transaction into the UI5 table control on a MII page. Let’s start:

• Go to MII workbench->WEB, right click on folder, create a new irpt page save it with “SecondPage.irpt”.
• Add the reference to the libraries.

               <script src=”https://openui5.hana.ondemand.com/resources/sap-ui-core.js” id=”sap-ui-bootstrap” data-sap-ui-libs=”sap.m,                sap.ui.layout,sap.ui.table,sap.ui.commons” data-sap-ui-theme=”sap_bluecrystal”> </script>    

• In BODY element, create one div. <div id=”uiArea”></div>
• Let us call a function fetchData() on Body onload event, and in this function, we will call the BLS, create ui5 table, and bind data and place it on the div area.

          (First develop a BLS to return the expected output data in JSON format in transaction output string parameter)

• Save the page and test it using Chrome browser. The page will look like this:

Previous Blog : MII Page with UI5 Controls 1 – Table