From the official SAP sample, component sap.m.Avatar can display a badge icon like this: .120.26/#/entity/sap.m.Avatar/sample/sap.m.sample.AvatarValueState
Yet, when instantiated in JS, the badge icon is not showing. Here is a JS fiddle illustrating the problem /
let avatar = new sap.m.Avatar('av', {
displaySize : 'M',
backgroundColor: 'Accent3',
initials : 'HRC',
badgeIcon : 'sap-icon://globe',
});
There should be a _badge aggregation being created but there is none.
Update 1st April 2025 - 14:32 (as suggested by @jrnjy)
Tried the setAggregation to no avail:
From the official SAP sample, component sap.m.Avatar can display a badge icon like this: https://sapui5weaver.ondemand/1.120.26/#/entity/sap.m.Avatar/sample/sap.m.sample.AvatarValueState
Yet, when instantiated in JS, the badge icon is not showing. Here is a JS fiddle illustrating the problem https://jsfiddle/guillaume_hrc/7z5u94qe/27/
let avatar = new sap.m.Avatar('av', {
displaySize : 'M',
backgroundColor: 'Accent3',
initials : 'HRC',
badgeIcon : 'sap-icon://globe',
});
There should be a _badge aggregation being created but there is none.
Update 1st April 2025 - 14:32 (as suggested by @jrnjy)
Tried the setAggregation to no avail: https://jsfiddle/guillaume_hrc/7z5u94qe/27
Share Improve this question edited Apr 1 at 12:33 Guillaume HRC Software asked Apr 1 at 8:20 Guillaume HRC SoftwareGuillaume HRC Software 213 bronze badges New contributor Guillaume HRC Software is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.2 Answers
Reset to default 1I assume this was a fixed bug since it no longer occurs with latest version of SAPUI5 1.133.0
https://jsfiddle/guillaume_hrc/7z5u94qe/32/
<script id='sap-ui-bootstrap'
type='text/javascript'
src="https://ui5.sap/1.133.0/resources/sap-ui-core.js"
...
>
Try to explicitly add the _badge aggregation. Since badgeIcon should internally create a _badge aggregation, you can manually force it by setting the aggregation after the component is initialized.
let avatar = new sap.m.Avatar('av', {
displaySize : 'M',
backgroundColor: 'Accent3',
initials : 'HRC',
});
// Manually setting the badge icon as an aggregation
avatar.setAggregation("_badge", new sap.m.AvatarBadge({
icon: "sap-icon://globe"
}));
avatar.placeAt("content");