Select Component Tutorial

Bruce_X · February 14, 2021, 11:18pm

Hi
This is more a suggestion than a problem. I have done a few of Mark’s tutorials and they are really good and ui builder is impressive. But as soon as I attempt to go into new territory of my own, it seems there are hurdles. For example, I am trying to build a single page web app that has 3 select components and a text area component.

Trying to find a tutorial that shows how select components work has been frustrating. And I have still not found it. Knowing Mark, and how comprehensive his tutorials are, I bet there is one.

Can you point me to it please.

But here is a suggestion that I believe you should find invaluable.

Sprinkled throughout the UI Builder design interface you should put links to Youtube Tutorials that, somewhere in the tutorial, the topic being looked at by your user is being addressed or touched upon in some way. And you could have 2 or 3 links if there are multiple tutorials that touch upon the topic.

For example, the Select Component,

Hopefully you manage to pick up on this, it will make UI Builder far more penetrable for developers at my, or similar, skill level.

Kind Regards
BruceX

viktor.liablin · February 15, 2021, 9:34am

Hello @Bruce_X

I’ve found a video where Mark works with the component select. Hope it will be useful.

Regard, Viktor

Bruce_X · February 15, 2021, 11:01pm

Hi Viktor
Thank you for the quick reply. The select in this video is for a known list of options, I was hoping to know how to populate select options more dynamically from values in a table.
Cheers
BruceX

Marina.Rudenko · February 16, 2021, 12:08pm

Hi, @Bruce_X

You can populate select options from values in a table by following next steps:

On the Page enter Handler load your table. Pay attention to the value property. Monosnap
Add select component on the page;
Add Options Handler logic to the Select component. Options logic must be the same value as from the Page enter Handler. Monosnap

In the result you get values from the desired table and column.

Regards,
Marina

Bruce_X · February 26, 2021, 10:29pm

Hi Marina
In your example you use the City table and set a property called ‘items’, and then put ‘items’ in the Option Logic of the Select box. The column name in City is called Name, so I cannot see how ‘items’ targets Name to be in list of the Select Box. And when I followed the above steps, nothing appeared in my Select list.

Can you please let me know what I am missing.

Thanks
BruceX

sergey.kuk · March 1, 2021, 10:22am

Hello @Bruce_X

please provide your application id and we will connect to your app and check how you have configured your Select list

Bruce_X · March 1, 2021, 10:50pm

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

The Page Entry looks like

The 1st select options…

The 2nd select options

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.

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?

Kind Regards
BruceX

vladimir-upirov · March 2, 2021, 10:26am

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

Bruce_X · March 2, 2021, 11:05am

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

The drop downs do not seem to have a scroll bar.

How do I get a scroll bar?
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

vladimir-upirov · March 2, 2021, 12:03pm

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

Bruce_X · March 2, 2021, 12:19pm

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.

BruceX

vladimir-upirov · March 2, 2021, 12:29pm

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

Bruce_X · March 2, 2021, 12:35pm

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

vladimir-upirov · March 2, 2021, 12:44pm

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

Bruce_X · March 2, 2021, 12:46pm

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

vladimir-upirov · March 2, 2021, 12:47pm

thanks, but I guess you missed my previous comment:

Bruce_X · March 2, 2021, 12:51pm

Sure
When you open the link focus on…

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

vladimir-upirov · March 2, 2021, 1:00pm

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

Bruce_X · March 2, 2021, 1:47pm

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.

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

vladimir-upirov · March 2, 2021, 2:03pm

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.