SAPUI5 dynamic routes and targets

[former_member636416]

Hi all

i need to dynamically add a route and a target to my sapui5 app

For the route i found this one:

https://answers.sap.com/questions/12593047/how-to-dynamically-add-route-to-a-standard-app.html

But for targets i didnt found anything 😞

Any idea would be appreciated

Thanks

Nicola

[former_member221786]

Hello Nicola,

I think you can still get it done.

Have look at this and see if this matches your requirement.
Obviously this could break whenever you upgrade the SAPUI5 library as private properties are used.

// this = Component

let aTargets = this.getRouter().getTargets();
let oConfig = this.getRouter()._oConfig;

// Add a target
aTargets.addTarget("YourTargetName", {
	...oConfig, ...{
		viewPath: "Path to your view",
		viewName: "Name of your view",
		viewLevel: 1,
		rootView: this.createId("app") // Should be the id defined in manifest.json for routing -> config -> controlId
	}
});

// Add target to route
this.getRouter().getRoute("YourRouteName")._oConfig.target.push("YourTargetName");<br>

[former_member636416]

i solved in this way

right now it works well

init: async function () { // call the base component's init function UIComponent.prototype.init.apply(this, arguments); let that = this;
await jQuery.ajax({ type: "GET", contentType: "application/json", url: "view", dataType: "json", async: false, success: function (data, textStatus, jqXHR) { data.forEach(e => { console.log("Component.init: " + JSON.stringify(e)); that.getRouter().getTargets().addTarget(e.target.name, { viewId: e.target.viewId, viewName: e.target.viewName, viewPath: e.target.viewPath, rootView: that.getAggregation("rootControl").getId() }); that.getRouter().addRoute({ name: e.route.name, pattern: e.route.pattern, target: e.route.target }); });
// enable routing that.getRouter().initialize()
}, error: (err) => { alert("Failed to get /view"); } }); // set the device model //this.setModel(models.createDeviceModel(), "device"); }

[FlorianVogt]

Hi Nicola,
this is currently not supported. We have it in our backlog.

[former_member636416]

Hi Florian,

i solved in this way, in Component.js

init: async function () { // call the base component's init function UIComponent.prototype.init.apply(this, arguments); let that = this;
await jQuery.ajax({ type: "GET", contentType: "application/json", url: "view", dataType: "json", async: false, success: function (data, textStatus, jqXHR) { data.forEach(e => { console.log("Component.init: " + JSON.stringify(e)); that.getRouter().getTargets().addTarget(e.target.name, { viewId: e.target.viewId, viewName: e.target.viewName, viewPath: e.target.viewPath, rootView: that.getAggregation("rootControl").getId() }); that.getRouter().addRoute({ name: e.route.name, pattern: e.route.pattern, target: e.route.target }); });
// enable routing that.getRouter().initialize()
}, error: (err) => { alert("Failed to get /view"); } }); // set the device model //this.setModel(models.createDeviceModel(), "device"); }

Works like a charm

[thecoldstone]

@FlorianVogt, Is it still in a backlog?

[FlorianVogt]

Yes. No updates to share. @andreasecker @jiaweicao