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

Modal Popup Open Dynamically because of a field value

Hi, I'm trying to use this "Modal Dialogs in VF with the Yahoo! User Interface Library" code as a basis to make a popup open on a VF page when an Opportunity moves to the Stage = Qualified (or beyond):!_User_Interface_Library


Is there an easy way anybody knows of to forego the "onlick" button and instead use the attributes of the record itself to prompt the Modal Dialog to stop staying hidden?  So for example the opportunity record's stage is "Qualified" and/or a formula field evaluates to a certain value, therefore displaying the popup?


    <apex:pageBlockButtons >
        <input type="button" class="btn"
                    value="Popup Demo" />



I've tried mashing in this Javascript code to no avail:


It's basically using js to query the record and then uses "" to popup.  But I can't get it to work as a replacement for the button.


var arrId = '{!$}';
var queryresult = sforce.connection.query("Select Rating from account where id='"+arrId+"'");
var records = queryresult.getArray("records");




I've been reading Bob Buzzard and friends for the last few days and I can't seem to find the missing piece.


Here is my code so far.  There's an extra section which makes the account tabbed with the fields grouped into tabs by field sets.  I've made the tabs edit the fields as inline edits, so there isn't really much of a need for an edit screen. 


I'm guessing there needs to be a controller extension or something to make it happen?


Any nudges in the right direction are greatly appreciated!



<apex:page standardController="Opportunity" extensions="OppVFPageSaveExtension" showHeader="true" tabStyle="Opportunity" >
         .activeTab {background-color: #E4C030; color:white; background-image:none}
         .inactiveTab { background-color: lightgrey; color:black; background-image:none}

<apex:styleSheet value="" />
<apex:includeScript value="" />
<apex:includeScript value="" />
<apex:includeScript value="" />

  // Create a namespace for our custom functions
    // Function called when we want to show the dialog = function() {
        document.getElementById("myPanel").style.display = "block";;
    // Function called when we want to hide the dialog = function() {;
   // Function called when the DOM is ready to create the dialog,
    // render the dialog into the document body, add our dialog skin
    // css to the body tag, and wire up the buttons on our dialog = function() {
        document.body.className = document.body.className + " yui-skin-sam";
         = new YAHOO.widget.Panel(
            "myPanel",  // The id of our dialog container
                    width           :   1000,    // You can play with this until it's right
                    visible         :   false,  // Should be invisible when rendered
                    draggable       :   true,   // Make the dialog draggable
                    close           :   false,  // Don't include a close title button
                    modal           :   true,   // Make it modal
                    fixedCenter     :   false,   // Keep centered if window is scrolled
                    zindex          :   40,     // Make sure it's on top of everything
                    // This line adds the appear/vanish fade effect
                    effect          :   {
        // Render the dialog to the document.body level of the DOM;
    // Add the init method to the window.load event
    YAHOO.util.Event.addListener(window, "load",;

 <apex:outputPanel >
 <apex:pageBlock title="Basic Modal Dialog" id="none">
    <apex:pageBlockButtons >
        <input type="button" class="btn"
                    value="Popup Demo" />

<!--This is my Tabs VF--> <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab"> <apex:tab label="Relevant Personnel" name="Relevant_Personnel" id="ReleventPersonneltabFieldSet"> <apex:include pageName="Opp_ReleventPersonnelFieldSet"/> </apex:tab> <apex:tab label="Win/Loss Info" name="Win_Loss_Info" id="Opp_WinLossInfo"> <apex:include pageName="Opp_WinLossInfo"/> </apex:tab> <apex:tab label="Opportunity Team" name="Opportunity Team" id="TabTeam"> <apex:relatedList subject="{!Opportunity}" list="OpportunityTeamMembers" /> </apex:tab> <!--<apex:tab label="Opportunities" name="Opportunities" id="tabOpp"> <apex:relatedList subject="{!Opportunity}" list="opportunities" /> </apex:tab>--> <apex:tab label="SSRs" name="SSRs" id="tabSSRs"> <apex:relatedList subject="{!Opportunity}" list="Request_Services_Support__r" /> </apex:tab> <apex:tab label="Notes and Attachments" name="NotesAndAttachments" id="tabNoteAtt"> <apex:relatedList subject="{!Opportunity}" list="NotesAndAttachments" /> </apex:tab> </apex:tabPanel> <!-- This is the content of the modal dialog --> <div id="myPanel" style="display: none" > <div class="hd"> <apex:outputText value="Opp Qualification Profile" /> </div> <div class="ft" style="font-size: 10px;"> <apex:outputPanel layout="block"> Please enter what you know. Once you close this, you still need to click "Quick Save" to save changes. </apex:outputPanel> </div> <div class="bd"> <apex:form > <apex:pageBlock > <apex:pageBlockSection columns="1"> <apex:inputField id="fDescription" value="{!opportunity.Description}" /> </apex:pageBlockSection> </apex:pageBlock> <div style="text-align: right;" > <apex:commandButton value="Close (You will still need to click save once this closes)" oncomplete=";" /> <apex:commandButton value="Cancel" immediate="true" oncomplete=";"/> </div> </apex:form> </div> <br/> <br/> </div> </apex:page>





Best Answer chosen by Admin (Salesforce Developers) 

OK, I figured out a different and much simpler way of doing this.  The Popup was overkill.


Instead I just used straight visualforce utilizing the conditional rendered= .


Essentially, all I had to do with my two blocks was something like this:

<apex:outputPanel id="QualPageBlock" rendered="{!(Opportunity.StageName == 'Qualified')}" >


And the one to stay hidden was something like this:

<apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab" rendered="{!(Opportunity.StageName <> 'Qualified')}">


And it even worked on the tabs!

Something like this:

<apex:tab label="Opportunity Team" name="Opportunity Team" id="TabTeam" rendered="{!(Opportunity.StageName <> 'Finalist')}">


Thanks to anyone who viewed and considered helping on this one!