I have a use case where I would like to add the content from a custom user field next to my username in the post header:
not sure the best way to go about this?
very new to discourse and all its wonders
AI-generated summary
The discussion focuses on how to display custom user fields in the post header next to the username. cryogenx initially asked for a method to achieve this. simon provided a detailed solution using the decorateWidget API, explaining that custom fields must first be added to the public user custom fields Site Setting and that the field name is derived from the ID (e.g., user_field_4). jonathan-s and leopedrini sought clarification on implementation details and theme integration, which simon addressed by directing them to the Discourse Themes developer guide.
However, MisterVertigo reported that the original widget-based code was not working in their theme component. MarkDoerr clarified that the widget system has been replaced and that the code is now outdated. He provided a modern solution using a Glimmer Component with the api.renderAfterWrapperOutlet method to render the custom field within the post-meta-data-poster-name outlet. This new approach requires matching the specific user_field_ ID in the code to the desired custom field.
You can do a lot with the methods found in plugin-api.js.es6. To add content before or after the poster name widget, use the decorateWidget method. Use 'poster-name:after' as the name/type parameter.
Checking the result of the console.log statement from the following code will tell you what attributes are available:
<script type="text/discourse-plugin" version="0.8.27">
api.decorateWidget('poster-name:after', helper => {
console.log('attrs', helper.attrs);
});
</script>
What you’ll see is that custom user fields are not available. To get access to them, you need to add the name of the user custom field to the public user custom fields Site Setting. Finding the name of the field can be tricky. One way to find the name is to go to /admin/customize/user_fields.json and look at the JSON for the page. You’ll see something like this:
{
"user_fields": [
{
"id": 1,
"name": "Terms of Service",
"description": "<a href=\"http://localhost:3000/tos\">I have read the tos</a>",
"field_type": "confirm",
"editable": true,
"required": false,
"show_on_profile": false,
"show_on_user_card": false,
"position": 1
},
{
"id": 4,
"name": "city",
"description": "your city",
"field_type": "text",
"editable": true,
"required": true,
"show_on_profile": false,
"show_on_user_card": false,
"position": 3
}
]
}
You can get the name of the field by appending “user_field_” to the field’s ID. So the “city” field on my site has the name “user_field_4”. Add the name to the public user custom fields Site Setting so that it is available in helper.attrs.
The following code will add the city field after the poster-name widget for users who have set that custom field. The field is wrapped in <span class="poster-user-field"></span> tags, so it can be styled with CSS.
<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>
Thank you for this explanation, it’s something that I was also looking for. I’d say what’s missing in this explanation is how you insert the javascript snippet and where you do it. Do you need to create a separate plugin for it?
The code I posted above with the console.log statement that returns the post attributes, is meant to go in a theme or a theme component. For a general overview of developing Discourse themes, see Developer’s guide to Discourse Themes. For details about using the Plugin API methods in a theme, instead of a plugin, see https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281.
Does anybody knows how to do it via themes?
This is exaclty what i look for.
I want to be able to see it just like LinkedIn does (shows Job title):
Just like in this conversation here:
Hello all! I’m new to Discourse and I found this thread that looks like EXACTLY what I’m trying to do. I have a custom field that I’d like to have displayed right after the Full Name of a user on a post.
I’m not completely inexperienced with making plugins for other web apps that I’ve used in the past, so I think with enough patience and trial and error I could figure out how to make a Theme Component or something similar work. I’m in the process of going through the Theme Development tutorial now.
I THINK I figured out the name of the field to add to the “public user custom fields” setting (I think the id is 2, so I set it to user_field_2).
I logged into my Discourse site, and created a new Theme Component. I enabled it for all the themes I have installed. I went to JS and copied the code from above (changing user_field_4 to user_field_2). It didn’t seem to do anything, so I’m sure I did something wrong. Is there somewhere else I needed to paste this? Or am I way off base?
I know this post is somewhat old, so the code may be outdated. Any possibility of anyone being able to help me out? I’ll do my best to answer any questions or provide any needed details. THANK YOU!
You’re correct that this code is now outdated because we replaced the widget system. Here’s some information about that from last year: Upcoming post stream changes - How to prepare themes and plugins .
It is still possible to get this to work, but you’ll have to use a Glimmer Component. It could look something like this:
import Component from "@glimmer/component";
import { apiInitializer } from "discourse/lib/api";
class UserFieldBadge extends Component {
static shouldRender(args) {
return !!args.post?.user_custom_fields?.user_field_4;
}
<template>
<span class="poster-user-field">
{{@post.user_custom_fields.user_field_4}}
</span>
</template>
}
export default apiInitializer((api) => {
api.renderAfterWrapperOutlet("post-meta-data-poster-name", UserFieldBadge);
});
Remember that you’ll need to match user_field_4 in this code to the actual field you want to show.
I’ll leave it to others to modify this so that it can show ALL the public user custom fields. 