Skip to Content

SAPUI5 - Linking table to JSONModel and update content

Hi friends,

I am new to SAP UI5. Currently, I am working on a project where I need :-

1. Fetch data from OData service hosted on SAP NW Gateway.

2. Display a table (with Add row button), so by default table will show the rows fetched from OData service and by clicking Add Row button, a new record need to be added to this Table for display (without updating backend).

3. Finally, need to create a button, by clicking this all the data (new inserted records) will be posted back thru OData service.

As per my limited knowledge I think whenever I update table, OData service will try to push data to backend. (which I don't want).

Thus, I've created a JSON model and set data found from OData service.

Wrote following code in component.js file

var oData = oModel.read("/DataSet", {
success: function(oData, oResponse) {
//Create JSON Model
//console.log("Success!");
var oODataJSONModel = new sap.ui.model.json.JSONModel();
oODataJSONModel.setData({
modelData: oData.results
});
// set the model to the core
sap.ui.getCore().setModel(oModel, "JDataSet");
alert(JSON.stringify(oData.results));

//Set model to table ( SEEMS PROBLEM IN THIS CODE)
var oTable = sap.ui.getCore().byId("dataset");
oTable.setModel(oODataJSONModel);

},
error: function(oError) {
//console.log("Error!");
}
});

In my XML view, I have linked my OData path to /DataSet as :

<Table width="auto" id="dataset" noDataText="No data" mode="None" showSeparators="All" growing="true" growingThreshold="20"
growingScrollToLoad="true" alternateRowColors="true" itemPress="_onTableItemPress" items="{path:'/DataSet'}">
<infoToolbar>
<Toolbar width="100%" height="auto" design="Auto" visible="false" enabled="true">
<content>
<Label text="Label" design="Standard" width="100%" required="false" textAlign="Begin" textDirection="Inherit" visible="true"/>
</content>
</Toolbar>
</infoToolbar>
<headerToolbar>
<OverflowToolbar width="auto" height="auto" design="Transparent" visible="true" enabled="true">
<content>
<Title text="KPAs" titleStyle="Auto" width="auto" textAlign="Begin" visible="true" wrapping="false"/>
<ToolbarSpacer width=""/>
<OverflowToolbarButton text="Sort" type="Transparent" icon="sap-icon://sort" iconFirst="true" width="auto" enabled="true" visible="true"
iconDensityAware="false"/>
<OverflowToolbarButton text="Filter" type="Transparent" icon="sap-icon://filter" iconFirst="true" width="auto" enabled="true" visible="true"
iconDensityAware="false"/>
<OverflowToolbarButton text="Group" type="Transparent" icon="sap-icon://group-2" iconFirst="true" width="auto" enabled="true" visible="true"
iconDensityAware="false"/>
<OverflowToolbarButton text="Settings" type="Transparent" icon="sap-icon://action-settings" iconFirst="true" width="auto" enabled="true"
visible="true" iconDensityAware="false"/>
<OverflowToolbarButton text="Action" type="Default" icon="sap-icon://add" iconFirst="true" width="auto" enabled="true" visible="true"
iconDensityAware="false" press="_onOverflowToolbarButtonPress"/>
</content>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="35px" hAlign="Left" vAlign="Top" minScreenWidth="Phone" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
<header>
<Text text="S.No." width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit" visible="true"/>
</header>
<footer/>
</Column>
<Column width="60px" hAlign="Left" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
<header>
<Text text="KPA Index" width="auto" maxLines="1" wrapping="true" textAlign="Begin" textDirection="Inherit" visible="true"/>
</header>
<footer/>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation">
<cells>
<ObjectIdentifier title="{path: 'ROW_IID', type: 'sap.ui.model.type.Float', formatOptions: { maxFractionDigits: 2 }}" text=""
titleActive="false" visible="true"/>
<Text text="{KIM}" width="auto" wrapping="true" textAlign="Begin" textDirection="Inherit" visible="true"/>
<Text text="{KIM_DESC}" width="auto" wrapping="true" textAlign="Begin" textDirection="Inherit" visible="true"/>
</cells>
</ColumnListItem>
</items>
</Table>

Please guide, how can I create and attach JSON Model with table and refresh the same whenever a new row added to json model.

Thanks,

Ekam

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Oct 23, 2018 at 09:47 PM

    Check the structure of the returned result. Is it an object with a property called "/DataSet" whose value is an array? Or is it an array already? In which case you only need to bind the items to "/". The items must be bound to an array.

    Also, try binding the model to the view (rather than the table) and naming it, otherwise you are using the undefined OData model.

    For example:

    this.getView().setModel(oODataJSONModel, "MyModel");

    Just be aware of your scope for "this".

    Then in the view bind it like :

    items: {path: 'MyModel>/DataSet'}


    Add comment
    10|10000 characters needed characters exceeded

  • Oct 23, 2018 at 10:01 PM

    Hi Ekam,

    Try setting Twowaybinding, and use same model for your table control, so is there is any change in table data like new row added on click on "Add new Row" button your model will be automatically updated.

    Thanks-

    Abhishek

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 24, 2018 at 08:25 AM

    Ekam,

    Try this in controller:

    oModel.read("/EmpProgListSet", {
    				success: function(oData, oResponse) {
    					var oTableModel = new sap.ui.model.json.JSONModel();
    					oTableModel.setData({
    						modelData: oData.results
    					});
    					this.getOwnerComponent().setModel(oTableModel, "tableModel");
    				}.bind(this),
    				error: function(oError) {
    					//console.log("Error!");
    				}
    			});
    

    In XML view

     items="{tableModel>/modelData}"
    
    <Text text="{tableModel>ProgName}" width="auto" wrapping="true" textAlign="Begin" textDirection="Inherit" visible="true"/>

    For Updating:

    Make sure the JSON model binding type is 'Two way' so that changes in the view will update model also.

    oModel.update(sPath, oData, {
    				success: function(response){
    					
    				},
    				error: function(error){
    					
    				}
    			});
    
    // oData - data to be updated
    Add comment
    10|10000 characters needed characters exceeded