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

**URL:** <https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133>\
**Category:** Bitbucket Server\
**Tags:** bitbucket-server, aui-badge, plugin-development, web-item\
**Created:** [February 22, 2022, 2:32pm UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133 "2022-02-22T14:32:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BIF01](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@BIF01](https://community.developer.atlassian.com/u/BIF01)\
**Post date:** [February 22, 2022, 2:32pm UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133/1 "2022-02-22T14:32:00Z")

</div>

We can set the icon of our [Web Item plugin module](https://developer.atlassian.com/server/framework/atlassian-sdk/web-item-plugin-module/) via the [Param Element](https://developer.atlassian.com/server/framework/atlassian-sdk/web-item-plugin-module/#param-elements).  
How can we add even an [AUI badge](https://aui.atlassian.com/aui/8.1/docs/badges.html) to that icon?  
 ![image](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/8/5/85069b65f6760262fec30150af4f42f99f210e64.png)  
Thanks in advance.  
Cheers.

---

<div class="post-metadata">

**Author:** ![NavpreetAhuja](https://avatars.discourse-cdn.com/v4/letter/n/278dde/32.png) [@NavpreetAhuja](https://community.developer.atlassian.com/u/NavpreetAhuja)\
**Post date:** [May 31, 2022, 6:32am UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133/2 "2022-05-31T06:32:39Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![BIF01](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@BIF01](https://community.developer.atlassian.com/u/BIF01)\
**Post date:** [June 7, 2022, 1:41pm UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133/3 "2022-06-07T13:41:24Z")

</div>

> [@NavpreetAhuja](#):
>
> Next, add the soy template as a `resource` with `location` attribute equal to the location of the soy template

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)?

```auto
/**
 * @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](https://developer.atlassian.com/server/jira/platform/web-panel/#context-provider)?  
Thanks in advance.  
Cheers.

---

<div class="post-metadata">

**Author:** ![NavpreetAhuja](https://avatars.discourse-cdn.com/v4/letter/n/278dde/32.png) [@NavpreetAhuja](https://community.developer.atlassian.com/u/NavpreetAhuja)\
**Post date:** [June 8, 2022, 12:22am UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133/4 "2022-06-08T00:22:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BIF01](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@BIF01](https://community.developer.atlassian.com/u/BIF01)\
**Post date:** [June 16, 2022, 4:34pm UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133/5 "2022-06-16T16:34:51Z")

</div>

> [@NavpreetAhuja](#):
>
> Based on your requirements you can add your own template or use an existing one.

> [@NavpreetAhuja](#):
>
> 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

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

---

<div class="post-metadata">

**Author:** ![BIF01](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@BIF01](https://community.developer.atlassian.com/u/BIF01)\
**Post date:** [June 16, 2022, 4:38pm UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133/6 "2022-06-16T16:38:22Z")

</div>

> [@NavpreetAhuja](#):
>
> To add a badge to web item, you need to add `<web-panel>` with `location=<web-item-key>.badge`

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

---

<div class="post-metadata">

**Author:** ![BIF01](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@BIF01](https://community.developer.atlassian.com/u/BIF01)\
**Post date:** [December 6, 2022, 12:18pm UTC](https://community.developer.atlassian.com/t/how-to-add-aui-badge-to-the-icon-of-a-web-item-plugin-module/56133/7 "2022-12-06T12:18:03Z")

</div>

> [@NavpreetAhuja](#):
>
> 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

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.