Tag: responsivetable

How to create SAP UI5 Responsive table with OData model

UI 5 Responsive table with OData

This post contains the actual XML View code and the controller javascript code to construct an UI5 Responsive table with OData of type sap.m.Table and connent it to OData Service

            <mvc:View  
                xmlns:mvc="sap.ui.core.mvc"
                xmlns="sap.m"
                controllerName="initialView.controller"                
                displayBlock="true">
                <Page id="page1" title="Customers1" showHeader="true" enableScrolling="true"
                        class="sapUiContentPadding">
                      <Table id="Customers" headerText="Customers" items="{path: '/CustomerSet'}" >
                        <columns>
                            <Column>
                              <Text text="Customer ID" />
                            </Column>
                            <Column>
                              <Text text="Customer Name" />
                            </Column>                            
                        </columns>
                        <items>
                            <ColumnListItem>
                                <cells>
                                    <Text text="{Id}" />
                                </cells>
                                <cells>
                                    <Text text="{ path:'Name' }" />
                                </cells>                                
                            </ColumnListItem>
                        </items>
                      </Table>
                </Page>
            </mvc:View>

OData Model is set on the view as shown below

                  onInit : function() {
                    var modelOData, view1;
                    

                    // Odata service url must be specified below in the variable odata_url
                    var odata_url = 'Customer_Odata_Service'; 
                    
                    modelOData = new sap.ui.model.odata.v2.ODataModel(odata_url, true);
                    
                    view1 = this.getView();
                    view1.setModel(modelOData);
                  }

What is the difference between sap.m.Table and sap.ui.table

Parametersap.m.tablesap.ui.table
ApplicationUsed as responsive tables ( Mainly for mobiles ) Used in desktop centric applications
selectionOnly lines of record can be selected. individual cells in the table cannot be selectedIndividual cells of record can be selected.
UsageIt is not used for large set of dataIt is used for large set of data
how to get total rowstableInstance.getItems()tableInstance.getRows()
how to get bindingtableInstance.getBinding(‘items’)tableInstance.getBinding(‘rows’)

How to dynamically create a sap.m.table in SAP UI5

Required steps:

  1. define and initialize a variable with JSON Data ( Key value pairs )
  2. define a JSON Model reference variable and transfer the JSON Data through the constructor
  3. define a sap.m.Table reference and set the column Headings. Use the placeAt method to set the content
  4. Set the JSON Model to the table
  5. Assign the cell values to each row using the columnListItem class. Finally call the bindAggregation method of the Table reference and pass the cell values in the method call.

CODE EXAMPLE

SAP M TABLE

        <script type='text/javascript'>

var jsonData = [ {columnOne : “Data row A1”, columnTwo : “Data row 100”, columnThree : “Data row hundred”},

             {columnOne : "Data row A2", columnTwo : "Data row 200", columnThree : "Data row two hundred"},

             {columnOne : "Data row A3", columnTwo : "Data row 300", columnThree : "Data row three hundred"}  ];

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

var mTable = new sap.m.Table({

            columns : [

                  new sap.m.Column({ header  :  new sap.m.Label({  text : "Column One" }) }),

                  new sap.m.Column({ header  :  new sap.m.Label({  text : "Column Two" }) }),

                  new sap.m.Column({ header  :  new sap.m.Label({  text :  "Column Three" }) })

]

}).placeAt(“content”);

mTable.setModel(jsonModel);

mTable.bindAggregation(“items”, {

path : “/”,

template : new sap.m.ColumnListItem({

cells : [

new sap.m.Text({ text : “{columnOne}” }),

new sap.m.Text({ text : “{columnTwo}” }),

new sap.m.Text({ text : “{columnThree}” }),

]

})

});