How to add AUI badge to the icon of a Web Item plugin module

We can set the icon of our Web Item plugin module via the Param Element.
How can we add even an AUI badge to that icon?
image
Thanks in advance.
Cheers.

Hi @BIF01
To add a badge to web item, you need to add <web-panel> with location=<web-item-key>.badge

Next, add the soy template as a resource with location attribute equal to the location of the soy template,
for instance:

<web-item key="repository-section-item" name="Navigation tab" section="bitbucket.repository.nav/repository-section">
    ...
</web-item>

<web-panel key="repository-section-item.count" name="Navigation tab count" weight="10" location="repository-section-item.badge">
    ...
     <resource name="view" type="soy" location="com.atlassian.bitbucket.server.bitbucket-web:server-soy-templates/bitbucket.internal.widget.badges.badges.badgeTemplate"/>
</web-panel>

We cannot find the soy template bitbucket.internal.widget.badges.badges.badgeTemplate, but only soy templates:

  • bitbucket.internal.widget.badges.badges.openPullRequestCount
  • bitbucket.internal.widget.badges.badges.navOnboarding

Here we have to add our own soy template, right?
If so, how do we pass params (e.g., count)?

/**
 * @param count 
 */
{template .badge}
    {if $count > 0}
        {call aui.badges.badge}
            {param text: $count /}
        {/call}
    {/if}
{/template}

Do we had to add a context-provider?
Thanks in advance.
Cheers.

Hi @BIF01
Yes that is correct. Based on your requirements you can add your own template or use an existing one. I added .badgeTemplate just as an example.
You can refer the exisiting both the badges soy templates in webapp/default/src/main/frontend/static/bitbucket/internal/widget/badges/badges.soy

If you want to show the count or anything that is not static, yes you will need a context-provider class in your web-panel

Thanks

Thank you @NavpreetAhuja, now all it’s working.

Is there any Atlassian documentation for such locations?