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

Support
4

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