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
Courtney M BrownCourtney M Brown 

Visualforce page with pop-up

Hi All,

I am using the Campaign object to track my organizations Conference data.  I've searched through the archives but can't find an answer to my question.  

Goal:  Use the visualforce page I created to display just the name of the Conference (field name= "Name") and the number of attendees (field name= No_of_Attendees_c).  I want that info to be housed in an alert box.  I'm new to using javascript and Custom Controllers.  

Here's the code I have so far:
<apex:page controller="Campaign">
  <apex:form >
    <apex:outputlabel value="Campaign Name"/>
       <apex:inputtext value="{!Campaign.Name}">
           <apex:actionsupport event="onclick" rerender="display" />
       </apex:inputtext>                  
    <apex:outputpanel id="display">
        <apex:outputtext value="Number of Attendees {!Campaign.No_of_Attendees__c}"/>
    </apex:outputpanel>                  
  </apex:form>   
</apex:page>

Controller:
public class Campaign
{

    public String getCampaign() {
        return null;
    }

    public String userinput{get; set;}
}

I know I'm doing something wrong...

Thanks in advance
Best Answer chosen by Courtney M Brown
Ramesh KallooriRamesh Kalloori
<apex:page controller="tstpopup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General. 
        </apex:pageBlock>
 
        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:outputField value="{!ac.Name}" />
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 
    </apex:form>
 
    <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: 250px;
            margin-left: -250px;
            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:page>
public class tstpopup {     
public Account ac{get{
Account a=[Select ID,Name from Account Limit 1];
return a;}
set;}
    public boolean displayPopup {get; set;}     
    
    public void closePopup() {        
        displayPopup = false;    
    }     
    public void showPopup() {        
        displayPopup = true;    
    }
    
  }

please modify your code as above it will work.

thanks,
Ramesh

All Answers

Ramesh KallooriRamesh Kalloori
please go through the below code it will show popup.

<apex:page controller="tstpopup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General. 
        </apex:pageBlock>
 
        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                This is where I would put whatever information I needed to show to my end user.<br/><br/><br/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 
    </apex:form>
 
    <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: 250px;
            margin-left: -250px;
            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:page>
public class tstpopup {     

    public boolean displayPopup {get; set;}     
    
    public void closePopup() {        
        displayPopup = false;    
    }     
    public void showPopup() {        
        displayPopup = true;    
    }
    
  }

thanks,
RAmesh
Courtney M BrownCourtney M Brown
Ramesh,

Thanks so much!  The code appears to be working :)  However, when I tried to update the pop-up text with the fields for Campaign Name and No of Attendees I receive an error message.  

Error: Could not resolve the entity from <apex:outputField> value binding '{!Campaign.Name}'. <apex:outputField> can only be used with SObjects, or objects that are Visualforce field component resolvable.

Is this not the correct location for those fields?

<apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:outputfield value="{!Campaign.Name}"/>
                <apex:outputfield value="{!Campaign.No_of_Attendees__c}"/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>

Many thanks!
Ramesh KallooriRamesh Kalloori
please modify the controller as with below statement.
public class Campaign
{
public Campaign CO{get{
Campaign a=[Select ID,Name,No_of_Attendees__c from Campaign Limit 1];
return a;}
set;}
}
<apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:outputfield value="{!CO.Name}"/>
                <apex:outputfield value="{!CO.No_of_Attendees__c}"/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>


thanks,
RAmesh
Courtney M BrownCourtney M Brown
I think we're close.  Here is what I input:

<apex:page controller="Campaign">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="Campaign"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General.
        </apex:pageBlock>

<apex:outputPanel id="Campaign">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:outputfield value="{!Campaign.Name}"/>
                <apex:outputfield value="{!Campaign.No_of_Attendees__c}"/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="Campaigns"/>
            </apex:outputPanel>
        </apex:outputPanel>

    </apex:form>

    <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: 250px;
            margin-left: -250px;
            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:page>

Controller:
public class Campaign
{
public Campaign CO{get{
Campaign a=[Select ID,Name,No_of_Attendees__c from Campaign Limit 1];
return a;}
set;}
}

Error Message: Error: Could not resolve the entity from <apex:outputField> value binding '{!Campaign.Name}'. <apex:outputField> can only be used with SObjects, or objects that are Visualforce field component resolvable.

Is this because the Campaign Name is not an SObject?

Thank you!!
Ramesh KallooriRamesh Kalloori
yes .

inputFiled and outputFiled are support to Sobjects only.

let me know if you have any clarifications.

NOte:Make it as best answer if it works.

thanks,
Ramesh
Courtney M BrownCourtney M Brown
Quick clarification:  Is my goal of displaying those 2 fields from this standard object (Campaigns) not possible?
Ramesh KallooriRamesh Kalloori
yes we can.

<apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:outputfield value="{!CO.Name}"/>
                <apex:outputfield value="{!CO.No_of_Attendees__c}"/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="Campaigns"/>
            </apex:outputPanel>

thanks,
Ramesh
Courtney M BrownCourtney M Brown
I must be mixing and matching the code bceause I'm still getting an error.  I see CO in the code--should that be Campaign instead?

Here is what I have along with the error message:
<apex:page controller="tstpopup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General.
        </apex:pageBlock>

<apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:outputfield value="{!CO.Name}"/>
                <apex:outputfield value="{!CO.No_of_Attendees__c}"/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="Campaigns"/>
            </apex:outputPanel>

    </apex:form>

    <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: 250px;
            margin-left: -250px;
            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:page>

Controller:
public class Campaign
{
public Campaign CO{get{
Campaign a=[Select ID,Name,No_of_Attendees__c from Campaign Limit 1];
return a;}
set;}
}

Error: tstpopup Compile Error: Illegal assignment from LIST<Campaign> to Campaign at line 4 column 1

I so appreciate the help!
Ramesh KallooriRamesh Kalloori
<apex:page controller="tstpopup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General. 
        </apex:pageBlock>
 
        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:outputField value="{!ac.Name}" />
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 
    </apex:form>
 
    <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: 250px;
            margin-left: -250px;
            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:page>
public class tstpopup {     
public Account ac{get{
Account a=[Select ID,Name from Account Limit 1];
return a;}
set;}
    public boolean displayPopup {get; set;}     
    
    public void closePopup() {        
        displayPopup = false;    
    }     
    public void showPopup() {        
        displayPopup = true;    
    }
    
  }

please modify your code as above it will work.

thanks,
Ramesh
This was selected as the best answer
Courtney M BrownCourtney M Brown
Unfortunately, the code as above delivers this message now:

Error: Could not resolve the entity from <apex:outputField> value binding '{!ac.Name}'. <apex:outputField> can only be used with SObjects, or objects that are Visualforce field component resolvable.

Any thoughts on what it might be?
Ramesh KallooriRamesh Kalloori
Hi Courtney,

I didn't understand why it is not working for you but same code is working fine for me.

sample output
sory for the inconvenience please try to copy the code once.

thanks,
Ramesh
Courtney M BrownCourtney M Brown
You are correct, works now!  Thank you!