Skip to Content

Hi All,

In this, blog I am going to explain how to pass a JSON Object as a routing Parameter.

If we have a need of passing an entire selected row or JSON object from one view to another view what we do is we pass routing parameters by getting Individual values. If we don’t pass any routing parameter it shows an error. So to overcome that I am passing a JSON Object as routing parameter and getting values in the next View.

Lets see how we can do it.

Configure routing in manifest.json

manifest.json:

"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "simpleform.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [{
"pattern": "",
"target": "View1",
"name": "View1"
}, {
"pattern": "View2/{row}",
"name": "View2",
"target": "View2"
}],
"targets": {
"View1": {
"viewName": "View1"
},
"View2": {
"viewName": "View2"
}
}
}

View1.view.xml:

I have taken a table with mode as single select.

<mvc:View controllerName="simpleform.controller.View1" xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App id="app">
<pages>
<Page title="{i18n>title}">
<content>
<Table id="EmployeeDetails" items="{path: 'details>/employeeDetails', sorter:{ path: 'EmployeeID'} }" mode="SingleSelectLeft"
selectionChange="onSelection">
<columns>
<Column>
<Text text="Employee Id"/>
</Column>
<Column><Text text="Name"/>
</Column>
<Column><Text text="Gender"/>
</Column>
<Column><Text text="Date Of Joining"/>
</Column>
<Column><Text text="Region"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{details>EmployeeID}"/>
<Text text="{details>Name}"/>
<Text text="{details>Gender}"/>
<Text text="{details>date}"/>
<Text text="{details>region}"/>
</cells>
</ColumnListItem>
</items>
</Table>
<Button press="onPress" text="Get Details"/>
</content>
</Page>
</pages>
</App>
</mvc:View>

 

Selecting a row:

 onSelection: function(oEvent) {
/* Row global variable*/ 
/* details model alias name */
  var oTable = oEvent.getSource().getSelectedItem().getBindingContext("details");
  Row = oTable.oModel.getProperty(oTable.sPath);
  },

Navigation with routing parameter:

 onPress: function(oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("View2", {
row :  JSON.stringify(Row)
});
 }

Here we need to stringify the JSON Object so that it becomes as value.

View2.view.xml:

I am taking an empty view here and I will display the data in console. So that you can bind it for any modules like table, form etc..

<mvc:View controllerName="simpleform.controller.View2" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page title="{i18n>title}">
<content>
</content>
</Page>
</mvc:View>

View2.controller.js:

In view2 controller we need to parse the Json Object which we passed as an routing parameter so that from individual value again it turns to Json Object.

onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("View2").attachMatched(this._onRouteMatched, this);
},

_onRouteMatched: function(oEvent) {
var sObjectId = oEvent.getParameter("arguments").row;
var a = JSON.parse(sObjectId) ;
console.log(a);
}

 

In console value a is an object with property values.

Output:

View1 with table

 

View2 with selected row data in console.

Thank you.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply