Select 1 module and pulling value from a query

[pete82]

Hi all. Just have a question when it comes to modules in web app vs modules in Mobile App.
In the web version I have a select 1 drop down box that has a data source set to one of my queries.

Query = SetTicketType
Its an API call that responds with various options. In this case there are two.

Example of the data of returned.

The Dropdown Module on our web version we are testing has the Data source pointed to the query above with a value of {{ item.Description.Standard }}

When the drop down is selected the user can select from any of the returned items from the original Query.

Here is where we get stuck
We were then trying to emulate this using the mobile App Verion rather than running it as a web app to see what performance and usability would be like.

Within this i have the same API Query used in the web version shown above which returns the same data as expected.

I then added a Dropdown Module but the options are set up far different to the same module in the web version.

How can i emulate this on the mobile version using the select 1 modules

I tried to use
{{ SetTicketType.data.Description.Standard }} or
{{ SetTicketType.item.Description.Standard }} or a mix of both

So far have not been able to achieve this.

Anyone able to point out where i am going wrong?

Cheers

Cheers

[pete82]

Any chance there are retool experts working with the app based version that can take a look?

[Jessica_D]

The values returned from the query will be in the 'data' field. You need 2 values for each selection, the value (the id value that is used by the application) and the label (the text that is displayed to user)

[pete82]

Hi Jessica.

Thanks for looking into this.

So to confirm ....

In the Web version of the Select1 Module i have
Data Source set as : {{ SetTicketType.data }}
Value as: {{ item.Description.Standard }}
Label : Blank

In the Mobile App version of the select module
As per your guide this does in fact work

However this method required hard coding set list of labels and records where i really hope to find a way we can make this dynamic as per the web version of this module as the options i am bulling in will not always have the same name or the same amount of options depending on when the query is run etc.

Thanks again for the help

[Jessica_D]

Can you share some sample data of what is returned from SetTicketType? If it had for example two columns that stored the value and label like this:

ID, Description
1, Option 1 Description
2, Option 2 Description

Then in the value you would put {{SetTicketType.data.ID}} and in labels you would put {{SetTicketType.data.Description}} to dynamically pull the values from your database. You shouldn't need to reference a specific index [0].

For example,

Setting up the select:

Select box looks like this:

[pete82]

Hi Jessica

In this instance i have an array of 5 items returned SetTicketType.data however if i run this tonight or tomorrow for example that could be more or less.

Now if i expand "0" i get the following

I would like to list the five items associated to Description.Standard dynamically rather than against fixed labels etc.

Thanks again for the help

[Jessica_D]

This is an example data structure of my returned object:

getCodes.data looks like this:

So I can refer to my items as getCodes.data.label for example.

I am wondering why you have an array being returned.. can you show your query and the result in table? You might need to adjust your query/use a transformer so that the data is returned in a way Retool can process it better.

[pete82]

Hey Jessica,

Thanks for the help.

The query is a simple api call to list all products within a family.

a Sample response looks like this

When i use the webapp version using SetTicketType as the datasource for the select1module and item.description.standard as the value i can pull all the names for standard for each returned item.

Don't see the ability to add a table in mobile app so have not provided screenshot for that. Sorry

[victoria]

Hey @pete82! Happy to continue helping here and thank you for getting us started, Jessica

TL;DR, try this in the Values section:
{{formatDataAsObject(SetTicketType.data).description.map(obj => obj.Standard}}

---

The Select component in Retool Mobile is an older version of our Select component in Retool apps. The Mobile Select accepts arrays of values for the values and labels sections, unlike the regular Select that accepts a data source and kind of "automagically" populates the rest.

Since your data is an array of objects, you should first transform it into an object of arrays by doing this:

{{formatDataAsObject(SetTicketType.data)}}

Which should give us an object of arrays like:

{id: [1,2,3], description: [{Long: '', Notes: '', Standard: ''}, {Long: '', Notes: '', Standard: ''}, {Long: '', Notes: '', Standard: ''}]}

We want to grab the description array, so we can then do: {{formatDataAsObject(SetTicketType.data).description}}

Now we want just the description's standard values in an array (which is what the dropdown component expects for the values or labels):

{{formatDataAsObject(SetTicketType.data).description.map(obj => obj.Standard}}

Let me know how this works for you!

[MRConcept]

Hi, I am getting same sort of issue. Any update on when the "new" select component will be availble on mobile app so it works the same way ? I need to access the "label" and the "value" of a selected item on a mobile app, but I can't figure out how.

[MRConcept]

Found a workaround because I found out problem is select component on mobile app is not the same as select component on web app. My turnaround is to create a query to select from the reference table the id (which was my value) and then take the result and put it in input of the update query!