Conditional Partial refresh

Question

This is a followup to a previous posting. I was able to isolate it down to as simple a case as I can. In an application that I am working on I want to do a conditional partial refresh based on the value of an applicationScope variable that might change while the user has the document open. I can not get it to work because it appears that the partialRefresh target is only evaluated on the pageLoad event not dynamically when the partialRefresh is called. To demonstrate this I created a little test XPage that toggles a viewScope variable between True and False with no update. Then a button that has a partialRefresh formula that specifies whether to refresh panelTrue or panelFalse. By default when the document is first opened it refeshes and displays panelFalse because vsIsTrue is null and interpreted as False. If I toggle vsISTrue to True then click the Partial refresh button you will see that the panelFalse is the panel that is refreshed, never the panelTrue. I put comments in the formula for the partial refresh and the partial refresh formula executes with every refresh and returns the correct process, however it never changes the panel to be actually refreshed to panelTrue.

So I gues my question is - is there a different way to accomplish? Because I can't see how. I have included the source below - note I have used the debug tool bar so you might need to remove the dbBar references.:

<?xml version="1.0" encoding="UTF-8"?>

    <xp:view xmlns:xp="http://www.ibm.com/xsp/core"
        xmlns:xc="http://www.ibm.com/xsp/custom">
        <xc:ccDebugToolbar defaultCollapsed="false" collapseTo="left"></xc:ccDebugToolbar>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:button id="SetViewScope" value="Toggle View Scope">
            <xp:eventHandler event="onclick" submit="true" refreshMode="norefresh">
                <xp:this.action><![CDATA[#{javascript:(viewScope.get("vsIsTrue")) ? viewScope.put("vsIsTrue",false) : viewScope.put("vsIsTrue",true)}]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>
        <xp:button value="Partial Refresh" id="PartialRefresh">
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
                refreshId='#{javascript:if (viewScope.get("vsIsTrue")){
        dBar.info("Refesh panelTrue");
         return "panelTrue";
         break;
    }else {
        dBar.info("Refresh panelFalse");
        return "panelFalse";
        break;
     }}'>
            </xp:eventHandler>
        </xp:button>
        <xp:panel id="panelTrue">
            This is panelTrue - viewScope(vsIsTrue) =
            <xp:text escape="true" id="computedField1" value="#{viewScope.vsIsTrue}"></xp:text>
        </xp:panel>
        <xp:panel id="panelFalse">
            This is panelFalse - viewScope(vsIsTrue;) =
            <xp:text escape="true" id="computedField2" value="#{viewScope.vsIsTrue}"></xp:text>
        </xp:panel>
    </xp:view>

Answer 1

To do this you have to update the data in the client. If you change the code of the button, the problem should be solved:

<xp:button id="SetViewScope" value="Toggle View Scope">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="PartialRefresh">
        <xp:this.action>
            <![CDATA[#{javascript:(viewScope.get("vsIsTrue")) ?  viewScope.put("vsIsTrue",false) : viewScope.put("vsIsTrue",true)}]]>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

As you can see, the Event Handler updates now the button with the id PartialRefresh (the refreshMode is set to partial). When clicking Toggle View Scope, the CSJS DOM element is reloaded with the latest code. Next time you click the button and trigger a partial refresh, client sends the correct id to the server.

EDIT:

Another way is to do the same trick with a CSJS script block:

<xp:div id="refreshMe">
    <xp:scriptBlock id="scriptBlockRefresh">
        <xp:this.value>
            <![CDATA[
                var idPanelTrue = '#{id:panelTrue}';
                var idPanelFalse = '#{id:panelFalse}';
                var vsIsTrue = #{javascript:viewScope.get('vsIsTrue')};
                XSP.allowSubmit();
                var id = vsIsTrue?idPanelTrue:idPanelFalse;
                XSP.partialRefreshPost(id,{});
            ]]>
        </xp:this.value>
    </xp:scriptBlock>
</xp:div>

Instead of refreshing the element, you are refreshing the CSJS sciptblock which then updates the correct XPage element. In this case, the Partial Refresh button has to look like this:

<xp:button value="Partial Refresh" id="PartialRefresh">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
        refreshId='refreshMe'>
    </xp:eventHandler>
</xp:button>