Custom Item Template in ListBox
By default, ListBox component has an internal template shared among all items that displays the item icon and label. This works in most cases, where you need to display a simple list. However, you can create your own custom item template that allows you to add any custom HTML elements and arrange them in different layouts. In addition, you can set conditions and use multiple different templates for each item separately or share them between items.
A sample code that shows how to create custom item template for ListBox component 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
In this example, the ListBox displays a list of device drivers with general information. Each item has a check box, icon with driver category and name shown in two lines and a button that updates the driver info.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Create Custom Item Template in ListBox
The IntegralUI ListBox component has a special property named itemTemplate, which can accept a custom function set in your code where you can create a layout of custom HTML elements using the item object. You can add any data to the item object using custom fields, and then use them within the template.
In this case, the item template uses item object that has the following fields set:
- driverName - the name of the device driver
- category - the group to which the driver belongs
- date - the last update
- icon - visual representation of the device
- version - the last version
In order to create the template you need to use the Lit Element syntax, with any standard or custom HTML elements. For this example, only standard div and span elements are in use, only the button is created by using the IntegralUI Button component.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
At first, the span element is set within a block to display a custom check box. You can use a custom checkbox icon and set it as the element background. Depending on the check state, a different CSS class is used to show either checked or unchecked value.
Part in the middle shows the driver information, divided in two sections: device icon on the left with category and driver name on right in two text lines:
Finally, the last part contains the button that when clicked displays an alert message of the driver update. In addition, the button appearance is changes using CSS, where it appears in white and orange colors instead of standard white and blue colors set from Office theme.
As a result, the item content is completely changed, instead of showing just the item label, now it shows a rich content composed of different elements in multiple colors.
The item template function must return a value in HTML format using the html object from Lit Element. If you have conditions set within the template, you can also return a null value, which means that default template is used instead.
Conclusion
IntegralUI ListBox comes with built-in support for creating custom item templates. To create a template you can use standard or custom HTML elements and arrange them in different layouts. You can have one template shared between all items or you can set custom conditions within the template function and have a different content for each item separately.
ListBox is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.