Navigate to the same view but with a different parameters - sapui5

Question

I'm trying to create a launchpad app using a list of tiles, the problem is that when I click in a tile it could be a app then I navigate to app url or it could be an group of apps or other groups than I need to navigate to the same view of the launchpad but with a new list of tiles. For now, I just want to navigate to navigate to the same view when I click in a tile and do it with slide transition but if I create a route with the same target of default route the view does not render when I start the application, it only works if I ser the target of the route when I create an other target with the same view name.
where is a part of my manifest:
"routes": [
{
"pattern": "",
"name": "group",
"target": "group"
},
{
"pattern": "group",
"name": "group2",
"target": "group2"
}
],
"targets": {
"group": {
"viewName": "TileGroup",
"viewLevel" : 1
},
"group2": {
"viewName": "TileGroup",
"viewLevel" : 2
}
}
}
ans here the controller of my TileGroup view for now.
sap.ui.define([
"sap/ui/core/UIComponent"
],
sap.ui.controller("pelissari.soficom.launchpad.controller.TileGroup", {
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("./model/data.json");
this.getView().setModel(oModel);
},
onPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("group2");
}
}));
With this code I think that the navigation is working because the url of the app changes when I click in a tile but the view do not change.

Answer 1

If you are seeing the URL being changed, then you have the first part of the solution ready. The only thing is that you shouldn't navigate to a new target. Instead, you should navigate to the same target, but passing another tilegroup identifier using the second parameter of the navTo method, e.g.:
oRouter.navTo("tileView", {group: "group1"});
The second part involves getting an event raised in your controller whenever the URL changes, so that you can act on the change.
To catch the ID passed using the navTo method, you should change the route pattern in your manifest accordingly, e.g.:
"pattern": "tiles/:group:"
tiles indicates a fixed part in your URL, while :group: specifies an optional parameter called group. If you want to do this from the root (I think that's what you planned to do), it should be
"pattern": ":group:"
To inform the router that you want to get triggered when the URL changes, you can set a call-back. You can do so by inserting the code below into the onInit handler of your controller:
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("group").attachPatternMatched(this._onPatternMatched, this);
When this is in your onInit handler, the _onPatternMatched handler is invoked when there was a change in the URL that involves target group. The latter is useful, otherwise your method would get triggered for every URL change, even when the view linked to your controller is not visible.
From the _onPatternMatched method, you should read back what the group ID is that should be displayed, so that you can change the tiles. You can do this by reading the arguments parameter from the event parameter:
_onObjectMatched : function (oEvent) {
var groupId = oEvent.getParameter("arguments").group;
console.log("Group ID: " + groupId);
},
The essentials of routing are very well explained in the UI5 walk-through step 31, 32 and 33. Please especially take note of part 32, which explains routing with parameters.