Hi
I have two views and in first view binding table list of items and I want to navigate to a second view page for each list item when clicked. I have implemented it and passing required data to next page in XML view as well as delete functionality.
Step – 1:
First, we need to login to SAP Cloud Platform by entering the credentials. After login, I have created a project in SAP Web IDE. Here I’m creating a project with a project name “navigation” which is shown below the workspace.
Step – 2: webapp/model/Object.json
Now we need to create JSON file in order to bind our data to the view, for that I have taken a sample static JSON data like as below
Step – 3: webapp/view/page1.view.XML
Now in page1.view.XML I have defined a table and going to bind the above JSON data to that table.
The code goes as follows:
Step – 4: webapp/controller/page1.controller.js
Here, we need to pass the required parameters for the selected list item. I have taken two parameters( 'name', 'branch') to that selected item and passed it to the next level view.
I have implemented the code for deleting the selected table row with the help of getId() function. The sample code as shown below
Step – 5:
The output is as follows:
Step – 6: webapp/view/page2.view.XML
Now we are going to perform Navigation with parameters functionality for the above output. So, I have created another view page2.view.xml as shown below.
Step – 7:
First, we need to initialize router in component.js
Step – 8:
Then define the router class and routes under sapui5 in manifest.json.
There will be three sections in routing namely config, routes and targets.
Config in routing: These are the global configurations. We can pass different configurations to each routes. When in a route we don’t pass any configurations then these global configurations are considered as default values.
routes in routing: routes is an array which will have a pattern, name, target and other optional properties which are already passed in the config section.
pattern: the Hash pattern which will be matched to URL of the app. If the URL contains no hash then it will match to empty hash (” “). If the URL contains #first then it will match o pattern “first”.in this pattern we can create two paths like as {invoicePath}/{invoicePath1} these are used for passing parameters.
name : Name of the route. If we want navigation without changing or adding the hash to URL then we should use name property. We can call the router from controller page using this router names.
target : we can mention the name of the view which is going to replace controlAggregator control.
targets in routing: targets is the section where we pass view names. When router hits the target it will fill the respective controlAggregate container with the view mentioned in the target.
Step – 9: webapp/controller/page2.controller.js
Now we are writing code for second view controller page2.controller.js as shown below.
Step – 10:
The sample output as shown below after navigating with route parameters.
I have two views and in first view binding table list of items and I want to navigate to a second view page for each list item when clicked. I have implemented it and passing required data to next page in XML view as well as delete functionality.
Step – 1:
First, we need to login to SAP Cloud Platform by entering the credentials. After login, I have created a project in SAP Web IDE. Here I’m creating a project with a project name “navigation” which is shown below the workspace.
Step – 2: webapp/model/Object.json
Now we need to create JSON file in order to bind our data to the view, for that I have taken a sample static JSON data like as below
{
"Objects":[
{
"Name" : "DIVYA",
"College" : "KITS",
"Branch" : "ECE",
"Percentage" : "70"
},
{
"Name" : "SRAVANI",
"College" : "GLOBAL",
"Branch" : "EEE",
"Percentage" : "80 "
},
{
"Name" : "MOUNICA",
"College" : "GATE",
"Branch" : "CSE",
"Percentage" : "60"
}
]
}Step – 3: webapp/view/page1.view.XML
Now in page1.view.XML I have defined a table and going to bind the above JSON data to that table.
The code goes as follows:
<mvc:View controllerName="navigation.controller.page1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
displayBlock="true">
<App id="app">
<pages>
<Page title="Tableview">
<content>
<Table id="abc" items="{path: '/Objects'}">
<columns>
<Column width="11rem">
<Label text="Name"/>
</Column>
<Column width="11rem">
<Label text="College"/>
</Column>
<Column width="6rem" hAlign="End">
<Label text="Branch"/>
</Column>
<Column width="15rem" hAlign="End">
<Label text="Percentage"/>
</Column>
<Column width="15rem" hAlign="End">
</Column>
</columns>
<ColumnListItem press="onPress" type="Navigation">
<Text text="{Name}"></Text>
<Text text="{College}"></Text>
<Text text="{Branch}"></Text>
<Text text="{Percentage}"></Text>
<Button type="Reject" icon="sap-icon://delete" press="ondeletepress" />
</ColumnListItem>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>Step – 4: webapp/controller/page1.controller.js
Here, we need to pass the required parameters for the selected list item. I have taken two parameters( 'name', 'branch') to that selected item and passed it to the next level view.
I have implemented the code for deleting the selected table row with the help of getId() function. The sample code as shown below
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("navigation.controller.page1", {
onInit: function() {
var oTable = this.getView().byId("abc");
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("model/Object.json");
oTable.setModel(oModel);
},
/* to Navigate with parameters */
onPress: function(oEvent) {
var oItem = oEvent.getSource();
var sPath = oItem.getBindingContext().getPath("Name");
var sPath1 = oItem.getBindingContext().getPath("Branch");
var oTable = this.getView().byId("abc");
var modelData = oTable.getModel();
var data = modelData.getProperty(sPath);
var data1 = modelData.getProperty(sPath1);
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("page2", {
invoicePath: data,
invoicePath1: data1
});
},
/* for deleting the selected table data using selected row index or Id */
ondeletepress: function(evt) {
if (evt.getSource().getParent().getParent().getItems().length > 0) {
var row = evt.getSource().getParent().getId();
evt.getSource().getParent().getParent().removeItem(row);
}
}
});
});Step – 5:
The output is as follows:
Step – 6: webapp/view/page2.view.XML
Now we are going to perform Navigation with parameters functionality for the above output. So, I have created another view page2.view.xml as shown below.
<mvc:View controllerName="navigation.controller.page2" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
displayBlock="true">
<App>
<pages>
<Page showNavButton="true" navButtonPress="onNavBack">
<content>
<VBox>
<Text id="myTestId" text="Name"></Text>
<Text id="TestId" text="Branch"></Text>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>Step – 7:
First, we need to initialize router in component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"navigation/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("navigation.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");
/* include this below single line in component.js file */
this.getRouter().initialize();
}
});
});Step – 8:
Then define the router class and routes under sapui5 in manifest.json.
/*Include this below code in your manifest.json file*/
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "navigation.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [{
"pattern": "",
"name": "page1",
"view": "page1",
"controlAggregation": "pages"
},
{
"pattern": "page2/{invoicePath}/{invoicePath1}",
"name": "page2",
"target": "page2",
"controlAggregation": "pages"
}
],
"targets": {
"page1": {
"viewName": "page1"
},
"page2": {
"viewName": "page2"
}
}
}
There will be three sections in routing namely config, routes and targets.
Config in routing: These are the global configurations. We can pass different configurations to each routes. When in a route we don’t pass any configurations then these global configurations are considered as default values.
routes in routing: routes is an array which will have a pattern, name, target and other optional properties which are already passed in the config section.
pattern: the Hash pattern which will be matched to URL of the app. If the URL contains no hash then it will match to empty hash (” “). If the URL contains #first then it will match o pattern “first”.in this pattern we can create two paths like as {invoicePath}/{invoicePath1} these are used for passing parameters.
name : Name of the route. If we want navigation without changing or adding the hash to URL then we should use name property. We can call the router from controller page using this router names.
target : we can mention the name of the view which is going to replace controlAggregator control.
targets in routing: targets is the section where we pass view names. When router hits the target it will fill the respective controlAggregate container with the view mentioned in the target.
Step – 9: webapp/controller/page2.controller.js
Now we are writing code for second view controller page2.controller.js as shown below.
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("navigation.controller.page2", {
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("page2").attachPatternMatched(this._onObjectMatched, this);
},
onNavBack: function() {
history.go(-1);
},
_onObjectMatched: function(oEvent) {
var cc = oEvent.getParameter("arguments").invoicePath;
var textId = this.getView().byId("myTestId");
textId.setText(cc);
var cc1 = oEvent.getParameter("arguments").invoicePath1;
var textId1 = this.getView().byId("TestId");
textId1.setText(cc1);
}
});
});Step – 10:
The sample output as shown below after navigating with route parameters.
- SAP Managed Tags:
6 Comments
