How to display data beneath the user's avatar?

Dev
9

In order to store the custom data on Discourse, I went to Admin > Customize > User Fields and created a custom field. The data I need is a percentile representing progress and I chose “text” as the field type. The field’s name is only displayed on the user’s card and profile and is sadly not used to reference the field data programatically.

The field storing the progress was the 3rd custom field I created and thus “3” becomes a very important number.

Using the API, I wrote a curl script (with the help of https://meta.discourse.org/t/api-cannot-update-user/63876/4) to populate the field with test data. Because the field I wanted to populate was the 3rd field I created, my data line in the curls script is:

--data '{ "user_fields": { "3":"87" } }'

Displaying the data required going to Admin > Settings > Users, and scrolling to the “public user custom fields” option and whitelisting the field. Since the field was the 3rd created, I had to whitelist “user_field_3” and not the actual name I gave the field.

At this point, I wrote a basic plugin with the following:

import { withPluginApi } from 'discourse/lib/plugin-api';
export default {
  name: 'progress-indicator',
  initialize() {
    withPluginApi("0.8.23", api => {       
      api.decorateWidget('post-avatar:after', helper => {
        let progress = helper.attrs.userCustomFields['user_field_3'];
        let retString = helper.h("div.progress-wrapper",
          {style: 'border: 1px solid blue; width:100%;'}, 
          helper.h('div.progress-bar',{style: 'width:'+progress+'%; background-color: green; height: 10px;'})
        );
        return retString;
      });
    });
  }
};

The final output screenshot009

7 Likes