# api.decorateWidget - how can I find the template's names?

**URL:** https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907
**Category:** Support
**Created:** [December 10, 2020, 6:09pm UTC](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907 "2020-12-10T18:09:21Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Ed\_Bobkov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ed_bobkov/32/200014_2.png) [@Ed\_Bobkov](https://meta.discourse.org/u/Ed_Bobkov)
#### Post date: [December 10, 2020, 6:09pm UTC](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907/1 "2020-12-10T18:09:22Z")

</div>

How can I find Discourse template locations to set it in the code?  
Especially I’m interested in the correct name of the usercard

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/6/06e4bc7ec545903a3bfee5fd0c1dd0e252c80ba5.jpeg)

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648/1):
>
> ##### decorateWidget()
> 
> With this method you will be able to add html before or after a widget. You use it like this
> 
> ```plaintext
> <script type="text/discourse-plugin" version="0.8">
> api.decorateWidget('NAME:LOCATION', helper => {
> 
> });
> </script>
> 
> ```

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [December 10, 2020, 6:58pm UTC](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907/2 "2020-12-10T18:58:54Z")

</div>

There’s a really handy theme component to track down the plugin outlets of our various handlebars templates: [(deprecated) Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673). At the end of the first post is a link to a preview of the component on our theme creator site. You can use that to find most plugin outlets without even having to install it on your own site.

 ![Screen Shot 2020-12-10 at 10.35.14 AM](https://global.discourse-cdn.com/meta/original/3X/8/0/80c423a5d97d3876cf8077b4fad93ee1b56eea91.jpeg)

One thing to be aware of is that templates and widgets are two separate concepts. With that said, they can work together if needed by mounting a widget to a plugin outlet of a template. It’s more common to use connectors/components/controllers to work with plugin outlets at this point like you would in a plugin, though.

[This section](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-b) of the developers guide covers a lot what you are looking for. I would also recommend going through the GitHub repositories of theme components in our #Customization > Theme category to see some good examples.

---

<div class="post-metadata">

### Author: ![Ed\_Bobkov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ed_bobkov/32/200014_2.png) [@Ed\_Bobkov](https://meta.discourse.org/u/Ed_Bobkov)
#### Post date: [December 10, 2020, 7:29pm UTC](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907/3 "2020-12-10T19:29:42Z")

</div>

Thank you for the hint! I found the necessary part `user-card-post-names:after`.

> **['Plugin Outlet Locations' by @RGJ](https://discourse.theme-creator.io/theme/RGJ/plugin-outlet-locations)**
>
> A customization for Discourse shared on Discourse Theme Creator

I tried to use it in the original code, but failed.

> [@Ability to place custom fields in post header?](https://meta.discourse.org/t/ability-to-place-custom-fields-in-post-header/106928/2):
>
> ```plaintext
> <script type="text/discourse-plugin" version="0.8.27">
> api.decorateWidget('poster-name:after', helper => {
> const attrs = helper.attrs;
> if (attrs.userCustomFields && attrs.userCustomFields.user_field_4) {
> return helper.h('span.poster-user-field', helper.attrs.userCustomFields.user_field_4);
> }
> });
> </script>
> 
> ```

I changed `poster-name:after` to `user-card-post-names:after`, but it didnt work and the custom field is not visible on the usercard. Any ideas on the reason of that?

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [December 10, 2020, 8:31pm UTC](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907/4 "2020-12-10T20:31:10Z")

</div>

You aren’t going to be able to use `decorateWidget()` on a plugin outlet. Try something like this:

```plaintext
<script type="text/discourse-plugin" version="0.8.42">
    const h = require("virtual-dom").h;
    api.createWidget("user-card-custom-field", {
      html(attrs) {
        const userCustomFields = attrs.user.custom_fields;
        if (userCustomFields.user_field_4) {
            return h('span.poster-user-field', userCustomFields.user_field_4);
        }
      }
    });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
    {{mount-widget widget="user-card-custom-field" args=(hash user=user)}}
</script>

```

The `mount-widget` is passing the user object we have available from the plugin outlet in core and making it available in the attributes of the `user-card-custom-field` widget we’ve created.

> <https://github.com/discourse/discourse/blob/aa0d4ea764959bd7ec5127f78dbec68de4dc8337/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs#L68-L68>

Make sure you’ve added `user_field_4` to your `public user custom fields` or `staff user custom fields` site settings as needed.

## Edit

Also, unless there’s anything particularly special you need to do, you should be able to avoid widgets altogether and just use the plugin outlet:

```plaintext
<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
  {{#if user.custom_fields.user_field_1}}
    <span class="poster-user-field">{{user.custom_fields.user_field_1}}</span>
  {{/if}}
</script>

```

---

<div class="post-metadata">

### Author: ![Ed\_Bobkov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ed_bobkov/32/200014_2.png) [@Ed\_Bobkov](https://meta.discourse.org/u/Ed_Bobkov)
#### Post date: [December 11, 2020, 10:51am UTC](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907/5 "2020-12-11T10:51:05Z")

</div>

Thank you so much! Everything is working.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [January 10, 2021, 10:51am UTC](https://meta.discourse.org/t/api-decoratewidget-how-can-i-find-the-templates-names/172907/6 "2021-01-10T10:51:12Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.