locked
[UWP][WINJS]goBack button for WinJS apps RRS feed

  • Question

  • Hello,

    i want to know how to make on title bar a Back button for each page using JS.

    If someone know, please share. I'm new with WinJS and Visual Studio, on develop my first application.

    Fox example like in this page with photo: http://i.stack.imgur.com/UKScx.png

    Thanks


    • Edited by Krunal Parekh Tuesday, January 5, 2016 5:42 AM subject
    Monday, January 4, 2016 1:01 AM

Answers

  • Hello oBass,

    You need to use SystemNavigationManager.AppViewBackButtonVisibility

    For example.

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
    	"use strict";
    
    	var app = WinJS.Application;
    	var activation = Windows.ApplicationModel.Activation;
    
    	app.onactivated = function (args) {
    		if (args.detail.kind === activation.ActivationKind.launch) {
    			if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    				// TODO: This application has been newly launched. Initialize your application here.
    			} else {
    				// TODO: This application was suspended and then terminated.
    				// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
    			}
    			args.setPromise(WinJS.UI.processAll().then(function () {
    				var currentview = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
    				currentview.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.visible;
    			}));
    		}
    	};
    
    	app.oncheckpoint = function (args) {
    		// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
    		// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
    		// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    	};
    
    	app.start();
    })();
    

    Hope this helps.

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Friday, January 8, 2016 8:22 AM
    • Marked as answer by Krunal Parekh Friday, January 15, 2016 2:06 AM
    Tuesday, January 5, 2016 5:41 AM
  • Hello oBass,

    For WinJs UWP Navigation you need to have the Navigator JavaScript copied from the Windows 8.1 Navigator template.

    Please see: Quickstart: Using single-page navigation (HTML)

    I have already provided the same solution here.

    Please see: https://social.msdn.microsoft.com/Forums/sqlserver/en-US/04666ae7-2c93-4321-8886-5741adfc562a/uwphtml-button-navigation-problems?forum=wpdevelop

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Friday, January 8, 2016 8:22 AM
    • Marked as answer by Krunal Parekh Friday, January 15, 2016 2:06 AM
    Friday, January 8, 2016 8:21 AM

All replies

  • Hi oBass:

    You may use

    window.history.back();

    The back() method loads the previous URL in the history list.

    This is the same as clicking the "Back button" in your browser, or history.go(-1).

    Note: This method will not work if the previous page does  not exist in the history list.

    Winjs has a method navigates the page back , you may use like this

    WinJS.Navigation.back(distance).done( /* Your success and error handlers */ );


    here is the official document about it , click this to have a look .



    • Edited by Xin_Zhang Monday, January 4, 2016 7:36 AM
    Monday, January 4, 2016 2:05 AM
  • Thanks, but where should i paste it?

    - On HTML Page under <script>?

    - On default.js page?

    Monday, January 4, 2016 8:11 PM
  • Hi oBass :

    Default.js is used to initial your app , you may define some method in it . Here is the official document about how to create a APP with Js . I think this is very helpful , click https://msdn.microsoft.com/library/windows/apps/mt280216.aspx . Here are some  official samples, click https://github.com/Microsoft/Windows-universal-samples .



    • Edited by Xin_Zhang Tuesday, January 5, 2016 2:05 AM
    Tuesday, January 5, 2016 1:58 AM
  • Thanks, but i find only Backbutton to VB and CS, not for JS app on https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/BackButton
    Tuesday, January 5, 2016 3:49 AM
  • Hello oBass,

    You need to use SystemNavigationManager.AppViewBackButtonVisibility

    For example.

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
    	"use strict";
    
    	var app = WinJS.Application;
    	var activation = Windows.ApplicationModel.Activation;
    
    	app.onactivated = function (args) {
    		if (args.detail.kind === activation.ActivationKind.launch) {
    			if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    				// TODO: This application has been newly launched. Initialize your application here.
    			} else {
    				// TODO: This application was suspended and then terminated.
    				// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
    			}
    			args.setPromise(WinJS.UI.processAll().then(function () {
    				var currentview = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
    				currentview.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.visible;
    			}));
    		}
    	};
    
    	app.oncheckpoint = function (args) {
    		// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
    		// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
    		// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    	};
    
    	app.start();
    })();
    

    Hope this helps.

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Friday, January 8, 2016 8:22 AM
    • Marked as answer by Krunal Parekh Friday, January 15, 2016 2:06 AM
    Tuesday, January 5, 2016 5:41 AM
  • Thanks for Reply's and help,

    i created a file connection.js in the JS folder, the connection.js file looks like your's code:

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize your application here.
                } else {
                    // TODO: This application was suspended and then terminated.
                    // To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
                }
                args.setPromise(WinJS.UI.processAll().then(function () {
                    var currentview = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
                    currentview.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.visible;
                }));
            }
        };
    
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
            // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
            // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
        };
    
        app.start();
    })();

    then on the default.html before </head> end i put this code:

    <script src="/js/connection.js"></script>

    and the same of every page for example Page1.html,Page2.html,Page3.html

    but at Home Page, i mean on default.html is showing the Back button, but there no history to go back, while i going for example to Page1.html,

    the Back button on Title bar is showing, but no working.

    I tried from examples something, but not working.

    Should i put after args.setPromise(WinJS.UI.processAll().then(function () { something like this? :

    WinJS.Navigation.back(-1).done( /* Your success and error handlers */ );

    Tuesday, January 5, 2016 5:00 PM
  • Hello oBass,

    For WinJs UWP Navigation you need to have the Navigator JavaScript copied from the Windows 8.1 Navigator template.

    Please see: Quickstart: Using single-page navigation (HTML)

    I have already provided the same solution here.

    Please see: https://social.msdn.microsoft.com/Forums/sqlserver/en-US/04666ae7-2c93-4321-8886-5741adfc562a/uwphtml-button-navigation-problems?forum=wpdevelop

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Friday, January 8, 2016 8:22 AM
    • Marked as answer by Krunal Parekh Friday, January 15, 2016 2:06 AM
    Friday, January 8, 2016 8:21 AM