How to force a location.reload() on a catalog item when a specific field changes?

[Sacha_77]

Hi community,

I have a business case where the requirement is that the portal page reloads when the value of a specific field on the form changes in order to clear out any made entries.

Suppose there are fields "a" and "b" on the form. The pseudo code goes something like this:

• If the value of field "a" is empty, then do nothing.
• If the value of field "a" is not empty, check whether the new value is not equal to the old one, and if so, reload the page.
• If "b" changes do nothing.

My first approach was a simple onChange Catalog Client Script for field "a" with code similar to this:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    if (newValue != oldValue || newValue != '') {
        location.reload();
}}

Experienced developers will immediately note here that there will always be a reload because there is no oldValue for field "a".

My second approach was to add a hidden variable on the form that first stores the value, made this field read only and then compares the hidden field value with the newValue. The code then was something like this:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    if (newValue != '') {
        g_form.setValue('hiddenVariable', g_form.getValue("a"));
        g_form.setReadOnly("hiddenVariable");
    }
    if (hiddenVariable != newValue) {

        location.reload();
    }
}

However, this also leads to a permanent reload, since the hidden variable is overwritten despite the write protection.

Is there anyone here who had a similar problem and was able to solve it?

Thanks for your help!

[Ratnakar7]

Hi @Sacha_77 ,

Instead of using a hidden field to store the old value, you can use the browser's session object to store the old value and then compare it with the new value.

Here's an example of how you can modify your onChange script to achieve this:

function onChange(control, oldValue, newValue, isLoading) {
  if (isLoading || newValue == '') {
    return;
  }
  
  var session = gs.getSession();
  var lastValue = session.getClientData('lastAValue');
  
  if (newValue != lastValue) {
    // Value has changed, so clear sessionStorage
    session.putClientData('lastAValue', newValue);
    location.reload();
  }
}

In this example, session.putClientData() is used to store the last value of field "a" as client data on the session object. Then, session.getClientData() is used to retrieve the last value when the field changes. If the new value is different from the last value, session.putClientData() is used to update the last value and location.reload() is called to reload the page.

If my response was helpful in resolving the issue, please consider accepting it as a solution by clicking on the ✅Accept solution button and giving it a thumbs up 👍. This will benefit others who may have a similar question in the future.

Thank you!

Ratnakar

[Sacha_77]

Hi Ratnakar,

Thanks for your help! Your approach sounds good, but gs.getSession() won't work on a Catalog Client Script as it is used for server side scripting...😕

Greets Sacha