cancel
Showing results for 
Search instead for 
Did you mean: 

Handle the default back button on UI5/Fiori screen

kasarla_nagaraju
Explorer
0 Kudos

Hi, I am working on a ui5/fiori app, I am trying to show a pop up when when user clicks on the default back button(See attachment). Popup will have two options 'Continue' and 'Cancel'. If user clicks on Continue button then I'd like to navigate to the previous page else if Cancel button is clicked then I want to stay on the same page. I've tried the below code I am able to see pop up(for a second) but the pop doesn't wait till user click on button. It closes immediately and it navigates to the previous page.

sap.ui.getCore().byId("backBtn").attachPress(function() {
debugger;
var bCompact; = !!this.getView().$().closest(".sapUiSizeCompact").length; MessageBox.warning( "Unsaved changes are lost, do you want to continue?.",
{ actions: ["Continue", sap.m.MessageBox.Action.CANCEL],
styleClass: bCompact ? "sapUiSizeCompact" : "", onClose: function(sAction) { MessageToast.show("Action selected: " + sAction); } } );

Accepted Solutions (0)

Answers (1)

Answers (1)

ericci
Active Contributor
0 Kudos

Hi, this is the implementation you could refer to. Keep in mind you need to make your adjustment like replace the "HomeRoute" with you actual home route, replace raw strings with correct i18n translations and so on.

Home.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History",
	"sap/m/MessageBox"
], function (Controller, History, MessageBox) {
	"use strict";


	return Controller.extend("it.designfuture.TestUI5Version.controller.Home", {
		
		onBackPress: function(oEvent) {
			var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length;
			MessageBox.warning(
				"Do you really want to leave this page?", {
					actions: [MessageBox.Action.OK, MessageBox.Action.CANCEL],
					styleClass: bCompact ? "sapUiSizeCompact" : "",
					onClose: function(sAction) {
						if( sAction === MessageBox.Action.OK ) {
							//Implement the back navigation
							var oHistory = History.getInstance();
							var sPreviousHash = oHistory.getPreviousHash();
							if (sPreviousHash !== undefined) {
								// We have a previus hash, so browser knows how to go back of a page
								window.history.go(-1);
							} else {
								// We got here with a deeplink so we don't know how to go back
								// Just return to your homepage or whatever route you want to!
								// Replace HomeRoute with your current route ;)
								var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
								oRouter.navTo("HomeRoute", {}, true);
							}
						} else {
							//do nothing, just close the dialog ;)
						}
					}
				}
			);
		}


	});
});

The view is simply a button to handle the click event, nothing complex, just what I needed to show to you this example.

<mvc:View controllerName="it.designfuture.TestUI5Version.controller.Home" xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<App id="idAppControl">
		<pages>
			<Page title="{i18n>title}">
				<content>
					<Button text="click me" press="onBackPress" />
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>
kasarla_nagaraju
Explorer
0 Kudos

Hi Emanuele,

Thank you for your reply, your code works very well with a custom button on a page however my requirement is to show pop up when we click on the standard back button(I've not coded this button) on menu bar at the top . Please see the attachment. With the code I've tried,a pop up comes up but it doesn't wait for user to click on a button. It immediately navigates to the previous page.

Thank you,

Nagaraju

ericci
Active Contributor
0 Kudos

Hi, I got your problem. Well, your problem happens because you're attaching your JS logic to an event that will be handled by another implementation (Fiori) anyway.

If you want to try to prevent the default behavior what you can do is to use the preventDefault method like this:

oEvent.preventDefault()

As the documentation says:

Prevent the default action of this event.
Note: This function only has an effect if preventing the default action of the event is supported by the event source.

So in your code, you need also try to see if the attachPress method allows you to pass the oEvent parameter inside the function handler. Try it and let me know 😉

kasarla_nagaraju
Explorer
0 Kudos

Tried the below code, 'showWarning' function is triggering successfully, however the issue is still there, pop up is closing by itself immediately. with action = null.

sap.ui.getCore().byId("backBtn").attachPress(_this.showWarning);

		showWarning:function(oEvent){
			   debugger;
			   oEvent.preventDefault();
			   var bCompact;
				MessageBox.warning(
					"Unsaved changes will be lost, do you want to continue?.", {
						actions: ["Continue", "Cancel"],
						styleClass: bCompact ? "sapUiSizeCompact" : "",
						onClose: function(sAction) {
							MessageToast.show("Action selected: " + sAction);
						}
					}
				);
			 	
		},
ericci
Active Contributor

As I said in my previus comment

Note: This function only has an effect if preventing the default action of the event is supported by the event source.

If I've time tomorrow I will try to create a live example to test it