Select Component Tutorial

Hi Sergey

I mostly figured out the method to populate a select list from the database, except for one issue.

My test consists of a test page based on the Country table that Mark uses in the tutorials. My test page has only 2 select boxes

image

The Page Entry looks like

image

The 1st select options…
image

The 2nd select options
image
Once the user picks a Continent in the first select box then the 2nd select should only show the Countries in the Continent of the first select.

image

As you can see, I am not getting a filtered list of Countries for the selected Continent. Considering that the User could pick any Continent, means that setting a filter for Countries in the ‘On Page Enter’ would not work.

How can I get this to work?

I now tried something else. I moved the jigsaws for selCountry from ‘On Page Enter’ to ‘On Change Event’ of selContinent. There seems only one problem. The where clause jigsaw will not attach. Am I doing this correctly?

image

Kind Regards
BruceX

Hello @Bruce_X

Yeah, you are on the right way.
But, you use wrong block to compose a where clause string. The block on your screenshot is an expression block that’s why you can not connect it to the where clause input.

Instead, you have to use this one:

Regards, Vlad

Hi Vlad
That worked really well. Just 2 more points now.

  1. The drop downs do not seem to have a scroll bar.
    image
    How do I get a scroll bar?

  2. A minor point - the text Select Country gets slightly obliterated, ideally it should show clearly so the user knows what they are selecting.

btw, I really like the quick support, it is really moving me along.

Kind Regards
BruceX

  1. Are you sure there should be any scroll, perhaps there is enough place to display all the list items? Monosnap
  2. Yeah, we aware about this, however, this out of our control since under the hood MaterialUI select is used.

Hi Vlad
Scrolling is needed, I should be able to scroll all the way to Zambia and Zimbabwe, which are African countries.

In your monosnap you manage to scroll without a scrollbar. I went back to my select box, but it will not scroll. In your monosnap your pointer changed to a circle, mine stays as a hand.
I am not sure what to make of that.

But I presume that your answer means there is no scroll bar, what can I do??? Users are used to scroll bars which why backendless uses it for the ‘Add Block’ drop down in the Logic design screen.

image
BruceX

No, I meant that there is should be a scroll if there is not enough place to display all the items in the list.
On my screen there is no physical scrollbar because this is specific of MacOS, for instance on the same screen you share I do not have scrollbar either, but it can be scrolled

Could you please share a link to your preview, I will try it from my side

Vlad
I see, I am on windows 10. There is not enough space for all the countries, so there should be a scroll? Not sure if you mean there should be an actual scroll bar or some other scroll mechanism, but either way, there seems to be a problem. Are you able to replicate this test on Windows 10?
Bruce X

There is not enough space for all the countries, so there should be a scroll?

I think so =)

Not sure if you mean there should be an actual scroll bar or some other scroll mechanism, but either way, there seems to be a problem.

Yes, it looks like a problem

Are you able to replicate this test on Windows 10?

I will try on mac and if I can’t reproduce it I ask some one from the team who has Windows

Hi Vlad
You are going over and above (which is good).
The answer will probably benefit all your user base not just me, I look forward to our findings.
BruceX

1 Like

thanks, but I guess you missed my previous comment:

Sure
When you open the link focus on…

image

https://backendlessappcontent.com/65C3C696-81FC-DB1A-FF40-2B2B4CEF7000/9C32FD9A-6FAD-483D-BE4C-2F0ABD1CA8D7/files/ui-builder/containers/default/index.html?page=Masterclass2

I’ve found the problem

The list displays all the 10 items items actually, 10 - because you request only 10 records (by default) from the server, try to increase the value to 100 in your Codeless logic

Vlad, well done, solved.

I changed the page size to 100 and it worked, I got a scroll bar.

There are 58 countries in Africa in Mark’s table and they are all in the list.

The only thing and it is minor, and you may want to leave this one, if I set the page size to 200 then the countries will not list.

image

Weird. I have left the page set to 200 if you wish to have an inspect.

Is there a way to make the page size unlimited or to set it automatiacally to the number of options?

BruceX

No, maximum pageSize is 100.
In order to get more you need to build logic for loading all of them in a loop and in each iteration load up to 100 objects.

Btw, in Pro or Manage installation this limit might be changed

I get it, and thats ok, thank you very much for your help, Now for the rest of the masterclass.

Good suggestion.

Hi @Marina.Kan, it’s probably because of the age of the posts but both of these Monosnap recordings seem like they’re no longer available. Any chance you can reshare or point me toward another video that covers this?

I’m having trouble extending these examples to populate a select field using the distinct values from a relation field in a table.

Hello @James_Hereford

Please have a look with the topic - How to populate the Select Component with dynamic data in UI Builder.
There is a description and also a video, maybe it will be useful to you.

Regards,
Volodymyr

Awesome, thanks so much Volodymyr. I’ll check that out today.