Select Component Label

Hi,
I’m trying to use a select component to create a (dynamic) list of items. (user selects from select component, presses button, list populates) I can create the select component with options and a button to update the list, but the only thing I seem to be able to populate the list with is the objectId of the item. Is there a way (without making a database call each time an item is selected) to get the ‘label’ from the selected component? It did work for me once, but I am unable to re-trace my steps. I am using the “CRM” template (with the included functions). I must be missing something obvious.



image

Hello @Neil_Campbell

Short answer to your question:

Is there a way (without making a database call each time an item is selected) to get the ‘label’ from the selected component?

Yes, you could iterate over select options, and find a needed object by comparison of objectIds. And after that just get a label.

I must be missing something obvious.

image
I am not sure what has been stored in Selected PPE List, but when you try to get value of select, you get a string value. And I am not sure, your logic implies it.

image
Here you are set a options - which should be an array(list) of object with schema:
{ label: <string>, value: <string>}
And it’s correct and works in the right way. But for Set Value we must use a string value, not the same object as at options.

image
Also here might be not a string

So, the problem is located at many places, and I can’t advise you something specific

But, I strongly recommend our youtube channel as source to learn how that should works

Regards, Dima

Hi Neil,

This question comes up rather frequently. I just wrote a mini-tutorial explaining how to populate the Select component with dynamic data. You can find it here:

Regards,
Mark

1 Like

Thanks Mark and Dima for your quick responses. This forum is one of the reasons that I’m choosing to go with Backendless. Thank you Mark for the tutorial - I read through it and I will bookmark this for future reference as well.

I can get the desired response by using the objectId to call to the database to get the other properties of the selected item to populate my list, however there is a noticeable delay in the round trip between each ‘click’ and ‘response’. I would prefer to take the label from the pre-prepared ‘select items list’ (ppeSelectIList) and get the label text from this. I’ve already created this list for the select component on Page Enter, so the data is local and I should be able to re-use it? (it’s right there on the screen) If there was a “Get Label of Select” logic component – that would be all I need.

I’ve tried what I think you call the “iteration” method (see screen below) and re-watched Mark’s video on List Transformations, but I’m still not getting it. The label I’m trying to return is a string (“name”).

Apologies, I know it must be frustrating having to deal with these types of simple queries, but I have been wrestling with this for over two days now and tried many, many attempts.

I have a few questions for you, @Neil_Campbell :

  1. What objects does Select-PPE-List contain? What is the structure of these objects?
  2. Could you add a print statement inside of the Filter items block and print the item variable? What do you get in the Browser console? This would actually answer the previous question
  3. What do you need to get done? Don’t describe algorithmically, instead describe the actual end goal of what should happen when the click event occurs.
  4. What component is it the click event for?

Regards,
Mark

Hi Mark,

  1. Here’s the table
    image

The structure of Select-PPE-List should be simply: Value = “objectId”, Label = “name”, from the following…
image
Functions (pre-existing in “CRM” Blueprint”)…
image
image

  1. The console is only returning the word “item” 14 times (the number of items in the PPE table)...
    

image

  1. The page will be for managing employee details and recording what PPE (Personal Protection Equipment) is issued to an employee. I want the user to be able to select from a Master List of available PPE items (select list), to build an individualised list that then, in turn, will be saved against that employee’s record.

  2. The Click Event is a button. To try and trouble-shoot this, I created a new blank page with just the basic components: select, button and dynamic list with input field:

I hope I’ve understood your questions correctly. Appreciate you taking the time.

Thanks, Neil, it helps. When a PPE is selected in the list and a button is clicked, do you want to avoid going back to the database and use the object that is already loaded from it? Please let me know if I understood the intent correctly.

Regards,
Mark

I think that would be best. When making a call to database each time a selection is made, there is a noticeable delay between clicking and seeing the list populate. Ideally I’d like to load all data for the page on Page Enter and then the page performs best. I’m in New Zealand, so a round trip to the US servers is appreciable. There might be another way to pre-load the data. I could experiment with other methods. I just thought if the data is there (in the select list), then it should be simple to access that.

The data is already there, but the result of the filtering function drops it. It is getting late here in the US, but I will show a solution in the morning.

Regards,
Mark

Hi Neil,

This is how I’d handle it:
UI Builder - ConsoleDemo - Backendless 2022-02-03 18-11-07

This logic would go into On Page Enter - you already have the top portion, the one that retrieves the PPE records. What happens later in the logic is we iterate over the ppe records and create a map between an individual ppe objectId and the PPE object itself.

Finally, we store that map in Page Data (or you could store it in App Data so it is accessible by all pages.

Later on in the Select block, when you need to retrieve a PPE object for a specific selection, you do the following:

Hope this helps.

Mark

I’ll give this a go.

Thanks for taking time to help me, Mark. Appreciate it.

This is strange. Has something just happened in Backendless to the Select component? It’s no longer populating with anything. I’ve stripped a blank landing page back to just On Page Enter logic to populate the component and it doesn’t receive the list. I’ve tried different data tables, replacing the select component, refreshing the browser and creating a new page to test. There are no other components or logic on the page. Did I break something?

image

image

image

AP ID: 54736C1A-0CB6-C889-FF85-CC1259D08F00

Page: SelectTest

Use the print block to see what ppeTable and ppeList variables contain.

I get this:

Are you stuck or this gives you an idea of what went wrong?

Yes, I’m stuck. I interpret this error to mean the data I’m trying to receive should be a string. The column “name” from PPE is a string. This was working up until about an hour ago.

Would you like us just fix your logic or guide you through the fixes?

I would love a guide. This seems like such a simple thing, but I have absolutely no idea what the problem is. I might have to start school over.

Problem 1:
In the On Page Enter logic you have this:

There is no value for the propertyForlabel2 argument. However, in the getListForSelect function, you do this:


As a result, you get the error you’re getting.

Problem 2:
In the On Page Enter logic you have this:
UI Builder - chainstorage - Backendless 2022-02-03 21-31-24

Notice there is no value for the initLabel argument.

Yet, in the getListForSelect function, you do this:

Inserting the uninitialized value unconditionally. This is not good.

I cloned the page and made the fixes so you can see how to get it to work. The page with the fixes is called selectTest-MP.

Regards,
Mark

Thanks for the lesson, Mark. That’s fixed it.