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

[Youssef_A_]

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.

[Chris_P_Intel · Accepted solution]

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

[Youssef_A_]

That's a good one thank you Chris.