Resize Record Picker Popup Window?

  • 0
  • 1
  • Question
  • Updated 2 years ago
  • Answered

Our application makes frequent use of record picker popups for associating parent records with child records.  Unfortunately, these record picker popup windows are almost always too small to be of use (showing an insufficient number of columns for selection), and users must resize them manually every time they appear.

Is there a way to resize these windows to be a bit larger?  I have read a bit about the QB "PopBox" but cannot seem to locate the relevant 'PopBox'(s) on the Source Code for the form page which affect the record picker.  I am thinking that I could use the image onload technique to call JS to change sizing for this popbox in the event that it is called -- would this work?  If so, which popbox from source affects the record picker (or would you have to see the source for my app to determine this)?

I humbly appreciate any guidance!

Photo of Blake Morgan

Blake Morgan

  • 20 Points

Posted 3 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
You could create a Mutation Observer which will fire when the dialog becomes visible and have it automatically resize.
Photo of Blake Morgan

Blake Morgan

  • 20 Points
Sounds good.  Only issue is that I am unsure where to point this -- there are 14 divs of class popbox on my source.  None of these appear to control the record picker popbox?  Or maybe one of them does and I am just being daft.  Would you happen to know the pertinent div id?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
I spoke too soon about using Mutation Observer. A Mutation observer watches for DOM changes and can execute a callback when an observed DOM element changes. But I think you are referring to the popup WINDOW which is in another context altogether. So I think the easiest way to do this is to just modify OpenAddMaster() which has hard-coded values for the width and height of the popup WINDOW

From the console get the source of OpenAddMaster with this command:

OpenAddMaster.toString()


and run the string through http://jsbeautifier.org/

You will get this output:

http://pastebin.com/8Zuv2Vdc


Now in the module.js user defined page used in implementing the image onload technique just redefine the function OpenAddMaster so that is has the width and height you want:

  AM_window = (window.open(mdbid + "?a=GenNewRecord&bg=1", "_blank", "width=1000,height=600,scrollbars,resizable"));


Yes it is true you can redefine any QuickBase function to make it do your bidding. April Fools Day is coming up shortly and this is a great technique to master to prank all of you cubicle pals.

UPDATE:

Here is the code to use in the child form:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=499


I added some logic to center the form in the middle of the screen and use the specified height and width.
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,882 Points 5k badge 2x thumb
Awesome :)

I will try it out today :)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
The popup you see in the host page are part of the host page's DOM. But the record picker opens a new window so it has its own DOM. The easiest way to control the size of the new window is to modify the function OpenAddMaster()  in the host page using the image onload technique as described in my second answer.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
I should add that the only thing you need to put in module.js is the modified function definition of OpenAddMaster which has the hardcoded values you want to use for the width and height. You don't use any of the standard module.js template code as all we are doing is redefining QuickBase's version of OpenAddMaster . Specifically don't put your new definition of OpenAddMaster in a closure as we want to modify the global version of OpenAddMaster.
Photo of Blake Morgan

Blake Morgan

  • 20 Points
Thank you!  Your guidance here saved the day.

For future onlookers, I will note that the function OpenAddMaster is executed when the "Add <Record>" button is clicked on the record picker; however, a separate function called openRecordPicker can be used to resize the record picker itself.
Photo of baltschul

baltschul

  • 0 Points
I'm having a difficult time getting the openRecordPicker function to work. I changed "?a=GenNewRecord&bg=1" TO "?a=recordPicker&rpqid=6&showNewMaster=1&rpinstance=reffield". it doesn't seem to understand/find this form. I tried a couple different variables of the URL of the record picker but it doesn't seem to work. ANy ideas? Below is the full function.

function OpenRecordPicker(mdbid, item, fid) {
alert("module.js is now loaded - I now own your page");
  var width = 1200;
  var height = 600;
  var centerLeft = (screen.width / 2) - (width / 2);
  var centerTop = (screen.height / 2) - (height / 2);

  var settings = "";
  settings += "width=" + width;
  settings += ",height=" + height;
  settings += ",scrollbars,resizable";
  settings += ",left=" + centerLeft;
  settings += ",top=" + centerTop;

  AM_window = (window.open(mdbid + "?a=recordPicker&rpqid=6&showNewMaster=1&rpinstance=reffield", "_blank", "width=1200,height=600,scrollbars,resizable"));
  if (!AM_window || AM_window.closed) {
    return
  }
  masterDBID = mdbid;
  detailRPfids = fid;

  AM_window.focus();
  window.setTimeout(UpdateDetailPage, 50)
}