sapui5 - sap.m.AvatarbadgeIcon not showing in JS - Stack Overflow

admin管理员组

文章数量:1352141

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

• sapui5

Share Improve this question Follow edited Apr 1 at 12:33 Guillaume HRC Software asked Apr 1 at 8:20 Guillaume HRC SoftwareGuillaume HRC Software 2133 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.

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I 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");

本文标签： sapui5sapmAvatarbadgeIcon not showing in JSStack Overflow