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

Bitbucket Development Bitbucket Server
, , ,
#1

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.

#2

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>
#3

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.

#4

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

#5

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

#6

Is there any Atlassian documentation for such locations?
Thanks in advance.
Cheers.

#7

In case we want to show anything that is static, how can we pass a param to the soy template without a context-provider class in our web-panel?
Thanks in advance.
Cheers.