Advice neededa; Editing / Keeping multiple secrets

Developing Nodes
10

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
defaults: {
    filters: { value: [] }, /* this will be an array of objects) /*
    ...
},
  1. Define your control (don't bind it to config value name)
<div>
    <ol id="myFilters"> </ol>
</div>
  1. on oneditprepare, set it up + restore previous values.
$('#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
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
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.

You beat me to it @Steve-Mcl :smile:

1 Like