Hide When on Partial Update?

Question

I am wanting to know if there is a way to hide a View inside of a Panel until the partial update is executed?

Basically, I have a View inside of a Panel on my custom control, and the panel is set on partial update. The Partial Update element/ID is button 4, which is the blue button on my screen shot. After clicking that button, I would like to display the view that is inside the panel below.

Answer 1

So you mean, the viewPanel should be hidden and only become visible after the button has been clicked?

In that case you could probably try to bind the viewPanel's rendered property to a requestScope variable, which you set through the button's code:

a. pre-set the scope-var ("showContainer") to false , eg through beforePageLoad event
b. the elements to be hidden/shown are inside another panel (id="outerContainer")
c. the inner panel (id="innerContainer") has its rendered property bound to the scope var, so initially it is not rendered
d. button sets the var to true and performs a partial refresh on outerContainer >> id.innerContainer is rendered now

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.beforePageLoad><![CDATA[#{javascript:requestScope.put("showContainer", false)}]]></xp:this.beforePageLoad>
    <xp:button
        value="Do something"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="outerContainer">
            <xp:this.action><![CDATA[#{javascript:requestScope.put("showContainer", true)}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:panel id="outerContainer">
        <xp:panel id="innerContainer">
            <xp:this.rendered><![CDATA[#{javascript:requestScope.get("showContainer")}]]></xp:this.rendered>
            <xp:label
                value="something inside the container"
                id="label1">
            </xp:label>
        </xp:panel>
    </xp:panel>
</xp:view>

requestScope might not be the right object for your usecase...

Your button code also could set the scope var based on some additional logic; it did something like that once on a full text search: the result panel including the list of resulting docs would only be shown if there were any hits at all; if nothing was found an according message would be dsiplayed (ie rendered) instead.