How dropdown input field event property works

I’ve setup my dropdown field so as to trigger immediate update data record upon changing the value in the dropdown list:

But, the ‘selected value changed’ (or even the ‘selected label changed’) event is triggered anyway on page load (the page displays the success toast message). Why is that? Is that a bug?

UPDATE:
Selecting the ‘page var changed’ event does not help, I see a confirmation toast (‘country changed’ or ‘currency changed’) on page load.
Yet I only make a change to the page var when selecting a new option since the field value is bound to the very page variable.
image

Now asking the team to confirm if I should report this as a bug in your bug report page.

I´m guessing its triggering initially as the page builds. I think it will initially be null until it reads the value into the field from the variable. Put a looping delay in there until its not null, or a simple 50ms delay.

I have a delay of 100ms on all my pages now, it just makes for much more consistent behaviour, especially when data is being collected from Firebase.

1 Like

Exactly, as @Phil_Evans mentioned. Each of the components starts with undefined values and all of those are populated immediately after the “Page mounted” event before any other logic could happen. What You could do here is to do an IF flow that would check if the current value of the dropdown selection is the same as the one that You had from the data resource previously. If Yes, then do not do anything, if different, then go and update the record.

1 Like

@Phil_Evans
Good idea gents but my test is not successful.
I check if BOOLEAN(outputs["Receive event"].eventValue==null) is true (then loop) or false then move forward but I get 4 messed up toasts (2 empty black, 2 duplicates) as I load the page.


Something wrong in the formula or the flow?

No, check the value of the variable, not the event

Thanks but sorry gents,
Too little progress: on page (dropdown field) load, no more buggy duplicate black toasts.
But for the rest, it’s a total mess, I don’t get it.

My country IF condition has this:
BOOLEAN(pageVars.providerDetails.country==data.getProvider.country) || BOOLEAN(pageVars.providerDetails.country==null)
IF true, then stop, if false (means there was an update from dropdown) then Update record.
My currency IF has:
BOOLEAN(pageVars.providerDetails.currency==data.getProvider.currency) || BOOLEAN(pageVars.providerDetails.currency==null)
(all input/dropdown fields are bound to pageVars)

Look at the video and have a laugh. Plenty wrong toasts and only currency is updated in frebase!

Excruciatingly complicated for a simple dropdown field setup in nocode environment I must say…

Can you go back to your original and simply insert a delay of 100ms? Perhaps start with it as high as 1 second, then if that works, reduce it down. I always just go to extremes when testing to try and get definitive results.

This then gives the page time to load properly and it may work as you expect.

It may be that null is the wrong thing to look for - undefined may be better. But try the delay first.

I tried the delay first before following @Mihaly_Toth suggestion. Didn’t help.
It does give time to load the value to the variable but it shows the annoying duplicate black toast. Feels like there’s a toast triggered when the whole pageVars is updated, regardless of the value that’s actually changed. This is wrong since only the value ‘country’ of pageVars.providerDetails.country and ‘currency’ of pageVars.providerDetails.currency are updated.

I will try undefined. Thanks.

1 Like

image
Other than finding out it returns a null response, no progress, I’ve never been so much stuck on a simple function after 2 months of learning/development.
I could give up on the currency dropdown (coz user is not supposed to play around with a set currency) but I can’t give up on the country (user may have hastily entered the wrong one or have moved) and this worries me.
I still consider that the dropdown field and/or its ‘value changed’ event have not been properly built. This event logic should not check what’s happening in the background (there are other event logics for that), but rather only check when/how the user interacts with the field. That’s how it works with other nocode tools like Wappler, Bildr, FlutterFlow (sadly too expensive), enabling me to build the same function in 10 minutes instead of in 1,5+ day.

Or maybe I need to learn how to “rebuild” this component…

Okay, so let’s break it down. There is a change in the dropdown value. You assign the new value to the updateProvider data variable and then check an If. (btw, you do not need the boolean formula as the == operator returns a boolean…) In if you check if the current value of a page variable is the same as the one that you got from the database. Then if it is not empty OR not the same then you update the value with the updated data record, which already has the new value.

Issues can be:
your if the condition fails because of the OR as if there was no currency, or country set earlier that evaluates to true.
Why do you need to have 3 different variables for 1 single input field? get, update, page? There must be a way more simple way of achieving this. I’ll get back to this topic later…

Its frustrating I know. I got stuck on a few simple things along the way too. GPS location gave me loads of grief, but I got there. I would suggest breaking it right down. In very general terms I´d do something like this;

Have a dropdown with 2 static values, A and B. When the user changes it from A to B have the event trigger show a toast.

Then add in writing those values to your database. Make sure that’s not a factor.

Then add in first reading the values.

Then add in your second variable.

Clearly it doesn´t work how you expect or its documented, but it will work in a fashion, it just needs reverse engineering to find out how. It will require persistence and a dash of good luck.

I thought currency and country, which are set in previous page, necessarily evaluate to true when checked in this formula of the IF condition:
(pageVars.providerDetails.country==data.getProvider.country) || BOOLEAN(IS_NULL(pageVars.providerDetails.country))

You mean:

  1. Get data var (which retrieves data from resource)
  2. Create data var (which updates data)
  3. page var (used as a placeholder)?

That’s what I did actually in the first place. The genesis (earlier than early! :grin:) even started with a simple input field instead of dropdown. Get and Update worked well. Then I added a button next to the dropdown field that triggered the Update record flow function. All worked well.
The switch to the property ‘selected value’ changed event is when it messed it all up.

The currency flow enables update but still give me unwanted toast at load and after update.

Have you tried adding throttle and debounce? It sounds like its running multiple times, some of them unexpectedly. If I get some time tomorrow I will copy some logic from mine to show how I´m doing this sort of thing.

Add a page variable of type integer in, and display it in your toast. Increment it every time it runs. That will show you how many times its running.

Okay, I might just not understand the error. But here is a simple setup that works just fine if the dropdown value is not bound to a page variable.

No need to have a separate data record “toUpdate” and another one “getData” and another page variable that is between the two.

You sure can have a page variable as in most cases that is very useful.

What I suggest doing is:

  • get record
  • set page variable
  • on the drodpwn field have an IF(self.value==data.getRecord) - true: do nothing, - false update record flow and show toast. In the update record flow just set the required property to the pageVars.dropdown value of Yours.

Id this still throws unexpected toasts or updates I’ll check again.

Note this:
You could in fact leave out the selected value property completely and set the selected label property to the label that would be the selected value’s label if that was a property of the getData. The dropdown would work just fine even then. So you could keep your logic as simple as mine above, just bind the update logic specific property to a formula and inside there write this: self.value

This would update the record if there was a change in the dropdown to the soecific value that You need.

Not sure how to use debounce.
Correct, it is running multiple times, as I can see from the Chrome Dev Tool. Check the new video I captured:

Oomf… let me digest all that :thinking:
I do not understand this part.
My dropdown field expects a value, but you’re suggesting an IF and action.

My suggestion is to leave that empty. :sweat_smile:

Sorry man, the only thing I understood is indeed the reason why there were double toasts and operations: value and label both bound to the pageVar.
image

Other than that, I did not understand a thing, even after coffee :sweat_smile:
This:

Okay, it seems that with the help of @Phil_Evans’s idea of Debounce I got it working.

Have 1 page variable which is connected to the dropdown selected value property:

See the flows here:

  1. On page load I get a data record that I want to update, assign the specific value to the page variable (as I usually do, on the main logic canvas of the page):

  2. On the dropdown field I have this logic:


    Let’s break this down:
    IF:

data.getData.client.name==pageVars.drrodpwn

*Don’t mind my typos, it was just for quick example…

Debounce settings are the default, no need to change anything.

And this is my update record flow. The field “name” is updated with the value of the dropdown selected value.

That should be it. I mean, it worked for me a few minutes ago. No unneeded toasts, only 1 toast after update is done.

2 Likes