Problem in resizing a popup

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 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.

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.

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).

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.

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.

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?

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).

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.