I need to overwrite the event of Launchpad Header Back Button in certain cases. I tried lots of things like:

try {
	sap.ui.getCore().byId("backBtn").attachPress(this, function(oEvent)  {
		oEvent.preventDefault();
 }.bind(this));
} catch (err) {
	console.log(err);
}

I need to overwrite the event of Launchpad Header Back Button in certain cases. I tried lots of things like:

try {
	sap.ui.getCore().byId("backBtn").attachPress(this, function(oEvent)  {
		oEvent.preventDefault();
 }.bind(this));
} catch (err) {
	console.log(err);
}

or

$('body').mousedown(function(e) {


  var oTarget = $(e.target);


  console.log(oTarget[0].offsetParent.id);
  console.log(oTarget[0]);
  if (oTarget[0].offsetParent.id === "backBtn") {
    console.log("prevent");
    e.preventDefault();
    e.stopPropagation();
    return false;
  }

}.bind(this));

In these codes I just tried to prevent the navi, getting back. Didn't work. I want to navigate to certain views in certain cases. For example:

if user is in view 3 -> click Launchpad Back Button -> navigate to view 1 (not the previous navigation target)

But I couldn't stop navigation mechanism to go back to previous target.

I'd appreciate any help or ideas.

• javascript
• jquery
• sapui5

• Most answers suggest setBackNavigation which is, however, not a public API and can be removed with any future SAPUI5 upgrade. Reach out to SAP and submit a new enhancement request as per the note 2469897. – Boghyon Hoffmann Commented Feb 16, 2024 at 12:18

3 Answers 3

First you need to register the ShellUIService in your manifest.json

In manifest.json under sap.ui5:

...
"sap.ui5": {
     ...
     "services": {
        "ShellUIService": {
            "factoryName": "sap.ushell.ui5service.ShellUIService"
        }
    }
    ...
}
...

then you can override the default behavior in your controller (or from the ponent)

this.getOwnerComponent().getService("ShellUIService").then(function(oShellService) {
    oShellService.setBackNavigation(function() {
        //either do nothing to disable it, or add your own back nav logic
    })

})

I've had trouble preventing the default Fiori shell(launchpad) actions in the past myself. A different approach might be to use sap.ui.core.routing's HashChanger and/or the Router (presumably you are already using a router in your app).

It's not incredibly elegant, but you could use the HashChanger's hashChanged event to determine if your conditions are met (i.e. when old hash = view 3's pattern) you could fire a Router.navTo("view1sRouteName"). You could also instantiate a History sap.ui.core.routing object to get for certain whether the direction is forward or backward using History.getDirection().

Make sure you read the APIs on the History and HashChanger's dependencies so that you are instantiating at the right time.

I did not get it to work reliably with the most voted answer.

This might be against better advice in the documentation, but is working for me:

...
    "sap/ushell/ui5service/ShellUIService"
], function (BaseController, JSONModel, formatter, IconPool, ShellUIService) {
...
onInit: function () {
    this.oShellUIService = new ShellUIService({
                    scopeObject: this.getOwnerComponent(),
                    scopeType: "ponent"
                });
        this.oShellUIService.setBackNavigation(this._navBack.bind(this));

...