Activity Forums Salesforce® Discussions Can we hide particular portion of Visualpage on click of button using render and reRender?

  • madhulika shah

    Member
    September 5, 2018 at 9:58 am

    Hi Anurag,

    Yes, you can hide particular portion of visualforce page on click of button using render and reRender. Please check the code below:

    <apex:page controller="aaa">
    <apex:form >
    <apex:pageBlock >

    <apex:actionFunction name="RenderSection" action="{!RenderSec}"/>

    <apex:pageBlockSection>
    <apex:selectList multiselect="false" size="1" onChange="RenderSection() ;" value="{!SelectedVal}">
    <apex:selectOption itemLabel="--None--" itemValue=""/>
    <apex:selectOptions value="{!myList}"/>
    </apex:selectList>
    </apex:pageBlockSection>

    <apex:pageBlockSection rendered="{!showAccount}">
    <apex:outputLabel value="This Section will show account fields"/>
    </apex:pageBlockSection>

    <apex:pageBlockSection rendered="{!showContact}">
    <apex:outputLabel value="This section will show contact fields"/>
    </apex:pageBlockSection>

    </apex:pageBlock>
    </apex:form>
    </apex:page>

    Hope this helps.

  • Parul

    Member
    September 5, 2018 at 11:05 am

    Hi Anurag,

    You can use this as refrence:

    <apex:page controller="FetchContactvsACC_usingButton">
    <apex:form>
    <apex:pageBlock>
    <apex:pageBlockSection >

    <apex:commandButton action="{!showSection1}" value='Yes' styleClass='btn' rerender='details'></apex:commandButton>
    <apex:commandButton action="{!showSection2}" value='No' styleClass='btn'></apex:commandButton>
    </apex:pageBlockSection>
    <apex:outputPanel id='details'>
    <apex:pageBlockSection id ='newData' title='Discount Rates' rendered='{!hideshow}'>
    Enter Proposal range
    </apex:pageBlockSection>

    </apex:outputPanel>

    </apex:pageBlock>
    </apex:form>
    </apex:page>

    Apex class:

    public class FetchContactvsACC_usingButton
    {

    Boolean testval = false;
    public pagereference showSection1() {
    setHideshow(true);
    return null; }

    public pagereference ShowSection2()
    {
    setHideshow(false);
    return null;
    }

    public Boolean getHideshow()
    {
    return this.testval;
    }
    public void setHideshow(boolean s)
    {
    this.testval = s;
    }
    }

     

    Hope this will help you.

    Thanks.

  • Parul

    Member
    September 5, 2018 at 11:06 am

    Hi Anurag,

    You can use this as refrence:

    <apex:page controller="FetchContactvsACC_usingButton">
    <apex:form>
    <apex:pageBlock>
    <apex:pageBlockSection >

    <apex:commandButton action="{!showSection1}" value='Yes' styleClass='btn' rerender='details'></apex:commandButton>
    <apex:commandButton action="{!showSection2}" value='No' styleClass='btn'></apex:commandButton>
    </apex:pageBlockSection>
    <apex:outputPanel id='details'>
    <apex:pageBlockSection id ='newData' title='Discount Rates' rendered='{!hideshow}'>
    Enter Proposal range
    </apex:pageBlockSection>

    </apex:outputPanel>

    </apex:pageBlock>
    </apex:form>
    </apex:page>

     

    Apex class:

    public class FetchContactvsACC_usingButton
    {

    Boolean testval = false;
    public pagereference showSection1() {
    setHideshow(true);
    return null; }

    public pagereference ShowSection2()
    {
    setHideshow(false);
    return null;
    }

    public Boolean getHideshow()
    {
    return this.testval;
    }
    public void setHideshow(boolean s)
    {
    this.testval = s;
    }
    }

     

    Hope this will help you.

    Thanks.

  • shariq

    Member
    September 15, 2018 at 10:19 am

    Hi,

    Yes you can for more understanding -

    This could be as simple as setting a boolean property in your controller from the action method that the button invokes.  That would allow you to conditionally render the second page block.

     

    If you are looking to just change that part of the page, you'll need to rerender an outer container, as you can't rerender something that wasn't there in the first place.

    Hope this helps.

  • shariq

    Member
    September 15, 2018 at 10:20 am

    Hi,

    Yes you can for more understanding –

    This could be as simple as setting a boolean property in your controller from the action method that the button invokes.  That would allow you to conditionally render the second page block.

     

    If you are looking to just change that part of the page, you’ll need to rerender an outer container, as you can’t rerender something that wasn’t there in the first place.

    Hope this helps.

Log In to reply.

Popular Salesforce Blogs