Make code studio widget not submit when hidden

I have a code studio widget called Companies House Lookup which is essentially the Loqate Address Lookup but instead of looking up an address with Loqate it looks up a Company with Companies House. Because Companies House is a UK database I want to display this widget conditionally based on whether we are entering a UK company and I have a visibility requirement which does this based on a field in another form on the page.

I have noticed that the data in the widget is saved on submission regardless of whether the visibility requirement has been met. Is there a way in the code studio to tell whether the widget is visible or not so that I can change this? I can’t see this information being returned by the available methods for the “widget” class.

Hi Dylan,

I see this is your first post to the forum. Welcome to the Community and thanks for posting the query.

I understand you have already tried finding it in the returned data by the available methods for the ‘widget’ class. I am going to try and replicate your scenario and will come back to you soon with a suggestion.

Regards,
Asif

Thanks Asif,

To be clear, if the widget is hidden the fields within in the widget will be interpreted as empty, but will still submit. If I have, for example, two loqate address lookups on the page and a rule to make only one visible based on a boolean, the second is submitted when it is not visible leading to blank values being saved. At least, that’s what appears to be happening.

Thanks,
Dylan

Hi Dylan,

Although there is no right or wrong answer in this scenario but here is a suggestion you can apply to achieve what you are trying to do. Firstly I tried your use case placing two fields in two different widgets on a test page. One or the other widget showing/hiding based upon a boolean value i.e. Price-1 and Price-2 (same as your Locate 1, locate 2 lookups)

As you can see from the ‘Payload Headers’ in the following screenshot (when the Price-2 field was hidden): it does NOT seem to submit the Price-2 value. Please note that Price-2 was hidden in this scenario. I believe that is expected behaviour.



Having said above you can put an extra safeguard check within your code i.e. a check to see if the value submitted is a NULL. I haven’t seen your code but I suggest your code should be checking against the values filtering out any empty values and then saving it. In other words before you call the function ‘cs.save()’, check against the empty values.

But as I suggested in the initial paragraph it does not seem to submit ‘Price-2’ if it is hidden based upon whatever condition you apply to hide/show a widget.

Hi Asif,

I did think of doing what you suggest regarding null values, but the page in question is an edit page as well as an add, so blank values can be a valid input.

I believe that my case may be working differently to your example as I am using code studio widgets, another difference, if I have understood your example correctly, is that while you are setting Price 1 and Price 2 which are different properties, my two widgets are attempting to change the same object properties.

I have set up a more simple example in order to demonstrate this. My page is as below, where all that is on the page is a boolean, two loqate address lookups, and a submit button:

When I submit this page, if the first loqate widget is visible (with button Search 1) blank values will be submitted by the second. If the second loquate widget is visible then the values that I have entered will be saved as expected. I can see that the prepare_save_data method is being run for both widgets regardless of visibility as I can see this in the logs. I assume this is what is causing the problem, hence my question of whether there’s a way that I can check from the code studio whether the widget is visible on the page so as to amend this method to account for that.

Thanks,
Dylan

Morning Dylan,

I am the author of the Loqate widget on which your work is based.
We had a similar issue with Croydon council and having two of the same widgets on-screen each being enabled or disabled for a different scenario.
A decision was made by the company not to attempt to ignore the save_prepare_data for the disabled widget in preference of the developer bypassing the function as and when required.
We utilised a mandatory field, postcode to skip the save.

if (payload.postcode === undefined || payload.postcode == ‘’) { cs.log(‘Exiting’); return {}};

Thanks Adam,

That’s actually pretty much the workaround I had just landed on. Some of the fields are mandatory so I figured I would check if all values are empty and submit nothing where that’s the case, though you’re right, just going off one mandatory field would also work.

I’m happy with this as a workaround.

Thanks,
Dylan