How to build a dynamic list custom control

Hi all,
I am building a custom control like the one below (attached screenshot and custom control structure), that intents to handle dynamic and editable list.

Custom control structure looks like:
image

So far, I have only focused on Add action/button: when clicking on Add button, I am adding an empty object to the list used in the main custom control (Dynamic List Custom Control).

I was wondering if someone else has already built a control like this one before, to check if there is another approach (and maybe a better one) to accomplish this.

Thanks in advance!

@kyung built a version of this with read/edit views (which I borrowed heavily from for one of my apps). Essentially - each list entry would have a read container and an edit container and a boolean value that controls which view is shown. The boolean value (really an array of boolean values) is managed by the control.

it’s more visually lightweight view with a read-view but has additional housekeeping overhead.


Thanks @dinesh for your reply!
Yes, I think the option you mentioned would work perfectly for the use case… I think we will give it a try to make the dynamic and editable list including add/edit/delete actions in the same visual component (as there a mock-up that shows in that way), and if it turns too complex I will ask if we can use this as the main alternative. Is there any place/app where I can take a look at it more deeply if it is needed?

Thanks!

Hey @Etu you’re off to a great start!

I think the post on Dynamic Lists Custom Controls might be just what you’re after (it’s a bit extensive for the content to be shared in a reply hehe).
It’s a guide for building a set of Custom Controls that display rows of data, both with a View and an Edit state per row, as well as edit/save/remove buttons.

Remember to leave a :+1: or a comment if you find the post helpful.

cheers!

1 Like

hey @juanchax thanks for your post!

2 Likes