Add New Item in ListBox
The ListBox component accepts an array of item objects. You can create the list initially in code by adding new items one by one or you can load it from a local or remote data source. An example would be to a load a list on demand from a JSON file.
A sample code that shows how to add a new item to the ListBox from code is available in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
Whenever there is change in the list, this demo will show a notification message stating that a new item is added to the list. Notifications are created with Toaster component.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Add New Item to the ListBox
The item object is a regular JavaScript Object that can contain custom fields in addition to predefined fields, like these:
- id - Specifies a unique identifier used to differentiate items from each other
- text - Specifies the item label
A complete list of all predefined fields for list item object is available in ListBox API, under data section check out the item object.
Use of custom fields is best suited within item templates.
Several built-in methods allow you to add and remove items on demand during run-time. Using control panel on the right side, you can add new item at specific position or at the end of the list.
The list in the ListBox component is determined by the items property, which holds an array of item objects. You can modify this array using standard JavaScript methods for array, or use built-in methods in the ListBox that allows you to add new item at specific position within the list. Any action performed when using these methods is accompanied with a corresponding event(s).
For example to add new item to the end of the list you can use the addItem method. The signature of this method is:
addItem(item)Where item is a JavaScript Object that you want to add, with all settings like item icon, label etc.
Insert Item at Specific Position
Above method will only add items to the end of the list. However, in some cases, you may need to insert a new item to a specific position. To do this you can use the following method:
- insertItemAt - Inserts the specified item at specified position in list
Here is an example of this method in use:
Whenever a new item is added to the ListBox, the itemAdding and itemAdded events are fired. This gives you further control on how and when you want to add new items to the list box. By handling the itemAdding event you can cancel the whole process, by setting the cancel field in event data to true.
Insert Before or After Specified Item
There is one additional way to add items at specific position in the list. This time instead of using the item index, you can use another item as a reference point. You can add items with these methods:
- insertItemAfter - Inserts an item after the specified item in the list
- insertItemBefore - Inserts an item before the specified item in the list
So if you don't know the index at which you want to add new item, but you know it should appear before or after specified item, then you can use these methods. In this example, as a reference the selected item is used.
If reference item is not specified, nothing happens.
Conclusion
The list displayed in the ListBox component is determined by an array of item objects. You can modify this array using standard JavaScript methods or using already built-in methods to add new items on demand into the list box. Whenever an item is added, a corresponding event is fired that you can handle in your code and add custom actions specific to your application.
ListBox is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.