Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
In SAPUI5, how two add two icons in StandardListItem
Instead of using StandardListItem, you should use CustomListItem. With the use of CustomListItem, you can add any kind of content including multiple icons.
Understanding CustomListItem
As per SAP documentation, CustomListItem has the following use:
This control with a content aggregation can be used to customize standard list items that SAP doesn't provide. List mode and ListItem type are applied to CustomListItems as well.
Note: Even though the content aggregation allows any control, complex responsive layout controls (e.g. Table, Form) should not be aggregated as content.
Reference: SAP CustomListItem
Constructor Syntax
The constructor for CustomListItem is ?
new sap.m.CustomListItem(sId?, mSettings?)
Parameters
| Param | Type | Description |
|---|---|---|
| sId? | String | ID for the new control, generated automatically if no ID is given |
| mSettings? | Object | Initial settings for the new control |
Example: Adding Two Icons
Here's how to create a CustomListItem with two icons using HBox layout ?
var oCustomListItem = new sap.m.CustomListItem({
content: [
new sap.m.HBox({
items: [
new sap.ui.core.Icon({
src: "sap-icon://accept",
color: "#007833"
}),
new sap.ui.core.Icon({
src: "sap-icon://decline",
color: "#cc1919"
}),
new sap.m.Text({
text: "List Item with Two Icons"
}).addStyleClass("sapUiMediumMarginBegin")
]
})
]
});
Conclusion
CustomListItem provides the flexibility to add multiple icons and custom content that StandardListItem cannot support. Use HBox or VBox layouts to arrange multiple icons within your custom list items effectively.
