ユーザーのアバターの下にデータを表示する方法は？

[jezra]

I am trying to display some externally generated user data below the user’s avatar. Currently, the data is stored in a custom user field of type ‘text’ and the field is populated via an API call as well as during SSO.

Now I am trying to determine the best way to actually display the data. Actually, I’m trying to find any way to display the data. A plugin seems like the best option, but there is no plugin-outlet that can be used.

Can someone with more knowledge point me in the correct direction?

[tshenry (Taylor)]

This should be your ticket for displaying the data:

api.decorateWidget('post-avatar:after', helper => {
    return helper.h('div', `TEST`);
});

You can find more info on that function in the plugin-api.js.es6. I imagine with some CSS you’d be able to get something close to what you want.

[jezra]

Thank you, that has certainly helped with displaying data in the correct location. Unfortunately it has also led me to another stumbling block.

From the helper.attrs, I can get the username and the user_id. Using this info, I then tried:

Discourse.User.findByUsername(helper.attrs.username).then((user)=>{
   let f1_val = user.user_fields[1];
   return helper.h('div', `${f1_val}`);
});

Aside from throwing an error, this method of data retrieval results in an API request for every post. Is there a way to access the information from the Ember side without requiring an API call?

[tshenry (Taylor)]

Ah yeah, I ran into a similar issue when trying to tinker around with something for a theme. The answer I got was:

Request for help on finding a user's full name in a theme component context

This is going to have to go in the serializer or you are going to be doing the worst kind of N+1 which is a Network+1 I am ok with last poster including name if the site has prioritize full names in the UI. Otherwise you are going to need a plugin.

Since it sounds like you are able to use a plugin, I think you should be able to add the custom_field to the post serializer.

I’m pretty sure this topic will have some useful info and give you some good inspiration:

What is this code add_to_serializer in all these plugins

I have seen this code in discourse_signatures plugin User.register_custom_field_type('see_signatures', :boolean) User.register_custom_field_type('signature_url', :text) User.register_custom_field_type('signature_raw', :text) if SiteSetting.signatures_enabled then add_to_serializer(:post, :user_signature, false) { if SiteSetting.signatures_advanced_mode then object.user.custom_fields['signature_raw'] else object.user.custom_fields['signature_url'] end } # I guess …

My knowledge on plugins is admittedly limited, so if anyone else reading has better advice, please chime in

[jezra]

once again, thank you. Hopefully I can make some time this weekend to hack on my plugin.

[jezra]

For what it is worth, none of that helped me get the data but I did manage to get the data without creating a plugin

[tshenry (Taylor)]

That’s awesome!

Would you mind sharing the basic idea of what ended up working for you? I’m curious what you ended up going with and I’m sure others that happen upon this topic will appreciate the info as well

[jezra]

Sure thing. Once I get data displaying better, I’ll be posting about my experience

[jezra]

Discourse にカスタムデータを保存するために、管理者 > カスタマイズ > ユーザーフィールドへ移動し、カスタムフィールドを作成しました。必要なデータは進捗を表すパーセンテージであり、フィールドタイプとして「テキスト」を選択しました。このフィールド名はユーザーのカードとプロフィール上でのみ表示され、残念ながらプログラム的にフィールドデータを参照するために使用されることはありません。

進捗を保存するフィールドは私が作成した3番目のカスタムフィールドだったため、「3」という数字が非常に重要なものとなりました。

API を使用し、https://meta.discourse.org/t/api-cannot-update-user/63876/4 の助けを借りて、フィールドにテストデータを埋めるための curl スクリプトを作成しました。私が埋めようとしたフィールドは私が作成した3番目のフィールドだったため、curl スクリプト内のデータ行は以下のようになります。

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

データの表示には、管理者 > 設定 > ユーザーへ移動し、「公開ユーザーのカスタムフィールド」オプションまでスクロールして、フィールドをホワイトリストに登録する必要があります。フィールドは3番目に作成されたものだったため、実際に付けた名前ではなく「user_field_3」をホワイトリストに登録する必要がありました。

この時点で、以下のような基本的なプラグインを作成しました。

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;
      });
    });
  }
};

最終的な出力は以下の通りです。