Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Youssef_A_
Beginner
46 Views

Add software back button in app designer intel xdk at the top

Jump to solution

I have 2 pages in my index.html in XDK. I navigate from one to the other. I want to add a back button just like the templates but it's not possible.

This is my html:

   <div class="upage vertical-col left" id="mainpage">
        <div id="SubPage" class="upage-content vertical-col left ">
            <div class="tarea widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" name="uib_w_1">
                <div class="widget-container left-receptacle"></div>
                <div class="widget-container right-receptacle"></div>
                <div class="text-container">
                    <p>This is the main page</p>
                </div>
            </div>
            <button class="btn widget uib_w_2 d-margins btn-default" data-uib="twitter%20bootstrap/button" data-ver="1" id="buttonSubPage">Go to sub page</button>
        </div>
        <div id="SubPage2" class="upage-content vertical-col left hidden"><span class="widget uib_w_3 d-margins badge" data-uib="twitter%20bootstrap/badge_and_label" data-ver="1">This is subfile 2</span>
        </div>
    </div>

I want to add the back button to "SubPage2". How can I achieve this? I'm working with a blank template in the app designer.

 

Tags (2)
0 Kudos

Accepted Solutions
Chris_P_Intel
Employee
46 Views

Short Answer:

Make a button, using the Interactivity pane, add a Custom Script to that button, and then call 

window.history.back()

 

If you want to understant more,  look at xdk/ad/bs_subpage.js  you will see a script that supports moving between pages and sub-pages, pushes entries onto the window history, as well as registers an "onpopstate" handler that is called when the "Back" button in the browser is clicked.

Hope this helps,

Chris

View solution in original post

0 Kudos
2 Replies
Chris_P_Intel
Employee
47 Views

Short Answer:

Make a button, using the Interactivity pane, add a Custom Script to that button, and then call 

window.history.back()

 

If you want to understant more,  look at xdk/ad/bs_subpage.js  you will see a script that supports moving between pages and sub-pages, pushes entries onto the window history, as well as registers an "onpopstate" handler that is called when the "Back" button in the browser is clicked.

Hope this helps,

Chris

View solution in original post

0 Kudos
Youssef_A_
Beginner
46 Views

That's a good one thank you Chris.

0 Kudos