How to add back button event in Universal Windows App without using WinjS Library?

Question

This is my main.js

(function () {
"use strict";

//No need of WinJS
var activation = Windows.ApplicationModel.Activation;
var roaming = Windows.Storage.ApplicationData.current.roamingSettings;

// For App Start Up
Windows.UI.WebUI.WebUIApplication.addEventListener("activated", function (args) {
    if (args.detail[0].kind === activation.ActivationKind.launch) {
        if (roaming.values["currentUri"]) {
            if (roaming.values["UserName"])
            {
                localStorage.setItem("UserName", roaming.values["UserName"]);
                window.location.href = roaming.values["currentUri"];
            }
        }
    }
});

// For App Suspension
Windows.UI.WebUI.WebUIApplication.addEventListener("suspending", function (args) {
    roaming.values["currentUri"] = window.location.href;
    roaming.values["UserName"] = localStorage.getItem("UserName");
});

// For Resuming App
Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", function (args) {
    var roam = Windows.Storage.ApplicationData.current.roamingSettings;
    if (roam) {
        if (roam.values["currentUri"]) {
            localStorage.setItem("UserName", roam.values["UserName"]);
            window.location.href = roam.values["currentUri"];
        }
    }
}, false);
// not working backpressed event
Windows.UI.WebUI.WebUIApplication.addEventListener("backpressed", function (args) {
   // to do
}, false);})();

I need to add back key press event for windows phone without using winjs library? Can anyone suggest me?

I am using ms-appx-web context in my app. I dont want to use winjs library.

Elvis Xia - MSFT · Accepted Answer · 2016-09-09T08:37:49.880

1

I need to add back key press event for windows phone without using winjs library?

The backpressed event should be attached to Windows.Phone.UI.Input.HardwareButtons but not Windows.UI.WebUI.WebUIApplication.

If you refer to HardwareButtons.BackPressed and HardwareButtons, you will find the backpressed event is used like this:

var hardwareButtons = Windows.Phone.UI.Input.HardwareButtons;
function onBackPressed(eventArgs) { /* Your code */ }

// addEventListener syntax
hardwareButtons.addEventListener("backpressed", onBackPressed);
hardwareButtons.removeEventListener("backpressed", onBackPressed);

And since you are not making a Single Page Application. This event should be attached on every new page's JS codes.

Update: If you want to know your current device programmatically, you can use the following if-statement:

if (deviceInfo.operatingSystem.toLowerCase() == "windowsphone")
{
     //do your windows phone logic
} else if (deviceInfo.operatingSystem.toLowerCase() == "windows")
{
     //do your windows logic
}

edited Sep 09 '16 at 08:37

answered Sep 09 '16 at 07:19

Elvis Xia - MSFT

10,801
1
13
24

In line `Windows.UI.WebUI.WebUIApplication` it shows **JavaScript runtime error: Unable to get property 'UI' of undefined or null reference** error when I run desktop app. So I need solution for that. It shows `WIndows.Phone` undefined. – Sonali Sep 09 '16 at 07:22
Is there any exit event for app? – Sonali Sep 09 '16 at 07:31
I can't reproduce the null error, maybe share a demo? There is no exit event for app. But everytime your app exit, it will suspend first then exit. So you can do your logic in suspend event. – Elvis Xia - MSFT Sep 09 '16 at 07:33
I cannot...but only thing I can tell is I am unable to access Windows.Phone namespace even intellitrace is also not showing it. – Sonali Sep 09 '16 at 08:13
Do i need to add reference for it in solution. – Sonali Sep 09 '16 at 08:15
When I run my universal app on phone it works fine but when I am running on desktop (same app) it shows this null reference error? – Sonali Sep 09 '16 at 08:21
Can I add something to main.js to detect whether app is opening in desktop or mobile? – Sonali Sep 09 '16 at 08:24
Thanks for help !! – Sonali Sep 09 '16 at 09:57

score 0 · Answer 2 · answered Sep 09 '16 at 09:56

I used this-

var flag = Windows.Foundation.Metadata.ApiInformation.isTypePresent("Windows.Phone.UI.Input.HardwareButtons");

    if (flag) {
        var hardwareButtons = Windows.Phone.UI.Input.HardwareButtons;
        hardwareButtons.addEventListener("backpressed", onBackPressed);
    }

It worked for me well!

How to add back button event in Universal Windows App without using WinjS Library?

2 Answers2

Linked