# Advice neededa; Editing / Keeping multiple secrets

**URL:** https://discourse.nodered.org/t/advice-neededa-editing-keeping-multiple-secrets/83981
**Category:** Developing Nodes
**Created:** [23 December 2023 13:27 UTC](https://discourse.nodered.org/t/advice-neededa-editing-keeping-multiple-secrets/83981 "2023-12-23T13:27:53Z")
**Posts on this page:** 1
**Showing post:** 10

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [24 December 2023 11:24 UTC](https://discourse.nodered.org/t/advice-neededa-editing-keeping-multiple-secrets/83981/10 "2023-12-24T11:24:08Z")

</div>

Hi @Stwissel

The editable list is a little daunting at first, but once you get it - it picks up quickly  
Here is a minimal guide

1. Define your config value for the list

```js
defaults: {
    filters: { value: [] }, /* this will be an array of objects) /*
    ...
},

```

1. Define your control (don't bind it to config value name)

```auto
<div>
    <ol id="myFilters"> </ol>
</div>

```

1. on `oneditprepare`, set it up + restore previous values.

```js
$('#myFilters').editableList({
   removable: true,
   addButton: 'Add New Item',
   addItem: AddItem
});

/* Restore items - this calls the addItem assignment for each object in your array */
this.filters.forEach((Item) => {$('#myFilters').editableList('addItem', Item)});

```

1. Create the `addItem` callback

```auto
function AddItem(container, index, data) {
 /* data : Will be the element in the array, its empty when the button is clicked to add 
  * Construct an object of your choosing 
  * container : Is the Dom element that is added to the list                                  
  * you can bind values to your html elements as per normal javascript
                You are responsible for adding html content to it
  * index : Is the item index in the list     
  */

   // Add the item data to the container
   $(container).data('data', data);
}

```

1. on `oneditsave` write the list data to your config

```auto
const Items = $('#myFilters').editableList('items')
this.filters = [];
for (let i = 0; i < Items.length; i++) {
    const ItemData = Items[i].data('data');
    this.filters.push(ItemData)
}

```

I think I have that right - check my example here.

> <https://github.com/zwave-js/node-red-contrib-zwave-js/blob/main/zwave-js/event-filter.html>

You beat me to it @Steve-Mcl 😄

---

_[View the full topic](https://discourse.nodered.org/t/advice-neededa-editing-keeping-multiple-secrets/83981)._