Skip to Content

Displaying Database Table Contents Dynamically using SAPUI5(SAP PORTAL APPLICATION)

In this blog, I want to explain you how you can display dynamic  table content and table layout from database table with SAPUI5. But I will not share java code, i will only share json data which i prepare in java code. First,  we’ll read the table names and fill into the combobox; then, we’ll show the table content of the selected table name from combobox.

We have Servlet that returns table names and table content as json format.

  • Table Names json :
{"tables":[{"id":"-1","name":"Select Table"},{"id":"ZDTY_CUSTOMER","name":"ZDTY_CUSTOMER"},{"id":"ZDTY_PERSON","name":"ZDTY_PERSON"},{"id":"ZHVL_REQUIREMENT","name":"ZHVL_REQUIREMENT"},{"id":"Z_IZINTALEPLERI","name":"Z_IZINTALEPLERI"},{"id":"Z_IZIN_FORM","name":"Z_IZIN_FORM"},{"id":"Z_IZIN_FORM_TABLE","name":"Z_IZIN_FORM_TABLE"},{"id":"Z_USERINFO","name":"Z_USERINFO"},{"id":"Z_USER_DETAIL","name":"Z_USER_DETAIL"},{"id":"Z_USER_INFO","name":"Z_USER_INFO"},{"id":"Z_USER_INFO_2","name":"Z_USER_INFO_2"},{"id":"Z_USER_INFO_3","name":"Z_USER_INFO_3"}]}
  • Table Content json :


We have index.jsp and our code is here :

<%@ page language="java" contentType="text/html; charset=UTF-8"


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>SAPUI 5</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script         src='/sapui5latest/resources/sap-ui-core.js'




data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m" >



                        var tablesModel = new sap.ui.model.json.JSONModel("/irj/servlet/prt/portal/prtroot/");

                        var tableContent = new sap.ui.model.json.JSONModel();                       

              "ui5code", "/");

                        var app = new sap.m.App("myApp");


                        var view = sap.ui.view(

                                   { id:"idEklePage",








<div id="area"></div>



We have two javascript file (view and controller files) appview.view.js and appview.controller.js. They are in ui5code folder.

appview.view.js file code :

sap.ui.jsview("ui5code.appview", {
      /** Specifies the Controller belonging to this View.
      * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
      * @memberOf ui5desk.appview
      getControllerName : function() {
            return "ui5code.appview";
      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
      * Since the Controller is given to this method, its event handlers can be attached right away.
      * @memberOf ui5desk.appview
      createContent : function(oController) {
             var mainFormLayout = new sap.ui.commons.layout.MatrixLayout();
             var selectionLayout = new sap.ui.commons.layout.MatrixLayout();
             var sel_tables = new sap.m.Select("tablesId", {
                    change : oController.getContent
             var item_sel_table = new sap.ui.core.Item({ key: "{id}", text: "{name}" });
             sel_tables.bindItems("/tables", item_sel_table);
                        new sap.m.Label({ text: "Table Name", width: "220px", required: true }),
             var table = new sap.m.Table("idTable",{
                      growing: true,
                    growingThreshold: 5,
                    headerToolbar : new sap.m.Toolbar({
                        content : [ new sap.m.Label({
                            text : "{/tname}"
                    columns : [ new sap.m.Column({
                        width : "2em",
                        header : new sap.m.Label({
                            text : "Column Name"
             return mainFormLayout;

appview.controller.js File code:

sap.ui.controller("ui5code.appview", {
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf ui5desk.appview
      onInit: function() {
      getContent : function(oEvent) {
            var table = sap.ui.getCore().byId("idTable");
            var colitems = new sap.m.ColumnListItem();
            var tablename = oEvent.getParameters().selectedItem.getText();
                type: 'get',
                url: '/irj/servlet/prt/portal/prtroot/',
                dataType: 'json',
                data: {
                             tablename: tablename
                success: function(data) {
                    for(var i = 0 ; i < data.columns.length ; i++)
                          var column = new sap.m.Column({
                                    header : new sap.m.Label({
                                        text : data.columns[i].name
                          colitems.addCell(new sap.m.Text({
                                    text : '{'+data.columns[i].name+'}'
                    table.bindItems("/content", colitems);
                error: function(data) {
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf ui5desk.appview
//    onBeforeRendering: function() {
//    },
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf ui5desk.appview
//    onAfterRendering: function() {
//    },
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf ui5desk.appview
//    onExit: function() {
//    }

Then we deploy the project to portal. And we can see result as below :



You must be Logged on to comment or reply to a post.
  • Hi Omer,

    I am trying to create a similar application. I am able to get the contents from the table. But deploying it in the ui5 application is where i am facing issues. Did you create two different projects ? As in Dynamic web project and UI5 application project ?

    If yes then, can you explain the project structure and also the structure of the path you gave for the model ?

    Thanks in advance

      • As the standard libraries loaded are different for different projects. I have two projects.

        1. Dynamic Web project. (Here I am fetching the data from MySQL)

        2. SAP UI5 Application project. (here I am creating all the views)

        I am new to UI5 and SAP, so trying to figure out everything from scratch.