Search code examples
javascriptjquerysapui5

Event Handler for Launcpad Header Back Button


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.


Solution

  • 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.