Issue with form field valuehelp using popups

Issue with form field valuehelp using popups

  

if you have input form, in which, you want provide input help (full record vise, not as dropdown or combobox) via Popup screen. If your popup form preparation uses your caller form values as "filter", the values passed caller from form to popup are not the current (user just entered), but instead the old values that form had when it was rendered.

Example:

I made my Booking application (training) and build a PopUp (RichWidgets Popup_Editor) that would allow me to select any of the found free rooms (they will be seen in the popup as full records not just by showing a single field). I am able to select my room using a button. The selected record in the popup would be returned to the original form. This requires Notify and OnNotify functionality. I got it working, so far so good.

In Preparation of Popup screen, the SQL-selection uses values from the original form. For example in this case the value of ‘NumberAdults’ (BookingForm.Record.Booking.NumberOfAdults),‘CheckInDate’, ‘CheckOutDate’. This is working. So far so good.

But, the issue is that values that gets passed from BookingForm to Popup screen are the old values of the BookingForm form variables, not the ones user had just entered in the form. This is because, the Popup requires the action type is ‘Navigation’ and not ‘Submit’ nor ‘Ajax Submit’. In HTML, navigation action ignores all the values that were currently entered in the form. In my current application the workaround is that I need to Save my booking data and then form values actualizes and PopUp would use current form values, but that is not what I want.

 How to implement such a PopUp that uses current values of the caller form, which user has not yet posted?

I recon, same issue would be present if a form has fields whose valuelist are dependent on each other eg. If in field ‘Field1’ value ‘1’ is entered, then in field ‘Field2’ should only allow values where ‘Field1’ value ‘1’ is used as selection criteria. I mean, with comboboxes/dropdown as well.

Please understand, I am still a newbie.


Hello Kimmo,

When you call your screen (with the form and the button/link to the popup), the page will be built with the values at that moment.

This mean that your button/popup will have some fixed values. 

When you change the values in the input, you are not changing the link/button values defined in the HTML, client side. 

This will happen when you call a screen action and UPDATE the link/button, to have the most recent values.

One way to accomplish this is:

1. Make the link/button that opens the popup invisible (css property display:none).

2. Add a second link/button that calls a screen action (ajax submit).

3. On it, ajax refresh the hidden link/button that calls the popup (to have the newer values) and execute a RunJavaScript (from the HTTPRequestHandler extension) with the following code:

"$(#'" + yourhiddenlinkorbutton.id + "').click();"

This will open the popup with the most up to date values for the input parameters.

Cheers.

Thanks Eduardo.

The Ajax Refresh with additional button, which does the the Ajax refresh & JavaScript for the actual link/button works ok regarding Ajax Refresh part (when control is back to user, my original button would use current form values), but I don't get the javascript click() actualized. In fact, when viewing the page source in browser, there is no click() found. JavaScript is enabled in my browser(s). Thus currently it seems, that the whole Javascript is not there in the rendered code. As a test, i replaced the click() with alert command, and still not found in the rendered page source in browser.

This is what I have in the server action RunJavaScript input parameter: "$(#'" + GetAvailableRoomLnk.Id + "').click();"   where the GetAvailableRoomLnk is the Name of my original link element on the calling page.

Currently I am not using CSS to hide my original link element, but I guess that is not cause the JavaScript is not applied.

FYI: my environment is the Personal environment by Outsystems. In my tests I use both IE11 and Chrome.

BTW: at some point making and testing these changes, my original link element started to work strangely: When coming to the screen first time, pressing my original link/button it opened the valuehelp as popup, but if pressing the new additional button (ajax and JavaScript) and then pressing myself my original link element again it did not perform valuehelp as popup, but a normal screen. However,  I managed to get rid of this annoying feature by deleting the RunJavaScript action, republishing and adding it again and republishing again.


Hello kimmo,

The AjaxRefresh must include the PopupEditor widget. The id's change, if you don't refresh ALSO the PopupEditor widget, it will not be bound to the link anymore.

That's the probable cause of why the Click didn't work.

As for why the "...click();" code is not present in the html, the reason is that you are not injecting this javascript in the html, you're only asking the browser to execute it (afaik).

Cheers.

but my Popup_Editor widget is already inside the link element. I copied this way of implementing the link and PopUp_Editor from previous exercises of the training material (movie app, I checked the solution module not my own).

ok, I gave a name to Popup_Editor widget, and could then make separate Ajax Refresh for it in my new popup's action flow. See attached PDF of current solution.

But the click() still does not work but Ajax does work.

I also tried wrapping my link tree (includes the popup_editor widget) inside a container, giving a name for the container and replace old link element related Ajax refresh with new container Ajax refresh (in hope the Ajax would apply the whole container subtree (link and the popup_editor), but effect was similar than having 2 separate Ajax refresh -> click() not working.

Is there anyway I could test JavaScript gets called in the first place? Use of Alert() command perhaps?

Hi Kimmo,

Try to do this Put you PopupEditor_widget outside of link element, and do ajax refresh first for Link and after that for editor..

A different solution not so elegant, could be done using sessions. When you click button, update your session variables with the right values and you don´t need to pass any parameter to your popup screen. I avoid to use session variables , but this works .

Cheers

Fabio

no moving PopUp_Editor outside link element did not helped for the click() problem. Ajax still works though. See attached current implementation.

I also tried Wrapping both link and PopUp_Editor widget within same container while both nodes on the same level did hot help either… (this too is the attachment).

When pressing the additional button (that performs ajax and javascript), I can see 'Loading' text appearing shortly in the bottom right corner of the browser. But I guess that is related to Ajax refresh, not javascript doing the click().

No, using session variables is not an option. In fact this current proposal using javascript I consider rather a "trick" than elegant. I consider Popup_Editor should by default support current form values and consider reason being that PopUp_Editor requires action to be of type 'Navigation'. I come from a SAP world, where popups using input values from the caller form is achieved using normal development patterns.

Although I confess, that I am currently using session variables when passing selected room from the Popup_Editor  form back to original caller form, while currently I don't know how I could pass values back to caller form in notify-onNotify mechanism (because still learning) - though I am currently using notify-OnNotify mechanism between original form and and popup form.


Solution

Hi,

Here a working example: https://eduardojauch.outsystemscloud.com/PopupWithUpdatedParameters/HomeScreen.aspx

Attached the code.

Cheers

P.S:

In my first answer, there is a typo in the JavaScript. The first comma is after the #, but should be before.

Should be:

    "$('#" + yourlink.id + "').click();"
Solution

Ok, it was due to that typo in JavaScript in your original advice. I did not bothered to check it myself. Just corrected the Javascript and now also the click() works. It works even with single Ajax refresh for the link element only (no need to Ajax refresh the Popup_Editor widget) and the PopuP_editor widget can stay inside the Link element (as it was in my original screen). Tested all those 3 variations. I happened to have another button that calls the Popup_editor and that button is in the same form but in the beginning. That button still uses old form content - due to missing Ajax refresh of course.

Before I close this thread, I raised other similar issue in the original posting. I repeat it here with little extra explanation.

I recon, same issue would be present without Popup widgets. Maybe with Dropdown lists too? For example if a form has fields whose valuelist are dependent on each other eg. If in form field ‘table1.Field1’ value ‘1’ is entered by user (selected from valuetable tableX), then in form field ‘table1.Field2’ should only allow values where ‘Field1’ value ‘1’ is used as selection criteria on the source table valuetableY having field1 as a key. For example, in your form you'd have 2 fields Country and Postalcode. When user selects a country (from a dropdown), the postalCode field dropdown should only display those postalcodes that exists in the selected country. Should I open another thread for this question or possibly a solution exist in some other thread?

Secondly before closing, is there some technical limitation that Popup_Editor could not use Ajax Submit or somehow enable developer to define that PopUp_Editor widget could use current unsubmitted form content? After all, the form (field) seem to know the old and current content as the field has that 'undo' feature. A feature to be added into wishlist for next releases?

Hi Kimmo,

Sorry for the typo.

Regarding your first question about dependent fields, yes, you have to proceed in a similar way as here for the popup. You have to use an OnChange (typically) to call a ScreenAction and use the DataRefresh and AjaxRefresh accordingly to update the dependent field.

Didn't quite understood the second question thou...

Closing the thread, though Implementing the CSS for hiding the original Link element is still pending on my side.

This was my first thread in this forum. I have to say, that your support was extra fast. Usually in other forums you have to wait ages for getting some reasonable replies if get replies at all. And getting support directly from an MVP was awesome. Nice work (despite the typo).

Thanks Kimmo.

If you take a look in the example I send, I put a container around the link and used the property Display set to False (it will include the "display:none" in the div.

If you want to just put the CSS in the link, directly, you can do it in the Style editor like this :

Cheers