How to get actual values from each item in the List View?

đź’¬ App Building
1

I'm using a List View component to allow user to add any number of filter fields to the form which later will be saved as configuration and send to Backend. I mapped the filtersArrays to list view to keep all the structure and changed values inside. By clicking on Add Filter user creates a new list item with 3 select controls inside the list view. Each select control has its unique options list that defined in a separate variable.

filtersArray.setValue([
  ...filtersArray.value, 
  { 
    id: `filterForm${filtersArray.value.length}`, 
    title: `Filter ${itemId}`,
    fields: {
      filterType: {
        id: `filterType${itemId}`,
        fieldType: 'filterType',
        value: ''
      },
      operator: {
        id: `operator${itemId}`,
        fieldType: 'operator',
        value: ''
      },
      filterValue: {
        id: `filterValue${itemId}`,
        fieldType: 'filterValue',
        value: ''
      }
    }
  }
]);

I expect that the mapped ListView from the filtersArray by setting the following code to the select value {{ listView1.data }} or {{ filtersArray.value}} will return me the actual values that user selected to save the current state of each select value, convert it in the correct format and send to Backend. But in fact it shows only the default values that were defined when user clicked on the Add Filter button. Can you please explain what is the difference with ListView component and how can I get relevant values from each internal form?

image
image2294Ă—1402 439 KB

1 Like
2

Hi @MichaelT,

So if I'm understanding correctly, you are adding instances to your list view, each instance with 3 select fields that have different options, right? You're correct in saying that in your select component you can use {{ item.fields.filterType.options }} (assuming your list view has filtersArray as data source)

The error seems to be related to the select field options, which in fact you don't need to change as every instance will have access to the same filterType.options list.

I think that what you are looking for is instance values (which need to be enabled from the listView settings.

When you click on add filter, you simply need to add a new object to your variable with the default values (or nulls) for each select component, and within instanceValues properties you will be able to see what the user selected for each selectComponent within each instance.

I hope I'm not misunderstanding the issue. If so, would you mind also sharing how you are setting up your listView data source and what is it that you do when user clicks on "Add Filter"?

3

Hi @MiguelOrtiz, thanks for your response.

Yes, you are right. Actually after posting this topic I understood that as all the options are static and differs only by filter type, so I defined it in a separate variables per each type to make the filtersArray cleaner.

After that I encountered that I can't access values from the listView.data because it has the default value that was defined when it was created.

When you click on add filter, you simply need to add a new object to your variable

That's actually what I do. You can see in the first message filtersArray.setValue(), it is actually JS code which I'm triggering when user clicks on Add Filter. It has default values and the next step is to get the actually value from each select field of each list view item instance.

P.S. Seems like I should rename this post and edit the first message.

4

I found the answer after created some workaround. Maybe it will helpful to somebody.
Pay attention, that inside the ListView props there is one called Enable instance values - checkbox which is turned off by default for some reason. Once you switch it on you will be able to access the instances data like this listView1.instanceValues.

Read this topic for more information:

1 Like