# Como exibir dados abaixo do avatar do usuário?
**URL:** https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815
**Category:** Development
**Created:** [2 Agosto , 2018 23:18 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815 "2018-08-02T23:18:41Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@jezra](https://meta.discourse.org/u/jezra)
#### Post date: [2 Agosto , 2018 23:18 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/1 "2018-08-02T23:18:41Z")
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?
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2 Agosto , 2018 23:59 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/2 "2018-08-02T23:59:34Z")
This should be your ticket for displaying the data:
```plaintext
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](https://github.com/discourse/discourse/blob/864e279aaf62c1a7618009206efc23c59b208dec/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L247-L276). I imagine with some CSS you’d be able to get something close to what you want.
---
### Author:  [@jezra](https://meta.discourse.org/u/jezra)
#### Post date: [3 Agosto , 2018 20:26 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/3 "2018-08-03T20:26:54Z")
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?
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [3 Agosto , 2018 21:37 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/4 "2018-08-03T21:37:25Z")
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](https://meta.discourse.org/t/request-for-help-on-finding-a-users-full-name-in-a-theme-component-context/87128/2):
>
> 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](https://meta.discourse.org/t/what-is-this-code-add-to-serializer-in-all-these-plugins/58913):
>
> I have seen this code in [discourse\_signatures plugin](https://github.com/xfalcox/discourse-signatures/blob/master/plugin.rb#L20) 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 🙂
---
### Author:  [@jezra](https://meta.discourse.org/u/jezra)
#### Post date: [4 Agosto , 2018 23:21 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/5 "2018-08-04T23:21:51Z")
once again, thank you. Hopefully I can make some time this weekend to hack on my plugin.
---
### Author:  [@jezra](https://meta.discourse.org/u/jezra)
#### Post date: [6 Agosto , 2018 19:44 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/6 "2018-08-06T19:44:40Z")
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 😄
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [6 Agosto , 2018 20:57 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/7 "2018-08-06T20:57:33Z")
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 😃
---
### Author:  [@jezra](https://meta.discourse.org/u/jezra)
#### Post date: [6 Agosto , 2018 21:03 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/8 "2018-08-06T21:03:47Z")
Sure thing. Once I get data displaying better, I’ll be posting about my experience
---
### Author:  [@jezra](https://meta.discourse.org/u/jezra)
#### Post date: [6 Agosto , 2018 23:55 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/9 "2018-08-06T23:55:16Z")
Para armazenar os dados personalizados no Discourse, fui em Admin \> Personalizar \> Campos de Usuário e criei um campo personalizado. Os dados que preciso são um percentil representando o progresso, e escolhi “texto” como tipo de campo. O nome do campo é exibido apenas no cartão e no perfil do usuário e, infelizmente, não é usado para referenciar programaticamente os dados do campo.
O campo que armazena o progresso foi o terceiro campo personalizado que criei, portanto, “3” se tornou um número muito importante.
Usando a API, escrevi um script curl (com a ajuda de [https://meta.discourse.org/t/api-cannot-update-user/63876/4](https://meta.discourse.org/t/api-cannot-update-user/63876/4)) para preencher o campo com dados de teste. Como o campo que eu queria preencher era o terceiro que criei, minha linha de dados no script curl é:
`--data '{ "user_fields": { "3":"87" } }'`
Para exibir os dados, foi necessário ir em Admin \> Configurações \> Usuários, rolar até a opção “campos personalizados públicos de usuário” e adicionar o campo à lista branca. Como o campo foi o terceiro criado, tive que adicionar “user\_field\_3” à lista branca e não o nome real que dei ao campo.
Neste ponto, escrevi um plugin básico com o seguinte código:
```js
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;
});
});
}
};
```
A saída final
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [17 Abril , 2023 12:18 UTC](https://meta.discourse.org/t/how-to-display-data-beneath-the-users-avatar/93815/10 "2023-04-17T12:18:29Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.