Apex Component rendering pageblock on other component

Can we have one component have pageblock section on other component to be rendered

ie. for eg. i have 2 components in a page..

1st with all links — Account,Contact
2nd with all page block section — Account section, contact section

If user clicks on Account link … only account section from 2nd component should be rendered
If user clicks on Contact link … only account section from 2nd component should be rendered

This is what i have tried so far

Component code:-

<apex:component ><apex:commandLink value="" reRender="opCustomerDetails">CUSTOMER DETAILS</apex:commandLink><br/><apex:commandLink value="" reRender="opContactDetails">CONTACT DETAILS</apex:commandLink><br/></apex:component>

Page code:-

<apex:page extensions="TestPageClass" standardController="Application__c" ><table width="100%" class="mainContentTable"><tr><td width="50%" ><c:OAOASubmissionForms /></td><td width="50%" ><apex:outputPanel id="opCustomerDetails"><apex:pageBlock id="pbCustomerDetails"><apex:outputLabel value="Legal Name of Customer(in English)" /><apex:inputField value="{!account.Name}"/></apex:pageBlock></apex:outputPanel><apex:outputPanel id="opContactDetails">
<apex:pageBlock id="pbContactdetails">
<apex:pageBlockSection columns="1" id="pbAddr1" title="Address1">
    <apex:inputField value="{!applicationaddress1.Contact_Person__c}"/>
    <apex:inputField value="{!applicationaddress1.Contact_Person_Title__c}"/>
    <apex:inputField value="{!applicationaddress1.Address__c}"/>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1" id="pbAddr2" title="Address2">
    <apex:inputField value="{!applicationaddress2.Contact_Person__c}"/>
    <apex:inputField value="{!applicationaddress2.Contact_Person_Title__c}"/>
    <apex:inputField value="{!applicationaddress2.Address__c}"/>
</apex:pageBlockSection>
</apex:pageBlock></apex:outputPanel></td></tr></table></apex:page>

TestPageclass Code

public with sharing class TestPageClass{
public string applicationId {get;set;}

public Account account{get;set;}
public Application__c application{get; set;}
public Application_Address__c applicationaddress1{get;set;}
public Application_Address__c applicationaddress2{get;set;}


public TestPageClass(ApexPages.StandardController stdCtrl) 
{
    this.application=(Application__c)stdCtrl.getRecord();

    account=[   SELECT Id,Name                            
                FROM Account                             
                WHERE Id= '01Ii0000000tP5Y'];
    if(application != null && application.Id != null)
    {        
        this.application = [SELECT Id, Name, Accept_T_C__c
                    FROM Application__c
                    WHERE Id = : application.Id];

        this.applicationaddress1 =[SELECT Type__c, Name, Contact_Person__c, Contact_Person_Title__c,Application__c, Address__c 
                                    From Application_Address__c
                                    WHERE Application__c = : this.application.id
                                    AND Type__c = 'Address1' LIMIT 1]; 

        this.applicationaddress2 =[SELECT Type__c, Name, Contact_Person__c, Contact_Person_Title__c,Application__c, Address__c 
                                    From Application_Address__c
                                    WHERE Application__c = : this.application.id
                                    AND Type__c = 'Address2' LIMIT 1];
    }
}

}

I want to show the customer output panel when customer Details in component is clicked.
Over here i have just used 1 component and rest all details are in the page.

Answer

I am not quite sure about your requirement but you can do this by <apex:commandlink>

e.g:

    <apex:commandlink value="Render Account Section" rerender="accountSectionId" action="{!doSomething}"/>
    <apex:commandlink value="Render contact Section" rerender="contactSectionId" action="{!doSomething}"/>

<!-- component -->
    <apex:pageblock>
      <apex:outputPanel id="accountSectionId">

         <!-- Account components -->

      </apex:outputpanel>

      <apex:outputPanel id="contactSectionId">

        <!-- contact components -->

      </apex:outputpanel>
    </apex:pageblock>

Attribution
Source : Link , Question Author : TestNS , Answer Author : Ashwani

Leave a Comment