How to Dynamically adjust PopUp Size Based on Screen Size

How to Dynamically adjust PopUp Size Based on Screen Size

  

Hi!


How can I set a PopUp to automatically resize based on the screen size. That is, I want it to always only take up 90% of the screen of the user regardless on if he is using a 1920x1080 or a 1280 x 720 screen.


Thank you!

Is this for Web or Mobile?

For Web. But I may need to learn to do it too in Mobile in the future.

It may not matter... but... what kind of Popup?  E.g. is the Popup a Widget... Popup Editor or Popup Info Balloon or Layout Popup?  I'd just like to try to duplicate what you're working with.  If you could post a simple sample oml that would be great.

Hi!


I attached the oml file. I want the pop up that appears when you click the link to scale based on the width of the user's browser window.


Thank you.

Thanks for the oml.

I can see how to get this done... but I cannot quite put the pieces together.

In your HomeScreen I created 2 Local Variables... popupWidth and popupHeight.  I gave each a default value of 500.  I then added 2 Input Widgets and tied them to the Local Variables.  The Input Widgets can be hidden later.

In your Popup_Editor, I set the WidthPx and HeightPx to these 2 Local Variables.

Now, when you run the app your popup will be 500 x 500.

Here's the part I'm stuck on.  How to set the value of popupWidth and popupHeight at runtime.

I've added a Preparation Action to the HomeScreen.  Here I'm calling a RunJavascript Action which calls a Javascript function named getScreenSize.  getScreenSize is defined in the HomeScreen Javascript property.

There are lots of ways to get a screen size... and I've included a few in the Javascript function.

The Javascript function then sets the values of the Input Widgets... but those values don't get through to the Local Variables... and so... do not get through to the Popup_Editor.

Have a look... maybe you can spot something I've missed... or someone else can jump in and set things right.  Maybe this isn't a good way to accomplish this... but it seems ok.

 

I checked what you did. So far I understand the flow. I played around with it but I can't get the values from the input widget to get passed on to the local variables during preparation to set the width of the popup. I have tried using "Assign" but it wouldn't get the values in the input. I can't see what you may have missed.

But anyway, thank you.

The missing piece is Ajax refresh, reloading the Popup_Editor widget. It must be reloaded every time, when the value on any of the two inputs change. The widget is rendered during preparation, with the values, available at that time. Just changing the variable values will not affect the widget, after it has been rendered. That's why you must refresh it on value change on the input widgets.

You can use CSS to style the width and height of the popup. You just need to use !important to override the values that the javascript attempts to calculate. Try using this as a starting example:


.os-internal-ui-dialog {
    width: 80% !important;
    height: 80% !important;
}

.os-internal-ui-dialog-content {
    width: 100% !important;
    height: 100% !important;
}

I had the same requirement, client wanted one of the screens in a popup and it is an input form and got all squashed in the pop-up and had to get it more-or-less screen size, well at least 90% of screen width.

All the preceding information put me on the right track, although I did not find any of the suggestions entirely worked, but I used the ideas given and found a solution that worked for my case. Not sure if anybody found the exact solution, but if this can help someone here is my version:

  1. Say you have a link or button that you want to click that opens the popup, lets say it is a button called "Popup Open", then you have the Popup Editor widget linked to this button. The Button then navigates to the popup screen in the UI flow. This is the normal scenario one would use for a normal popup navigation. 
  2. Now add what Davidk suggested above which is:
  3. Add 2 input widgets and 2 variables, lets call it PopupWidthInput and PopupHeightInput, then create 2 integer local variables and bind it to these 2 intputs, lets call this PopupWidthVar and PopupHeightVar.
  4. Set the Popup Editor Widget's WidthPx and HeightPx to PopupWidthVar and PopupHeightVar respecitvely.
  5. Make the 2 input widgets hidden by adding in the extended attributes "style" with value "display: none;" (DO NOT USE the Display attribute set to False, this entirely removes the inputs from the screen and it will not work)
  6. Now make a change to your "Popup Open" button: Add a link called "PopupOpenHiddenLink" and hide it using extended attribute "style" with value "display: none;". Change the Popup Editor Widget to be linked to the hidden link and no longer to the button. Set the Link to Method of Navigate and let it navigate to the popup screen you want to open.
  7. Create a screen action, lets call it OpenPopupAction, now change the original "Popup Open" button to Method submit and to destination OpenPopupAction. We will come back to this action later.
  8. Place the 2 inputs for the popup width and height as well as the button and hidden link inside a container, lets call this "PopupSizeWrapper"
  9. Populate the size you want the popup to be using javascript to calculate the screen size using this script (you can adjust to your requirement, I wanted 90% of screen height and width). Place this script in your page's javascript area:SyntaxEditor Code Snippet
    function getScreenSize(screenWidthId, screenHeightId){
        debugger;
        var screenWidth = screen.availWidth;
        var screenHeight = screen.availHeight;
        var popupWidth = parseInt(screenWidth * 0.9);
        var popupHeight = parseInt(screenHeight * 0.9);
        document.getElementById(screenWidthId).value = popupWidth;
        document.getElementById(screenHeightId).value = popupHeight;
    }
  10. Now in your screen's preparation add an instance of the RunJavaScript action and run this javascript that calls the above geScreenSize:SyntaxEditor Code Snippet
    "getScreenSize('" + PopupWidthInput.Id + "', '" + PopupHeightInput.Id + "');"
  11. Open the OpenPopupAction and firstly add an Ajax Refresh to refresh the container "PopupSizeWrapper", then add an instance of the RunJavaScript action and run this javascript to click the hidden link: SyntaxEditor Code Snippet
    "document.getElementById('" + PopupOpenHiddenLink.Id + "').click();"


Hello Elize,


Can you give us your oml that have solution for this problem?


Thanks!


Elize van der Riet wrote:

I had the same requirement, client wanted one of the screens in a popup and it is an input form and got all squashed in the pop-up and had to get it more-or-less screen size, well at least 90% of screen width.

All the preceding information put me on the right track, although I did not find any of the suggestions entirely worked, but I used the ideas given and found a solution that worked for my case. Not sure if anybody found the exact solution, but if this can help someone here is my version:

  1. Say you have a link or button that you want to click that opens the popup, lets say it is a button called "Popup Open", then you have the Popup Editor widget linked to this button. The Button then navigates to the popup screen in the UI flow. This is the normal scenario one would use for a normal popup navigation. 
  2. Now add what Davidk suggested above which is:
  3. Add 2 input widgets and 2 variables, lets call it PopupWidthInput and PopupHeightInput, then create 2 integer local variables and bind it to these 2 intputs, lets call this PopupWidthVar and PopupHeightVar.
  4. Set the Popup Editor Widget's WidthPx and HeightPx to PopupWidthVar and PopupHeightVar respecitvely.
  5. Make the 2 input widgets hidden by adding in the extended attributes "style" with value "display: none;" (DO NOT USE the Display attribute set to False, this entirely removes the inputs from the screen and it will not work)
  6. Now make a change to your "Popup Open" button: Add a link called "PopupOpenHiddenLink" and hide it using extended attribute "style" with value "display: none;". Change the Popup Editor Widget to be linked to the hidden link and no longer to the button. Set the Link to Method of Navigate and let it navigate to the popup screen you want to open.
  7. Create a screen action, lets call it OpenPopupAction, now change the original "Popup Open" button to Method submit and to destination OpenPopupAction. We will come back to this action later.
  8. Place the 2 inputs for the popup width and height as well as the button and hidden link inside a container, lets call this "PopupSizeWrapper"
  9. Populate the size you want the popup to be using javascript to calculate the screen size using this script (you can adjust to your requirement, I wanted 90% of screen height and width). Place this script in your page's javascript area:SyntaxEditor Code Snippet
    function getScreenSize(screenWidthId, screenHeightId){
        debugger;
        var screenWidth = screen.availWidth;
        var screenHeight = screen.availHeight;
        var popupWidth = parseInt(screenWidth * 0.9);
        var popupHeight = parseInt(screenHeight * 0.9);
        document.getElementById(screenWidthId).value = popupWidth;
        document.getElementById(screenHeightId).value = popupHeight;
    }
  10. Now in your screen's preparation add an instance of the RunJavaScript action and run this javascript that calls the above geScreenSize:SyntaxEditor Code Snippet
    "getScreenSize('" + PopupWidthInput.Id + "', '" + PopupHeightInput.Id + "');"
  11. Open the OpenPopupAction and firstly add an Ajax Refresh to refresh the container "PopupSizeWrapper", then add an instance of the RunJavaScript action and run this javascript to click the hidden link: SyntaxEditor Code Snippet
    "document.getElementById('" + PopupOpenHiddenLink.Id + "').click();"




Hi Bruno,


I don't have an oml at the moment, it is in a huge solution that I cannot send, but as soon as I have a few minutes to spare I am going to build one

why not use the values "vh" and "vw" in css for the width/height?


Thanks Elize,

I will waiting.


Elize van der Riet wrote:

Hi Bruno,


I don't have an oml at the moment, it is in a huge solution that I cannot send, but as soon as I have a few minutes to spare I am going to build one



Hi Bruno,

As promised here is oml. The JavaScript to get the screen size is in the HomePage JavaScript section (click on HomePage screen in the Interface and go to the "Javascript" attribute). There are off course various ways in JavaScript to get screen size, this what I did here is what worked for us.

Elize van der Riet wrote:

Hi Bruno,

As promised here is oml. The JavaScript to get the screen size is in the HomePage JavaScript section (click on HomePage screen in the Interface and go to the "Javascript" attribute). There are off course various ways in JavaScript to get screen size, this what I did here is what worked for us.


Tank you so much Elize!!