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

[Ed_Bobkov (Ed)]

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

@Johani

decorateWidget()

With this method you will be able to add html before or after a widget. You use it like this

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('NAME:LOCATION', helper => {

  });
</script>

[tshenry (Taylor)]

There’s a really handy theme component to track down the plugin outlets of our various handlebars templates: Plugin outlet locations theme component. 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.

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 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 #theme category to see some good examples.

[Ed_Bobkov (Ed)]

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

'Plugin Outlets' by @RGJ

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

@simon

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

[tshenry (Taylor)]

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

<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:

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

[Ed_Bobkov (Ed)]

Thank you so much! Everything is working.