cancel
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 - Linking table to JSONModel and update content

0 Kudos

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

Accepted Solutions (0)

Answers (3)

Answers (3)

imsuryapandiyan
Participant
0 Kudos

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
AbhishekSharma
Active Contributor
0 Kudos

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

former_member322772
Active Participant
0 Kudos

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'}