Use android back button on device to return to main view in Framework7 app?

F

6

11

I have recently built an app using framework7 and cordova. My app consists of a single html file which has all the views in it. To navigate between the views, a back button is present at the top on each child view.

If a person presses the back button on the device, the app will be closed.

How can I use the back button to get to the main page when I'm in the child pages?

I have read the router API on the framework7 website but it is really confusing and does not seem to work. Here is what I'm trying:

<html>
  <head>...</head>
  <body>
    ...
    <!-- Views -->
    <div class="views">
      <!-- View -->
      <div class="view view-main">
        <!-- Pages -->
        <div class="pages">
          <!-- Home page -->
          <div class="page" data-page="index">
            <div class="page-content">
              <p>Home page</p>
            </div>
          </div>

          <!-- About page -->
          <div class="page cached" data-page="about">
            <div class="page-content">
              <p>About page</p>
            </div>
          </div>

          <!-- Services page -->
          <div class="page cached" data-page="services">
            <div class="page-content">
              <p>Services page</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    ...
  </body>
</html>

// Initialize App  
var myApp = new Framework7();

// Initialize View          
var mainView = myApp.addView('.view-main')          

// Load about page:
mainView.router.load({pageName: 'about'});

Please note that I want to use the physical button found on the device to navigate to the main view when I'm in another div.

Please help.

Falito answered 2/6, 2016 at 12:36 Comment(0)

P

8

If you just want to navigate to back pages,Use pushState : true in app initialization,You will be able to go back using hardware back button in framework7. If you want to open a specific page,mainView.router.load is a function in framework7. You can put a validation on router to check if page is your mainView page.By doing that you can control exiting app.when back page loads it calls the router and router gives you details about page ie: page.name,page.query. Hope this helps

Peadar answered 4/6, 2016 at 6:37 Comment(0)

E

9

Hello fellow developers,

I know everyone is so annoyed with the Android hardware back button issue in framework7, and finding a solution is also very tedious as I have struggled myself. So here I have code snippet which will help you manage all hardware back button issue (popup, modals, popovers, side panel and app exit) on android devices. please go through the code and drop query if any confusion.

Device Ready Function

function onDeviceReady() {
    document.addEventListener('backbutton', onBackKeyDown, false);
}

function onBackKeyDown() {
    var cpage = mainView.activePage;
    var cpagename = cpage.name;
    console.log(cpagename);
    if (($$('#leftpanel').hasClass('active')) || ($$('#rightpanel').hasClass('active'))) { // #leftpanel and #rightpanel are id of both panels.
        myApp.closePanel();
        return false;
    } else if ($$('.modal-in').length > 0) {
        myApp.closeModal();
        return false;
    } else if (cpagename == 'index') {
        myApp.confirm('Are you sure you want to exit?', function() {
            // var deviceType = device.platform;
            // if(deviceType == “Android” || deviceType == “android”){
            navigator.app.exitApp();
            // }
        },
        function() {
        });
    } else {
        mainView.router.back();
    }
}

Exactitude answered 6/10, 2017 at 7:2 Comment(0)

P

8

If you just want to navigate to back pages,Use pushState : true in app initialization,You will be able to go back using hardware back button in framework7. If you want to open a specific page,mainView.router.load is a function in framework7. You can put a validation on router to check if page is your mainView page.By doing that you can control exiting app.when back page loads it calls the router and router gives you details about page ie: page.name,page.query. Hope this helps

Peadar answered 4/6, 2016 at 6:37 Comment(0)

M

4

To navigate back, go to Step 1. my-app.js step2. Paste the following:

// Initialize your app
var myApp = new Framework7({pushState: true,});

Run your app again. Hope this helps

Mandola answered 4/9, 2017 at 20:17 Comment(0)

W

2

Put below code in on Device ready function

document.addEventListener("backbutton", yourCallbackFunction, false);

create below function

function yourCallbackFunction(){
 alert(window.location);
 }

you can do anything if you get that event once. you can navigate using different page Id's to different view.

Wales answered 2/6, 2016 at 12:43 Comment(0)

R

2

Thanks to @sjkushwaha21, I have modified code for Framework7 V2. Used in methods of Framework7 object it is called by

onDeviceReady: function() {
    document.addEventListener("backbutton", myApp.methods.onBackKeyDown, false);
},

... and here is the method:

var myApp = new Framework7({
    ....,
    methods: {
        onBackKeyDown: function() {
            var leftp = myApp.panel.left && myApp.panel.left.opened;
            var rightp = myApp.panel.right && myApp.panel.right.opened;
            if ( leftp || rightp ) {
                myApp.panel.close();
                return false;
            } else if ($$('.modal-in').length > 0) {
                myApp.dialog.close();
                return false;
            } else if (myApp.views.main.router.url == '/') {
                myApp.dialog.confirm('Are you sure you want to exit?', 'Exit MyApp', function() {
                    navigator.app.exitApp();
                },
                function() {
                });
            } else {
                mainView.router.back();
            }

        }, ...

Respectable answered 28/3, 2018 at 14:49 Comment(0)

I

0

this is work. :)

open kitchen-sink.js put code
var myApp = new Framework7({ pushState: true, });

Isologous answered 22/1, 2018 at 13:58 Comment(1)

Could you please explain and provide relevant details to support your answer. An JS Fiddle probably. – Kohinoor 22/1, 2018 at 14:5

Recommended topics

Hot tags