Ability to place custom fields in post header?

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

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>

9 likes

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?

1 like

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.

3 likes

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

image

Just like in this conversation here:

Hallo allemaal! Ik ben nieuw bij Discourse en ik heb dit topic gevonden dat PRECIES lijkt te zijn wat ik probeer te doen. Ik heb een aangepast veld dat ik graag direct na de volledige naam van een gebruiker op een bericht wil laten weergeven.

Ik ben niet volledig onervaren met het maken van plugins voor andere webapplicaties die ik in het verleden heb gebruikt, dus ik denk dat ik met voldoende geduld en vallen en opstaan ​​zou kunnen uitzoeken hoe ik een Theme Component of iets vergelijkbaars werkend kan krijgen. Ik ben nu bezig met het doornemen van de Theme Development tutorial.

Ik DENK dat ik de naam van het veld heb gevonden om toe te voegen aan de instelling “public user custom fields” (ik denk dat de id 2 is, dus ik heb het ingesteld op user_field_2).

Ik heb ingelogd op mijn Discourse-site en een nieuwe Theme Component gemaakt. Ik heb deze ingeschakeld voor alle thema’s die ik heb geïnstalleerd. Ik ging naar JS en kopieerde de code van hierboven (waarbij ik user_field_4 veranderde in user_field_2). Het leek niets te doen, dus ik weet zeker dat ik iets verkeerd heb gedaan. Moest ik dit ergens anders plakken? Of zit ik er helemaal naast?

Ik weet dat dit bericht enigszins oud is, dus de code is mogelijk verouderd. Is er een mogelijkheid dat iemand me kan helpen? Ik zal mijn best doen om alle vragen te beantwoorden of de nodige details te verstrekken. BEDANKT!