Software Archive
Read-only legacy content

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

Youssef_A_
Beginner
280 Views

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.

 

0 Kudos
1 Solution
Chris_P_Intel
Employee
280 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
281 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

0 Kudos
Youssef_A_
Beginner
280 Views

That's a good one thank you Chris.

0 Kudos
Reply