Change state of item in list from slot index value


#1

Hi!

I have a list of components - a series of questions and answer boxes - and I want to have a single list item to be ‘open’ at any time, based on an index value in a data slot. So if the slot value is 3, question box 3 shows an answer text field but the others cllapse to just show the question.

My individual components have 2 states to show or hide the answer field, but how do I set the right state on each question, both initially and when questions are clicked on?

Loving React Studio by the way - a huge head start in getting stuff delivered!

Ed


#2

Hi,

I’ve never thought about this kind of scenario but if you really need to set the “selected index” via Data slot then you have to have the index column in Data sheet as well. With Index value I’d just change the list row state based on the value in Data slot. If the value matches to the value in Data sheet then show state with question and answer visible; otherwise just show the “plain question” state.

Something like this: https://neonto.cloud/preview/d8zyawz8

Set the Data slot value by inputing value 0-2 into textfield.

Download the example project file here: https://s3.amazonaws.com/sc.neonto.com/example_projects/QA-list-index.rsproj.zip

P.S. You can use Hide/show interaction for showing and hiding answer component If you simply need to show answer when user clicks Show answer button in specific row. This does not work if you need to show the answer based on index value in Data slot


#3

Thanks Antti, that would work!

Is it possible to programmatically create that DataSheet - I want to populate it by processing a template containing question tags, so can supply an array of objects in the transform script. But the script only takes a single row to transform.

I’m assuming we’re well off the typical Studio use case here…

Ed


#4

You can create Data sheets programatically but you need first to create the “skeleton” Data sheet in Studio then just remove all items from Data sheet with a script and populate it with your own array. This may lead into issues when you’re linking data because Studio might not be aware of all columns on your custom sheet…

Check code snippet for accessing Data sheet and then just make your own magic in the script.

Note that you can fill the list with Items array setting. This means that you can fill list even without having a data sheet at all.

This post might help you to get started : https://medium.com/@reactstudio/using-a-script-for-filtering-sorting-list-in-react-studio-ec0a5244719e


#5

Thanks Antti, really appreciate your time helping here.

So I can pass arbitrary objects in an array in the filter/transform, including the data index of each row?

Also curious - what is the effect of the ‘Data linkage for individual properties’ selector on the Nested Comp tab?

Ed


#6

Items Array can be used exactly for that. Just check the code with Code glance button for your screen and adapt your Array to work with the implementation in the generated code. Note that when you create Array in the script the Studio’s design canvas will not try to render the list. The list is rendered when you generate the code and ru the app in Browser. The Studio’s Design canvas is never “the ultimate truth” of how app looks, you should think it as sort of blueprint and then check the generated code of how it’ll really look.

Data linkage for list item is for setting which data is ‘sent’ to list item component properties. By default the linking is matched by column name in the Data source Data sheet but in some cases you want to set the linkages manually.

For most questions you can find answer by checking the generated code and figure out how your custom solution could fit into that.


#7

I made a quick test with items array and it seems to work. See screen shots below:

Created itemsArray prop for the screen and set that to the “Items Array” drop box in the list/grid settings panel. Then created a script which adds two objects for the array.

Finally created item component with two text labels linked to properties matching the objects in the array created in the script.

Finally this is what Browser renders

Download the example project file here: https://s3.amazonaws.com/sc.neonto.com/example_projects/ItemsArray.rsproj.zip