How to update Beans or Scoped Variables when transitioning in XPages Mobile Controls

Question

I'm having a problem trying to set values on a mobile page before transition into that page.

I have a scriptblock based on Tony McGuckin's OpenNTF XSnippet. http://openntf.org/XSnippets.nsf/snippet.xsp?id=calling-server-side-jscode-during-mobile-page-transitions

So when I transition to a page with the ID of "appPage3" I call the method "facilityCheckIn" if the JSON-RPC service.

I'm trying to set the value in a viewScoped managed bean and for testing am trying to set a normal viewScope variable.

As best as I can tell the Mobile Page is not picking up the changes. It's not showing the viewScope at all. I'm not sure what's up with that. I believe the managed bean is getting it's value but it's like the page is getting rendered first. The value on the Mobile page is blank the first time and then if I either refresh, or exit and go back to the page it does display. I tried accessing the bean via SSJS and EL.

I really need to be able to set values for mobile pages as I transition into and out of a page.

Any advice would be appreciated.

Thanks!!

I've updated the code below to show the complete Mobile Page. I've not included anything for the custom control that should be displaying the fields but can if necessary.

I've created a 6ish minute video demonstrating the problem and that also shows all the relevant code.

http://traffic.libsyn.com/notesin9/SO-Question.mp4

Thanks!!!

<xp:this.resources>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css"></xp:styleSheet>
    <xp:styleSheet href="/mobile.css"></xp:styleSheet>
</xp:this.resources>
<xc:ccDebugToolbar defaultCollapsed="false"
    collapseTo="left"></xc:ccDebugToolbar>
<xe:singlePageApp id="singlePageApp1"
    selectedPageName="home">
    <xe:djxmHeading id="djxmHeading1" label="My Inventory"></xe:djxmHeading>


    <xe:appPage id="homeID" pageName="home">
        <xe:djxmHeading id="djxmHeading2" label="My Inventory">
        </xe:djxmHeading>

        <xc:mob_menu_home></xc:mob_menu_home>
    </xe:appPage>

    <xe:appPage id="appPage2" pageName="facility" resetContent="true">
        <xc:mob_menu_facility></xc:mob_menu_facility>
    </xe:appPage>

    <xe:appPage id="appPage8" pageName="show" resetContent="true">
        <xc:mob_menu_show></xc:mob_menu_show>
    </xe:appPage>


    <xe:appPage id="appPage3" pageName="facilityCheckIn"
        resetContent="true">
        <xc:mob_page_CheckInOut header="Check In at Facility"
            scanType="Receiving" scanLocation="Facility">
        </xc:mob_page_CheckInOut>
    </xe:appPage>

    <xe:appPage id="appPage5" pageName="facilityCheckOut"
        resetContent="true">
        <xc:mob_page_CheckInOut header="Check Out from Facility"
            scanType="Shipping" scanLocation="Facility">
        </xc:mob_page_CheckInOut>
    </xe:appPage>

    <xe:appPage id="appPage6" pageName="showCheckOut"
        resetContent="true">
        <xc:mob_page_CheckInOut header="Check Out from Show"
            scanType="Shipping" scanLocation="Show">
        </xc:mob_page_CheckInOut>
    </xe:appPage>

    <xe:appPage id="appPage7" pageName="showCheckIn"
        resetContent="true">
        <xc:mob_page_CheckInOut header="Check In at Show"
            scanType="Receiving" scanLocation="Show">
        </xc:mob_page_CheckInOut>
    </xe:appPage>


    <!-- SUB PAGES -->

    <!--  GET MANIFEST Page -->
    <xe:appPage id="appPage4" pageName="manifest" resetContent="true">
        <xc:mob_page_Manifest></xc:mob_page_Manifest>
    </xe:appPage>


</xe:singlePageApp>


<xe:jsonRpcService id="jsonRpcService1" serviceName="appService">
    <xe:this.methods>

        <xe:remoteMethod name="setCurrentPage">
            <xe:this.arguments>
                <xe:remoteMethodArg name="pageName"></xe:remoteMethodArg>
                <xe:remoteMethodArg name="direction"></xe:remoteMethodArg>
            </xe:this.arguments>
            <xe:this.script><![CDATA[print("PageName " + pageName);
            print("Direction " + direction);
            viewScope.put("vsPage", "test");
App.setCurrentPage(pageName);
App.setCurrentDirection(direction);
return "";]]></xe:this.script>
        </xe:remoteMethod>
    </xe:this.methods>
</xe:jsonRpcService>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
        XSP.addOnLoad(function(){
            // Begin App Page 1
            var newPage = dijit.byId("#{id:appPage3}");

            if(null != newPage){
                dojo.connect(newPage, "onBeforeTransitionIn", function(){
                    var deferred = appService.setCurrentPage("facilityCheckIn", "onBeforeTransitionIn");
                    deferred.addCallback(function(result) {
                        console.log(result);
                    });
                });
                dojo.connect(newPage, "onBeforeTransitionOut", function(){
                    var deferred = appService.setCurrentPage("facilityCheckIn", "onBeforeTransitionOut");
                    deferred.addCallback(function(result) {
                        console.log(result);
                    });
                });
                dojo.connect(newPage, "onAfterTransitionIn", function(){
                    var deferred = appService.setCurrentPage("facilityCheckIn", "onAfterTransitionIn");
                    deferred.addCallback(function(result) {
                        console.log(result);
                    });
                });
                dojo.connect(newPage, "onAfterTransitionOut", function(){
                    var deferred =appService.setCurrentPage("facilityCheckIn", "onAfterTransitionOut");
                    deferred.addCallback(function(result) {
                        console.log(result);
                    });
                });
            }
            // End App Page 1

            // Begin Home Page

            var newPage = dijit.byId("#{id:homeID}");

            if(null != newPage){
                //console.log("Inside home Page")
                dojo.connect(newPage, "onBeforeTransitionIn", function(){
                    var deferred = appService.homePageReset();
                    deferred.addCallback(function(result) {
                        console.log(result);
                    });
                });
                dojo.connect(newPage, "onBeforeTransitionOut", function(){
                    var deferred = appService.homePageReset();
                    deferred.addCallback(function(result) {
                        console.log(result);
                    });
                }); 
            }
            // END Home Page

        // Insert new Code ABOVE THIS LINE
        }); // This ends the block that holds all the functions
    ]]></xp:this.value>
</xp:scriptBlock>

I don't see your call in the above code? So taking a guess: the RPC Call is async, so the transition to the new page has happened before the results come back. AND the page transitioned too doesn't anyway talk to the server. My understanding is that this is the whole point of single page apps: minimize traffic from/to the server — stwissel, Mar 27 '13 at 02:11
What are you attempting to accomplish here? Or, rather, how would an end user describe the behavior if it worked? JSON-RPC + dojo.connect is your "How"... what's your "What?" :) — Tim Tripcony, Mar 27 '13 at 02:31
Tim - The goal is to setup a virtual page on transition into it. So if I go to into the page setup a bean or scoped variables so the page that's opening - using resetContent = true - can use any of the settings. For instance the back button - I'd like to compute that to go to the first page - which might change. Just one example. I'd like to compute a lot. — David Leedy, Mar 27 '13 at 18:49

score 0 · Answer 1 · answered Mar 28 '13 at 12:22

I was faced with a similar problem some time ago and I had to create another XPage (with a SingleApplication) to navigate to instead of just jumping to an appPage within the same SingleApplication.

Not ideal, however, it also solved another issue for me since I wanted to be able to jump directly to the page in question (using a QR code).. ;-)

/John

PS. Will follow your findings here to see if it can be done. This kind of issues with the mobile controls (I had some with typeahead as well) sort of pushed me in direction of other frameworks, for now, anyway...

score 0 · Answer 2 · answered Apr 04 '13 at 01:27

David.... You said that doing a refresh did correct the issue, also Stephan mentioned that the transition to the new page happens before the result comes back from the RPC which I think is correct. So in your callback, while not optimal but may at least get you moving forward, you could fire off a partial refresh by using:

XSP.partialRefreshGet("#{id:appPage3}",{});
//I've had partial success with the "#{id:appPage3}" call, so I usually use a full
// dojo query like:
var appPageId = dojo.query("[id$='appPage3']")[0].id

I don't know if that will correct your issue, but it appears everything is working as it should with the exception of that value being populated.

Keith - Great idea - but I couldn't get this to work. The navigation broke. — David Leedy, Apr 05 '13 at 23:15

score 0 · Accepted Answer · answered Apr 05 '13 at 23:19

0

Ok I believe I have this solved. I had no luck using the RPC control stuff from Tony's XSnippet. That works of you're leaving the page but not if your entering. This seems to work as desired.

To deal with entering you need to put your code in the Rendering event of the header.

answered Apr 05 '13 at 23:19

David Leedy

3,583
18
38

Note. The rendering event will only fire if the appPage content is being reset. – Peter Presnell Apr 12 '13 at 16:59

How to update Beans or Scoped Variables when transitioning in XPages Mobile Controls

3 Answers3