function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SivaGSivaG 

Dynamic display of pageblocksections


My requirement is the below two pageblocksectionitems should be hidden by default when the page loads initially and in the backend they will flip the FEE field value(not displayed on the page) to 5.99 then these 2 pageblocksectionitems should be displayed conditionally(which I already handled).

I have added 2 pageblocksectionitems in a visualforce page. But I want to display those based on a field value. How can I accomplish this?

Code snippet -
<apex:pageBlockSectionItem id="emvQn">
                    <apex:outputPanel id="emvQSpan">
                        <apex:outputLabel style="color:red">*</apex:outputLabel>
                        <apex:outputLabel value="If you have a non-EMV"/><br/> 
                        <apex:outputLabel value="compliant card reader, would" /><br/>
                         <apex:outputLabel value="you like to purchase an"/><br/>
                         <apex:outputLabel value="EMV-compliant card reader:" />
                    </apex:outputPanel>
                    <apex:outputPanel id="emvQOSpan">
                        <apex:selectList Value="{!ReaderOption}" id="ReaderOptionsId" onchange="Readerdef('select');" size="1" style="width:250px" onkeypress="handleKeyPressSearch(event);">
                            <apex:selectOption itemValue="None" itemLabel="--None--" />
                            <apex:selectOption itemValue="Yes" itemLabel="Yes"/>                            
                            <apex:selectOption itemValue="No" itemLabel="No" />
                        </apex:selectList>                        
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
                
               <apex:pageBlockSectionItem id="emvOpn">                
                    <apex:outputPanel id="emvOpnSpan">
                      <apex:outputLabel style="color:red">*</apex:outputLabel>                        
                      <apex:outputLabel value="Reader Type:"/>
                    </apex:outputPanel>
                    <apex:outputPanel id="emvReadSpan">
                      <apex:selectList Value="{!NewSRSMPODLead.Reader_Type__c}" id="ReaderTypeId" size="1" style="width:250px" onkeypress="handleKeyPressSearch(event);">
                            <apex:selectOption itemValue="None" itemLabel="--None--" />
                            <apex:selectOption itemValue="EMV Card Reader" itemLabel="EMV"/>
                            <apex:selectOption itemValue="MSR Card Reader" itemLabel="MSR"/>                            
                            <apex:selectOption itemValue="Not Applicable" itemLabel="No thanks"/>
                      </apex:selectList>                                                
                   </apex:outputPanel>
                </apex:pageBlockSectionItem>

Thanks
Kumar
Best Answer chosen by SivaG
Pankaj_GanwaniPankaj_Ganwani
Hi,

Wrap both the pageblocksectionitems within <apex:outputPanel rendered = "{!IF(fieldName == value,true,false)}">.

Thanks,
Pankaj

All Answers

Dushyant SonwarDushyant Sonwar
Hello kumar,
just put a rendered condition
rendered="{!fieldname==value}"
 
Pankaj_GanwaniPankaj_Ganwani
Hi,

Wrap both the pageblocksectionitems within <apex:outputPanel rendered = "{!IF(fieldName == value,true,false)}">.

Thanks,
Pankaj
This was selected as the best answer
SivaGSivaG
Hi Pankaj/Dushyant,

Rendered is working fine. When the field values is true the  2 pageblocksections are displayed when the page loads initially. But I wantthose 2 pageblocksections should be displayed on a conditional basis as mentioned below.

I have a picklist field A (Question).If the answer to the question is Yes then 1st Pageblocksection should be displayed. If No then 2nd Pageblocksection should be displayed. Please help in accomplishing this.

Thanks
Kumar
Dushyant SonwarDushyant Sonwar
Hi Kumar,
create a function in controller
with a public boolean variable.
public showblock(){
if(your condition satissfies)
booleanvariable = true
}
else{
booleanvariable = false
}
amd call this function onchange of pciklist
rendered ="{!booleanvariable}" for first pageBlock
and
rendered ="{!not(booleanvariable)}" for second pageBlock
 
SivaGSivaG
Hi Dushyant,

I already have an existing function(given below) being called for onchange of picklist. Initially I have added the below condition to display the 1st pageblock and 2nd pageblock as highlighted below in the function. It was working fine. Then I added the below requirement and it became complex.

Requirement -
My requirement is the below two pageblocksectionitems should be hidden by default when the page loads initially and in the backend they will flip the FEE field value(not displayed on the page) to 5.99 then these 2 pageblocksectionitems should be displayed conditionally(which I already handled).

function checkYes(type){          
            var shipping = '{!shippingindicator}';
            var cardInd = '{!cardreaderfeeIndicator}';
            if(type == 'init' && shipping == 'false'){
                document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipoptionSpan}").style.display ="none";
                document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipspann}").style.display ="none";
            }
            else{               
                if(type == 'init' && shipping == 'true'){
                    document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipoptionSpan}").style.display ="block";
                    document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipspann}").style.display ="block";                 
                }
                else{
                    var chk = document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.cardreader.inputcardreader}");                    
                    if(type != 'init' && chk.value == 'No' && shipping == 'true'){
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipoptionSpan}").style.display ="block";
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipspann}").style.display ="block";
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.emvOpn.emvOpnSpan}").style.display ="block";
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.emvOpn.emvReadSpan}").style.display ="block";
                       
                    }
                    else if(type != 'init' && chk.value == '' && shipping == 'true'){
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipoptionSpan}").style.display ="block";
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipspann}").style.display ="block";
                       }                        
                    }
                    else{
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipoptionSpan}").style.display ="none";
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.shipoption.shipspann}").style.display ="none";
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.emvQn.emvQSpan}").style.display ="block";
                        document.getElementById("{!$Component.thePage.theform.thepageblck.thepageblkSec.emvQn.emvQOSpan}").style.display ="block"; 
                           
                }
            }                                                
        }
 
Dushyant SonwarDushyant Sonwar

Hello kumar,
Try to give use this.
<div id="firstblock">
</div>
<di id="secondblock">
</div>

and use javascript to hide same as you are trying wih Component
or check that this path $Component.thePage.theform.thepageblck.thepageblkSec.emvQn.emvQSpan is giving you an id or not that you want to hide

SivaGSivaG
Hi Dushyant,

I have added below condition to rendered and now the 2 pageblocksectionitems are getting displayed when the page loads initially. I don't want that 2 happen. I want to display the 2 pageblocksectionitems as per the below conditons.

rendered = "{!IF((cardreaderfeeIndicator == 'On'),true,false)} 

To display the 1st pageblocksectionitem the condition is cardreaderfeeIndicator == 'On' && Picklist A value is 'Yes'

To display the 1st pageblocksectionitem the condition is cardreaderfeeIndicator == 'On' && Picklist A value is 'No'

Let me know how can we accomplish this requriement.

Please give me your gmail id so that we can chat and resolve my issue as it is very urgent for me to complete this by tomorrow.

Thanks
Kumar
SivaGSivaG
Hi Naresh,

My mail id is sivais040@gmail.com. Please contact me asap.

Thanks
Kumar