sapui5

sap.m.Avatar / badgeIcon not showing in JS


From the official SAP sample, component sap.m.Avatar can display a badge icon like this: https://sapui5.netweaver.ondemand.com/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.net/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.net/guillaume_hrc/7z5u94qe/27


Solution

  • I assume this was a fixed bug since it no longer occurs with latest version of SAPUI5 1.133.0
    https://jsfiddle.net/guillaume_hrc/7z5u94qe/32/

    <script id='sap-ui-bootstrap' 
      type='text/javascript' 
      src="https://ui5.sap.com/1.133.0/resources/sap-ui-core.js" 
    ...
    >