Anyway to create components dynamic?

[dinkok]

I want everytime i hit add row button to create another container dynamic can anyone give me any solution thanks

[Matt_N]

Hi @dinkok

Here's a basic example using a List View under the 'Repeatables' components:

Create a variable (arrListView in my example) with the initial value set to an empty array

Create a JS query that adds items containing a name and number element to the array based on the current length of the array.

Set the Data Source of the List View component to your array variable,

And then add your container with desired components to the List View and reference item.value for each (in my example, it's just a container with title and a text component displaying the length of the array).
List View:

Container Title:

Text:

Finally, create a button that calls your JS query, and the elements should begin populating.

[dinkok]

Thank you so much I need to do it I want to achieve to add rows for invoices so in those rows I'm going to add inputs where I put items and prices and total

[Mai_Mosad]

@Matt_N
How can i delete it

[Matt_N]

I can't find the thread at the moment, but I believe I got this solution from @bradlymathews, and I have used it A LOT (so, thanks! @bradlymathews )

If you're looking to delete individual items from the List View, you can add a button or icon to your List View body, and add an event handler that runs the code below. Change arrListView to whatever your array name is.

let temp = arrListView.value;
temp.splice(i,1);
arrListView.setValue(temp);

Essentially this temporarily saves the array, slices out the selected item, and re-saves the array without it.

Let me know if you need more detail and I can try to grab some screen shots this afternoon.

[dinkok]

I did it with filter method array after filter is returning new array I populate array where I'm saving items with results from returned filter array and use it but I think its not that good of solution I will try your solution

[Mai_Mosad]

@Matt_N
why listview2 undefined?

[Tess]

Hi @Mai_Mosad,

I'm not sure yet, but it may help if you can share an app export or more screenshots

[Mai_Mosad]

Tam.json (91.9 KB)
when click add budgets
llistview nested when add or clrear not working well @Tess

[Grant_Humphries]

@Matt_N Thanks so much for this. It's gotten me a good portion of the way there. But I'm still a bit stuck. I've looked at other examples and documentation but it seems to be that they are only good for the legacy version of the tool (i.e., in terms of setting the length of the list view, which you can't seem to do in the latest environment).

I've got a series of components that need to be kept in memory so I can delete the lines in place.

I've followed your example from Jan 29 to the letter in this case with the exception that this is a select component.

I then used this chunk of code to delete the lines...

@Matt_N

let temp = arrListView.value;
temp.splice(i,1);
arrListView.setValue(temp);

A few things. First, all this seems to do is delete the last instance (here, I've clicked on the top "delete" button, but you can see that it's the last line that gets deleted).

Furthermore, if I click any of the delete buttons a second time, the entirety of the data get reset.

Finally, the other problem I'm facing here is how to access the data from the list view. My understanding is that you reference it by going {{ listView2.data }}. However, this only returns the following array:

[
  {
    "name": "Test4"
  },
  {
    "name": "Test3"
  },
  {
    "name": "Test2"
  },
  {
    "name": "Test3"
  }
]

I'm assuming that something needs to be added at this point:

Where the selected value is drawn into the arrListView object?

[dinkok]

Me too I'm struggling with removing specific item from array

[Matt_N]

First off - sorry for my hiatus - work has been very busy, which is good for work but bad for the forums!

There's a bit to unpack here, but I think if we start with your last problem we may find a solution for the deletion problem. You're on the right track for saving/accessing the selection dropdowns within the list view, you'll want to write the selected value to the variable (arrListView in my example). You can set an initial value in the JS code in your screenshot. But, I would suggest doing it with a Change event handler of the select component, using the setIn() function, and just make sure the default value of the select component is set to the proper value ({{item.selected}} in my example).
I always find videos easier to follow, but let me know if I can clarify anything further:

Code Snippets:
Add Item:

arrListView.setIn(
  [arrListView.value.length], 
  {
    name: 'Test ' + arrListView.value.length, 
    number: arrListView.value.length
  }
)

Select Component Change event handler:
arrListView.setIn([i,'selected'], select4.value)

Delete Button:

let temp = arrListView.value;
temp.splice(i,1);
arrListView.setValue(temp);

Since the listview is just displaying the data stored in the arrListView variable, I would access the data via the variable. Ex: {{ arrListView.value[0].selected }} would give the select value for the first item.

With the above, does your delete function work properly, or is it still removing the wrong item?

[Matt_N]

Here's an export of my list view example. Probably a better way to see it than my rambling answer above?

ListViewExample.json (12.6 KB)

[dinkok]

What, if I want by default 2 rows to be shown in listView not by manually going to click twice in button Add Item

[Matt_N]

Set the initial value of arrListView to include the values for the two default rows.
Example:

[
  {
    name: 'Test 0', 
    number: 0
  },
  {
    name: 'Test 1', 
    number: 1
  }
]

[dinkok]

I have an issue I have a select component but based on what I selected on my select component some other inputs will get value automatically not by going manually and write here but with event handler on change is not working to set that value into array automatically for those inputs that gets value automatically based on value of select input

[Matt_N]

Can you provide screenshots? I'm not following exactly what you're trying to accomplish.

[Grant_Humphries]

Thanks very much for responding, @Matt_N - that helped quite a lot. The delete function is almost there - it's still exhibiting some strange behaviour though.

So here I've created three rows and this works great. I can even access the select value now from the arrListView variable.

Here, I've clicked on the top row, which you'd expect would give me the species as GEPE and ADPE as per the example, but as you can see it's just removed the bottom row:

HOWEVER!! When I click on "Add" again, it creates a third row but THEN the first two select options revert back to what they should have been once I clicked on "Delete" the first time:

ODDLY the true value of arrListView is correct. For some reason, the values in the select components do not match what's in the array

[Matt_N]

Strange! It seems/feels like possibly an index problem within the List View, but I can't replicate it on my end. Could you upload a copy of what you're working with (wipe/clear any confidential data prior to export)? Three dots in the upper-right, select Export to JSON, and upload here.

[Grant_Humphries]

Thanks @Matt_N - this is what I'm working on. Nothing confidential in here. The section with the ListView is at the very bottom.

Antarctic Site Inventory.json (175.5 KB)