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
Salesforce####Salesforce#### 

How to display Account details like few fields ie name, phone from Accounts when i click a button

hi all , 

in a vf page , i have a custom button , if i click that button i need to get a pop up which displays all account fields name, phone with a check box  in a column . can you please give me an example how to do this ??
Best Answer chosen by Salesforce####
Dileep KumarDileep Kumar

Hi,

public class AccDetail{
    public Account acc{get;set;}
    public boolean showPopup {get;set;}
    public Id stdId;
    public AccDetail(ApexPages.standardController std){
        stdId = ApexPages.CurrentPage().getParameters().get('id');
        showPopup = false;
        acc = [select Name,AccountNumber,Phone From Account where Id =: stdId ];
    }
    public void show(){
        showPopup = true;
        acc = [select Name,AccountNumber,Phone From Account where Id =:stdId ];
    }
    public void cancelPopup(){
        showPopup = false;
    }
}
<apex:page standardController="Account" extensions="AccDetail" showHeader="false" sidebar="false">
<style>
.white_content {
                position: absolute;
                top:0% ;
                left: 10%; 
                width: 30%;
                height: auto;   
                padding: 16px;
                border: 2px solid black;
                background-color: white;
                z-index:11;
                overflow: auto;
                -moz-border-radius-topright:15px;
                -moz-border-radius-topleft:15px;
                -webkit-border-top-right-radius:15px;
                -webkit-border-top-left-radius:15px;
                border-top-left-radius:15px;
                border-top-right-radius:15px;
                -moz-border-radius-bottompright:15px;
                -moz-border-radius-bottomleft:15px;
                -webkit-border-bottom-right-radius:15px;
                -webkit-border-bottom-left-radius:15px;
                border-bottom-left-radius:15px;
                border-bottom-right-radius:15px;
                window-showModalDialog-center:on;
            }
</style>


    <apex:form id="formId">
        <apex:commandButton action="{!show}" value="Show"/>
        <div class="white_content" id="myPopup" style="display:{!IF(showPopup , 'block', 'none')};">
        <table >
            <tr>
                <td><apex:inputCheckbox /></td>
                <td>{!acc.Name}</td>
                <td>{!acc.Phone}</td>
                <td>{!acc.AccountNumber}</td>
            </tr>
            <tr>
                <td><apex:commandButton value="Cancel" action="{!cancelPopup}" reRender="formId"/></td>
            </tr>
        </table>
        </div>
    </apex:form>
  
</apex:page>


Please save class and vf page after that click on 'preview' button and writedown in url as like this

https://c.ap2.visual.force.com/apex/AccDetail?id=0012800000lXwWx

above id is account id.Now you will see data off account inside popup after button click.

Please mark it as a best answer.

Thanks,

Dileep 

All Answers

Dileep KumarDileep Kumar

Hi,

public class AccDetail{
    public Account acc{get;set;}
    public boolean showPopup {get;set;}
    public Id stdId;
    public AccDetail(ApexPages.standardController std){
        stdId = ApexPages.CurrentPage().getParameters().get('id');
        showPopup = false;
        acc = [select Name,AccountNumber,Phone From Account where Id =: stdId ];
    }
    public void show(){
        showPopup = true;
        acc = [select Name,AccountNumber,Phone From Account where Id =:stdId ];
    }
    public void cancelPopup(){
        showPopup = false;
    }
}
<apex:page standardController="Account" extensions="AccDetail" showHeader="false" sidebar="false">
<style>
.white_content {
                position: absolute;
                top:0% ;
                left: 10%; 
                width: 30%;
                height: auto;   
                padding: 16px;
                border: 2px solid black;
                background-color: white;
                z-index:11;
                overflow: auto;
                -moz-border-radius-topright:15px;
                -moz-border-radius-topleft:15px;
                -webkit-border-top-right-radius:15px;
                -webkit-border-top-left-radius:15px;
                border-top-left-radius:15px;
                border-top-right-radius:15px;
                -moz-border-radius-bottompright:15px;
                -moz-border-radius-bottomleft:15px;
                -webkit-border-bottom-right-radius:15px;
                -webkit-border-bottom-left-radius:15px;
                border-bottom-left-radius:15px;
                border-bottom-right-radius:15px;
                window-showModalDialog-center:on;
            }
</style>


    <apex:form id="formId">
        <apex:commandButton action="{!show}" value="Show"/>
        <div class="white_content" id="myPopup" style="display:{!IF(showPopup , 'block', 'none')};">
        <table >
            <tr>
                <td><apex:inputCheckbox /></td>
                <td>{!acc.Name}</td>
                <td>{!acc.Phone}</td>
                <td>{!acc.AccountNumber}</td>
            </tr>
            <tr>
                <td><apex:commandButton value="Cancel" action="{!cancelPopup}" reRender="formId"/></td>
            </tr>
        </table>
        </div>
    </apex:form>
  
</apex:page>


Please save class and vf page after that click on 'preview' button and writedown in url as like this

https://c.ap2.visual.force.com/apex/AccDetail?id=0012800000lXwWx

above id is account id.Now you will see data off account inside popup after button click.

Please mark it as a best answer.

Thanks,

Dileep 

This was selected as the best answer
Salesforce####Salesforce####
hi dileep , i did a little similar to that , in my requirement i need to use a wrapper class in order to bind the check box together , so what ever column i selected inside the popup window , that should appear below the button . 

below is my code, when i click on  " show pop up " button i am not getting anything , can you please let me know whats the issue i am facing . 
if i remove all the wrapper and just display the pageblock table i am able to see the account details 
controller : 
public class PopUpVfTableCont 
{
public list<account> acclist {get;set;}
public boolean displayPopup {get; set;}  
public list<popupwrapper> popwrap {get;set;}

  public void showpopup()
    {
    acclist  = new list<account>();
    acclist = [select id ,name , phone from account limit 5];
   
    for(Account ac:acclist)
    {
    popwrap.add(new popupwrapper(false ,ac) );
    displayPopup  = true;
    }
    
    
  //  displayPopup  = true;
    } 
    
    public void hidepopup()
    {
    displayPopup  = false;
    }

    public class popupwrapper
    {
    public boolean checkbox{get;set;}
    public Account act{get;set ;}
    
    public popupwrapper(boolean c,Account a )
     {
     checkbox =c ; 
     act = a;
     }
    
    }
    
}

vf page : 
<apex:page controller="PopUpVfTableCont">
<style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup 
            displays in the center of the screen. First set the width. Then set 
            margin-left to negative half of what the width is. You can add 
            the height property for a fixed size pop up if you want.*/
            width: 500px;
            margin-left: -100px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
 <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="PopUpCont"/>
        <apex:pageBlock >
            
<apex:outputPanel id="PopUpCont">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:pageBlockTable value="{!popwrap}" var="wrap">
                  <apex:column value="{!wrap.act.Name}"/>
                  <apex:column value="{!wrap.act.Phone}"/>
                <apex:column headerValue="Checkbox">
                        <apex:inputCheckbox value="{!wrap.checkbox }"/>
               </apex:column>
                 
                </apex:pageBlockTable>
                <apex:commandButton value="Hide Pop up" action="{!hidepopup}" rerender="PopUpCont"/>
            </apex:outputPanel>
        </apex:outputPanel>
 </apex:pageBlock>
    </apex:form>
 
    
</apex:page>
Salesforce####Salesforce####
@dilip : i got the mistake i corrected the wrapper