function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Justin MitchellJustin Mitchell 

How do I hide/show a Visualforce page upon clicking a button?

I am trying to teach myself Apex, so I've come up with a project to create and am figuring it out step-by-stumbling-step. Here is the step I am stuck on.

Here is my goal: I want a page that shows you a list of records in a table. When you click the name of one of the records, the whole list disappears and you see a page showing information from that record.

Here's my code so far which is not working. It's a page which loads the two separate pages, and decides which one to render based on whether a certain variable (the selected record id) is null or not.

Controller: 
public class testController {
    public id gameId{get; set;}
    
    public List<Game__c> getGames() {
    	List<Game__c> results = Database.query(
        	'SELECT id,name,owner.name,LastModifiedDate FROM game__c'
        );
        return results;
    }
}

Page 1: 
<apex:page showheader="true" controller="testController">
    <apex:include pageName="listPage" rendered="{! ISNULL( gameId ) }"/>
    <apex:include pageName="detailPage" rendered="{! NOT( ISBLANK( gameId )) }"/>
</apex:page>
listPage: 
<apex:page showHeader="false" controller="testController" id="display">

        <apex:form >
            <apex:pageblock >
                <apex:pageblocktable value="{! games}" var="g">                   
                    
                    <apex:column headerValue="Name">
                        <apex:commandLink value="{!g.Name}" rerender="display" >
                            <apex:param assignTo="{!gameId}" name="{!g.Id}" value="{!g.Id}"/>
                        </apex:commandLink>
                    </apex:column>

                </apex:pageblocktable>
           </apex:pageblock>
       </apex:form>
</apex:page>

detailPage: 
<apex:page showHeader="false" controller="testController">    
    <apex:outputtext value="test" />
</apex:page>
Expected behavior: I click the the name of the any of the Game records in the list on the listPage and the whole list disappears and is replaced with a blank white screen and the word "test".
Actual results: Clicking the name does nothing.

Am I on the right track trying to do this with three separate pages? Or should this all be handled in one visualforce page?
Best Answer chosen by Justin Mitchell
Rohit B ☁Rohit B ☁
Hi Justin,

Here is your code  
<apex:page showHeader="false" controller="testController" id="display">

        <apex:form >
            <apex:pageblock >
                <apex:pageblocktable value="{! games}" var="g">                   
                    
                    <apex:column headerValue="Name">
                        <apex:commandLink value="{!g.Name}" rerender="display" >
                            <apex:param assignTo="{!gameId}" name="{!g.Id}" value="{!g.Id}"/>
                        </apex:commandLink>
                    </apex:column>

                </apex:pageblocktable>
           </apex:pageblock>
       </apex:form>
</apex:page>
Just remove this attribute from your commane link :- 
rerender="display"

It will work properly..

If you need explaination why it is behaving like this, please let me know.
Happy to Help :)

All Answers

Vinuthh SVinuthh S
Hi Justin

Create one visualforce page and controller use Rendered in the output panel, declare all the pageblocktable inside one output panel and record detail in the another page.when you click that name of the record call a method from controller and true and false that output panels.

Thanks
Vinuthh S
Rohit B ☁Rohit B ☁
Hi Justin,

Here is your code  
<apex:page showHeader="false" controller="testController" id="display">

        <apex:form >
            <apex:pageblock >
                <apex:pageblocktable value="{! games}" var="g">                   
                    
                    <apex:column headerValue="Name">
                        <apex:commandLink value="{!g.Name}" rerender="display" >
                            <apex:param assignTo="{!gameId}" name="{!g.Id}" value="{!g.Id}"/>
                        </apex:commandLink>
                    </apex:column>

                </apex:pageblocktable>
           </apex:pageblock>
       </apex:form>
</apex:page>
Just remove this attribute from your commane link :- 
rerender="display"

It will work properly..

If you need explaination why it is behaving like this, please let me know.
Happy to Help :)
This was selected as the best answer
LBKLBK
Here is a simple VF and APEX controller which has both list and detail section in one page.

It displays the Detail section, if you click on one of the links in the list.

APEX Controller 
public with sharing class testListDetail {
public String gameId {get; set;}
public List<Test__c> games {get; set;}
public Test__c game {get; set;}

    public testListDetail(ApexPages.StandardController controller) {
        games = [SELECT Id, Name FROM Test__c];   
    }
    public PageReference fetchDetail(){
        if (gameId != null){
            game = [SELECT Id, Name, Number__c, Product_Support__c FROM Test__c WHERE Id = :gameId];
        }           
        PageReference pageRef = new PageReference('/apex/TestListDetail');
        return pageRef;
    }

}
VF Page (Page Name: TestListDetail) 
<apex:page standardController="Test__c" extensions="testListDetail" >
  <apex:form >
      <apex:pageBlock >
          <apex:pageblockSection title="My Games" >
              <apex:pageblockTable value="{!games}" var="g">
                  <apex:column headerValue="Name">
                    <apex:commandLink value="{!g.Name}" action="{!fetchDetail}"  >
                        <apex:param assignTo="{!gameId}" name="{!g.Id}" value="{!g.Id}"/>
                    </apex:commandLink>
                  </apex:column>
              </apex:pageblockTable>
          </apex:pageblockSection>
          <apex:pageblockSection title="My Game" rendered="{!NOT(ISNULL(game))}" id="detailSection">
              <apex:pageBlockSectionItem >
                  Name: <apex:outputField value="{!game.Name}"/>
              </apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem >
                  Amount: <apex:outputField value="{!game.Number__c}"/>
              </apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem >
                  Stage: <apex:outputField value="{!game.Product_Support__c}"/>
              </apex:pageBlockSectionItem>
          </apex:pageblockSection>
      </apex:pageBlock>
  </apex:form>
</apex:page>

You need to replace the object and field names, if you want to try this code as it is.

Hope this helps.

 
Vinuthh SVinuthh S
Try this Code

public with sharing class testListDetail {
public String gameId {get; set;}
public List<Test__c> games {get; set;}
public Test__c game {get; set;}
public Boolean Table {get; set;}
public Boolean DetailPage {get; set;}

    public testListDetail(ApexPages.StandardController controller) {
        games = [SELECT Id, Name FROM Test__c];
        Table = true;
        DetailPage = false;
    }
    public PageReference fetchDetail(){
        if (gameId != null){
            game = [SELECT Id, Name, Number__c, Product_Support__c FROM Test__c WHERE Id = :gameId];
        }           
        Table = false;
        DetailPage = true;
        return null;
    }

}


<apex:page standardController="Test__c" extensions="testListDetail" >
  <apex:form >
      <apex:pageBlock >
      <apex:outputPanel rendered="{!Table}">
          <apex:pageblockSection title="My Games" >
              <apex:pageblockTable value="{!games}" var="g">
                  <apex:column headerValue="Name">
                    <apex:commandLink value="{!g.Name}" action="{!fetchDetail}"  >
                        <apex:param assignTo="{!gameId}" name="{!g.Id}" value="{!g.Id}"/>
                    </apex:commandLink>
                  </apex:column>
              </apex:pageblockTable>
          </apex:pageblockSection>
          </apex:outputPanel>
           <apex:outputPanel rendered="{!DetailPage}">
          <apex:pageblockSection title="My Game" id="detailSection">
              <apex:pageBlockSectionItem >
                  Name: <apex:outputField value="{!game.Name}"/>
              </apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem >
                  Amount: <apex:outputField value="{!game.Number__c}"/>
              </apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem >
                  Stage: <apex:outputField value="{!game.Product_Support__c}"/>
              </apex:pageBlockSectionItem>
          </apex:pageblockSection>
          </apex:outputPanel>
      </apex:pageBlock>
  </apex:form>
</apex:page>
Justin MitchellJustin Mitchell
Thank you all very much for the quick and thorough replies. The code examples are immensely helpful for someone still in the early learning stages. In this case, simply removing the "rerender" attribute(?) did the trick, so I'm going to continue on until I hit another wall. 
Rufus wallRufus wall
thank you so much for this wonderfull info. i  share with my frinds also this (https://rihnogames.com/cricket-19-game-download-free/) wonderful topic.