Problem in resizing a popup

Problem in resizing a popup

  

Hello, I am having trouble in resizing a Popup. Can anyone help?

I have a Popup that presents a table (table records) with pagination (using the List-Navigation widget from Rich Widgets). The number of lines by page is 10, except in the last page. What I want is to get the popup to shrink when the user gets to the last page (where there are fewer lines).

I've tried to implement this solution, with no success:

https://success.outsystems.com/Documentation/Development_FAQs/How_to_dynamically_resize_a_pop-up_window

I copied the code to the javascript field of the Webscreen (of my popup), and placed the RunJavaScript action on the PageRefresh action associated with the OnNotify field of the List-Navigation widget.

I haven't changed anything in the code and have placed the RunJavascript action after the ajaxrefresh (that refreshes the main div of the pop-up) widget in my PageRefresh action. I aleady rechecked the code and confirmed it is indeed the same. 

I am using service studio version 7.0.

Hi Bruno,

Are your really using Service Studio version 7? That's an incredibly ancient version that hasn't been supported for years. I could very well imagine the shrinking not working with such an old version. Have you tried to see whether the concept works on a personal environment (with P10)?

That said, have you checked for any JavaScript errors in the console of your browser? If there are no errors, try to add a console.log to the JavaScript to check whether it is called at all.

Kilian Hekhuis wrote:

Hi Bruno,

Are your really using Service Studio version 7? That's an incredibly ancient version that hasn't been supported for years. I could very well imagine the shrinking not working with such an old version. Have you tried to see whether the concept works on a personal environment (with P10)?

That said, have you checked for any JavaScript errors in the console of your browser? If there are no errors, try to add a console.log to the JavaScript to check whether it is called at all.

Hi Kilian. Thank you for your reply.

I am working on an application that was developed in that version years ago and I cannot upgrade it for now, so I am stuck with it, unfortunately. 

Anyway, both javascript and the RunJavaScript action are suported by this version, so it probably is compatible. I have no way to know that for sure, though. For this reason, I think it is best to focus for now on the implementation that I did and then, if there is nothing wrong with it, probably accept compatibility issues.

The solution that I used is official from Outsystems (as you can see by the link I posted before), and has been recommended in several topics in this forum, so I would assume it works in version 10. I have, at this time, no way to confirm that, however.

I tried what you recommended. The console didn't show any errors, but it also didn't show any output from console log (I placed the instruction right after the variables declaration in the function code), meaning the code is not running from some reason. From Debug, however, I can see that the action is iterated in the action flow, so I cannot see what the problem is (let's ignore compatibility issues for now).

Hi Bruno,

It is important to note that the Javascript you are using is running in a different context than the screen context in the browser (it is being run in the Popup). This is probably the reason you are not seeing anything in the console.

To fix that you need to change the context of your Javascript console in your browser's developer tools, select the one that says PopupEditor like in the image below (This was done in Chrome).

After that, you should be able to check for errors and the result of your console.log statements.

Cheers,

João

Hello Bruno,

This FAQ was updated recently and the JavaScript snippet was slightly changed from the one previously used.

The problem may occur due to the html classes being different in version 7.0 or with the use of jQuery selectors in the code.

Inspect your webpage and see if you can find the classes used in the JavaScript snippet:

".os-internal-ui-dialog-content"
".MainPopup"

If this is not the problem you can also rewrite the code in pure JavaScript and see if that solves the issue.

Cheers

João Mateus wrote:

Hi Bruno,

It is important to note that the Javascript you are using is running in a different context than the screen context in the browser (it is being run in the Popup). This is probably the reason you are not seeing anything in the console.

To fix that you need to change the context of your Javascript console in your browser's developer tools, select the one that says PopupEditor like in the image below (This was done in Chrome).

After that, you should be able to check for errors and the result of your console.log statements.

Cheers,

João

Hi Joao Mateus! Thank you for your reply.

I did not know that (so thank you for the information) and tried as you said. I selected the PopUP context in both Edge and Chrome for testing. There was no log output or any error reported.


João Batista wrote:

Hello Bruno,

This FAQ was updated recently and the JavaScript snippet was slightly changed from the one previously used.

The problem may occur due to the html classes being different in version 7.0 or with the use of jQuery selectors in the code.

Inspect your webpage and see if you can find the classes used in the JavaScript snippet:

".os-internal-ui-dialog-content"
".MainPopup"

If this is not the problem you can also rewrite the code in pure JavaScript and see if that solves the issue.

Cheers

Hi Joao Batista. Thank you for your reply.

I though of that, and I tried to do that. But I don't know if I did get the classes of the correct elements (there are a lot of divs) of the page.

So, I have a question just to confirm: the first class refers to the top most Div of the PopUP (that contains all the other divs of the PopUp) or the Div that directly contains the Iframe of the PopUp? The second one refers to the main div in the pop-up body?


@Joao Mateus

I added the following instruction to the script field of the RunJavaScript action: "console.log(12);"  and erased what I had before(until now I only called the function there), and finally got an ouput! Then I erased that and copied the entire function code (that already has a similar instruction inside) and got an output, but the code did nothing on the popup...

Therefore, now the only problem I have is with the function code itself (probably the suggestion of @Joao Batista, or incompatibility with that version of Javascript in the function).

Thank you.

".os-internal-ui-dialog-content"

This class is applied to the div that in turn contains the iFrame (plus a div for the spinning black gif that shows up while content is loading).



".MainPopup"

This class is applied to a div inside the iFrame where all the Popup content is located. 


You are welcome Bruno, I hope this helps you tackle your issue.

Edit: Modified images to improve readability. 

João Batista wrote:

".os-internal-ui-dialog-content"

This class is applied to the div that in turn contains the iFrame (plus a div for the spinning black gif that shows up while content is loading).



".MainPopup"

This class is applied to a div inside the iFrame where all the Popup content is located. 


You are welcome Bruno, I hope this helps you tackle your issue.

Edit: Modified images to improve readability. 

I changed the names of the classes in the code accordingly and still there was no effect. For some reason, whether I put the function code in the action or in the page, it does not run. I tried putting console.log instructions right at the begining of the code inside the function and it didn't do anything.

I am calling the function using this instruction: 

SyntaxEditor Code Snippet

PopupEditor_ForceResize();

But or it doesn´t call it, or there is something wrong that I haven't noticed yet.


I have a question regarding these two instruction in the code:

window.top - Does it refer to the topmost div of the popup or the main page?

SyntaxEditor Code Snippet

window.top.RichWidgets_Popup_Editor_resize(popupDiv, -1, -1, false, {target: popupDiv});

I assume this is a function from an internal Outsystems library? Do I need to do a ajax refresh to the page after this code?




Solution

Ok, I think I solved it...

I think that the problem was that version 7 was not able to run jQuery callings (even with the right class names). 

So I tried a pure javascript approach (without any class names). It worked.

Here is the solution (to those interested):

SyntaxEditor Code Snippet

function PopupEditor_ForceResize() {
    
    var PopUpFrame = window.self.frameElement;
    var PopUpDocument = window.self.document;
    var popupDiv = PopUpFrame.parentElement;
    var popupDivOldHeight = popupDiv.style.height;
    // reduce iframe's div height to its contents
     popupDiv.style.height=PopUpDocument.body.clientHeight+"px";
    // pop-up editor already auto-grows, so we just need to address auto-shrink
    if (popupDiv.height() >= popupDivOldHeight) {
        return false;
    }
    var result = window.self.RichWidgets_Popup_Editor_resize(popupDiv, -1, -1, false, {target: popupDiv});
    if (!result) {
        // something wrong happened in resize - reset iframe's div height
        popupDiv.height(popupDivOldHeight);
    }
}
Solution

Hi Bruno,

Note that version 7, iirc, still uses a derivative of jQuery 1.4, so that might explain it. Good to see you solved it!

Kilian Hekhuis wrote:

Hi Bruno,

Note that version 7, iirc, still uses a derivative of jQuery 1.4, so that might explain it. Good to see you solved it!

Hi Kilian.

Yes, that most certainly explains it. Thank you very much for your help and feedback.



You're most welcome!