+ Start a Discussion
Brian Chipman 4Brian Chipman 4 

Visualforce page new window size and position

Have a Detail Page Button on an object that open a Visualforce page in a new window.  How do I set the size and position of that new window?
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Brian,

This is will help you. If it helps mark this as best answer so that others can benefit too.

https://salesforce.stackexchange.com/questions/19005/custom-button-to-visualforce-page-in-new-window-popup-size

Regards,
Santosh.
Brian Chipman 4Brian Chipman 4
Thanks much Santosh.  It helps a little bit.  For example, 'Window Open Properties' can size the window.  But there is no option to center or position the window and the address bar still shows even though the box for that is unchecked.  Is there any code or html/css/javascript way to handle this?  If not, then perhaps your answer is the best answer.
Brian Chipman 4Brian Chipman 4
..correction, it does position in the upper left, but that's it.  Selecting 'No Preference' does the same.
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Brian,

Here is the working and tested code snippet to open window in the center.Can replace page name and Width/Height.
Also CHange button behavior to  : Execute Javascript.

Note: It will not work for extended window on dual Monitor.
Javascript buttons will work properly only in Classic and not in Lightning Experience
 
{!REQUIRESCRIPT("/soap/ajax/44.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/44.0/apex.js" )}

var w=700; var h=500;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);

window.open('/apex/TTT', 'Popup', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

 
Brian Chipman 4Brian Chipman 4
Thanks again Santosh.  I had considered window.open previously but rejected it for the reason you mention; Lightning.  We are in classic now and have way too many javascript buttons already.  Am hoping for a Lightning compatible solution.
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Brian,

Below solution works for both Classic and lightning and this how we have transformed our javascript buttons during Migration.You can keep this until Classic version is decomissioned completely and then meanwhile you can transform to lightning components and use quick actions.


Works both in Lightning & Classic :

1. Create a vf page with below snippet.
2. Create a detail Page button and add below vf page.
3.  Keep the old classic button as is.
4. Add newly created button on pagelayout to the lightning layout buttons section and remove classic button from same lightning buttons layout.
5. This way user can switch between functionalities and button still can work in both classic and Lightning.


vf page snippnet :

ButtonVfpage :
<apex:page standardController="<ObjectName>" lightningStylesheets="true" docType="html-5.0" >

      
      <apex:includeScript value="/soap/ajax/43.0/connection.js"/>
      <apex:includeScript value="/soap/ajax/43.0/apex.js"/>

<script type="text/javascript">
        sforce.connection.sessionId = '{!$Api.Session_ID}';
    </script>
    
     <script type = "text/javascript">
        
        window.onload = Mainfunct;
     
        function Mainfunct() {
           
            var w=700; var h=500;
			var left = (screen.width/2)-(w/2);
			var top = (screen.height/2)-(h/2);

			
			
			              if (sforce.one != undefined) {
                                    // Lightning
                                    sforce.one.navigateToURL('/apex/TTT', 'Popup', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
                                } else {
                                    // Classic
									window.open('/apex/TTT', 'Popup', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);    
                                }
								

      }  
  
     </script>

</apex:page>

Hope this Helps!

--Santosh.​​​​​​​

 
Brian Chipman 4Brian Chipman 4
Maybe we're closer.  This pops up two windows. The first in the upper left corner and then the one called by window.open.  Is your Vf page example above where I am to put my code and controller references or am I calling my already created vf page with "apex/TTT"?

For the details page button, I set...  

Content Source = Visualforce Page
Behavior= Display in new window.

I put an alert on about line 22; "alert(sforce.one);" and when run,  it says 'Undefined' so I would expect just the classic window to open. standardController has been set to 'Case' just like the Vf page I want to display.

I replaced "apex/TTT" with "apex/myvisualforcepage".  "myvisualforcepage" has standardController="Case" and references an extension. I get a "List has no rows for assignment to SObject" error whereas this page works without error when called directly from the button.
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
HI Brian,

Is your Vf page example above where I am to put my code and controller references or am I calling my already created vf page with "apex/TTT"? --You need to put your vf page and reference related controller into that page.

I replaced "apex/TTT" with "apex/myvisualforcepage".  "myvisualforcepage" has standardController="Case" and references an extension.-- This steps is correct replace the vf page (TTT) with yours.

Do the following steps.

1. on Detail page button.
    Behavior = 'Execute Javascript.'
     Content Source = 'onClick Javascript.'
2. Step1 makes button functionality work in Classic.

3. Create a Quick Action. Select Action Type : Custom visualforce & Select related vf page from dropdown (you will se vf page as you have std controller defined on page.)
4. Select Height as 500px or whatever you feel it's right, give name  same as the one in classic & Save
5. Add the above quick action to 'Salesforce Mobile and Lightning Experience Actions' on related page layout.
6. Due to steps 1 thru 5, user can see the same button both in Classic and Lightning.
 When i tried above steps i was able to make it work in both versions.

Hope this helps!