# Improved badge granting workflow
**URL:** https://meta.discourse.org/t/improved-badge-granting-workflow/58631
**Category:** Feature
**Tags:** badges, completed
**Created:** [2017年三月8日 12:19 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631 "2017-03-08T12:19:07Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [2017年三月8日 12:19 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/1 "2017-03-08T12:19:08Z")
On my forum we’re starting to have moderators grant custom badges for exceptional behaviour on the forum. For example, a “Community Spirit” badge is awarded to members who freely offer time or resources to local community projects via the forum.
The workflow to grant badges in this instance is very fiddly and I think this puts mods off using it:
## Current Workflow (“Community Spirit” badge)
1. Click sharing button on post
2. Right-click link
3. Click “copy”
4. Click user’s avatar
5. Click user’s avatar on user card to open profile page
6. Click “Admin”
7. Click “Edit badges”
8. Search for “Community Spirit” Badge (fiddly as not ordered by recently used)
9. Paste the previously-copied URL into the “Reason” box
10. Click “Grant”
## Proposed Workflow (“Community Spirit” badge)
1. Click “…” on post
2. Click spanner icon
3. Click “Grant Community Spirit Badge”
## Proposed Workflow (Other Badges)
1. Click “…” on post
2. Click spanner icon
3. Click “Grant Other Badge” (this opens the existing “Grant badge” UI, with the “Reason” field pre-populated)
4. Select badge (badges listed in popularity order)
5. Click “Grant”
## Notes
In the proposed solution, the post “spanner menu” would show two options: “Grant _[most commonly-awarded badge]_” and “Grant Other Badge”
---
### Author:  [@mikechristopher](https://meta.discourse.org/u/mikechristopher)
#### Post date: [2017年三月8日 12:30 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/2 "2017-03-08T12:30:56Z")
I like the idea of this as we use custom badges quite a bit and a Grant Badge button direct from the post would make a big difference to our workflow and speed things up massively.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年三月8日 14:14 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/3 "2017-03-08T14:14:17Z")
I totally support adding a “wrench” option for “grant badge” here:
I think the workflow should be consistent.
- Click Grant Badge…
- Select Badge
- Badge is granted to user and attributed to post
#pr-welcome
---
### Author:  [@clapmyhands](https://meta.discourse.org/u/clapmyhands)
#### Post date: [2017年三月24日 15:04 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/4 "2017-03-24T15:04:41Z")
Hello, is anyone actively working on this task?
If not then I would like to try to tackle it. First time trying to contribute to discourse but this seems like a good starter task to begin with.
Also, any pointers would be appreciated 🙂
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年三月24日 15:21 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/5 "2017-03-24T15:21:00Z")
Sure, go for it! best pointer is to go slow, look at the way stuff is done now and post some screen shots here when you are done 🙂
---
### Author:  [@clapmyhands](https://meta.discourse.org/u/clapmyhands)
#### Post date: [2017年三月25日 10:05 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/6 "2017-03-25T10:05:56Z")
Thanks for the pointer 🙂
I’ve done a bit of traversing through the code and found that the post admin menu is handled in [post-admin-menu.js.es6](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/post-admin-menu.js.es6).
to add the badge granting button, I’d just have to do a check over the permission and follow the same style as the other actions. like so:
(the button is only there to show how it would look like. )
But now I’m confused on how to approach it, there’s 3 that I could think of:
1. to make `Grant Badge` a modal like `Change Ownership`.
2. to make a new widget appear like so:
(quick mockup in paint)
3. to open the normal badge granting page in `/admin/users/[:id]/[:username]/badges` and fill in the reason automatically with where we first click the `Grant Badge` button
that’s all so far.
If I were a user, I’d rather have 2 though as I don’t have to move to another page and make it flows smoother.
Any opinions? or a different direction I should aim for?
---
### Author:  [@mikechristopher](https://meta.discourse.org/u/mikechristopher)
#### Post date: [2017年三月25日 10:48 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/7 "2017-03-25T10:48:45Z")
No. 2 is definitely the option I would go for in that it opens up the widget to enable a quick grant of badge and then back to the topic your viewing.
---
### Author:  [@mikechristopher](https://meta.discourse.org/u/mikechristopher)
#### Post date: [2017年三月25日 10:51 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/8 "2017-03-25T10:51:03Z")
Saying that it’s very similar to the change ownership feature anyway so it could work just like that couldn’t it
Seems option 1/2 are similar / the same to me?
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [2017年三月25日 11:57 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/9 "2017-03-25T11:57:40Z")
> [@clapmyhands](#):
>
> Any opinions? or a different direction I should aim for?
I think you could probably omit the “Reason” field on this dialog (it should always be set to the post that you clicked on, and I can’t think of a use case where it would need to be changed).
Also, badges should be sorted in order of popularity (of granting), IMO.
---
### Author:  [@clapmyhands](https://meta.discourse.org/u/clapmyhands)
#### Post date: [2017年三月25日 12:29 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/10 "2017-03-25T12:29:47Z")
> [@mikechristopher](#):
>
> Saying that it’s very similar to the change ownership feature anyway so it could work just like that couldn’t it
well yes they’re pretty similar. They will both be on page. Option 2 would pop up a small widget like the admin menu while option 1 would result in a full screen pop up like change ownership. Personally I don’t mind either but I’d rather follow current convention. What do you think @sam?
> [@ChrisBeach](#):
>
> I think you could probably omit the “Reason” field on this dialog
🤔 I agree. If we’re already granting the badge from the post we prob don’t need to change the link.
> [@ChrisBeach](#):
>
> Also, badges should be sorted in order of popularity (of granting), IMO.
as for this, I was thinking it would follow the way it’s listed on the normal badge granting workflow. So I think if you want badge to be sorted on popularity, that would be a separate topic in itself. 🙂
---
### Author:  [@mikechristopher](https://meta.discourse.org/u/mikechristopher)
#### Post date: [2017年三月25日 12:46 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/11 "2017-03-25T12:46:53Z")
I agree with the omitting of the reason - the post that you trigger the badge from should be the reason.
Also I agree that the badges should be as per current workflow and not as popularity. I tend to use the filter for the badge I want so for example typing 15 would return all badges with 15 on it so if that is possible to implement that would be great.
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [2017年三月25日 12:59 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/12 "2017-03-25T12:59:13Z")
> [@mikechristopher](#):
>
> I tend to use the filter for the badge I want so for example typing 15 would return all badges with 15 on it so if that is possible to implement that would be great.
I tend to use the forum mostly via smartphone, and typing to search is not possible or practical here.
There are loads of badges, but only one or two that mods would grant manually. That’s why I’d prefer these to appear at the top of the list
---
### Author:  [@mikechristopher](https://meta.discourse.org/u/mikechristopher)
#### Post date: [2017年三月25日 13:05 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/13 "2017-03-25T13:05:48Z")
Completely understand that certainly one of the downfalls on mobile I find also as on desktop it’s much easier.
Personally I prefer in alphabetical order as have about 60 odd badges half of which are used quite a bit so having it in popular order I think for us would be confusing to find the one we want. I do however understand why you want it if there is only a couple you use all the time.
---
### Author:  [@clapmyhands](https://meta.discourse.org/u/clapmyhands)
#### Post date: [2017年三月25日 13:19 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/14 "2017-03-25T13:19:22Z")
in my opinion, it would be great to have a setting for sorting(e.g. most used, alphabetical, recently used, etc by default) which can be configured but I’m digressing here and I feel that would be a topic on its own.
and I admit I don’t really open discourse on phone but I can think how it would be trouble some to keep searching but for now, having badge granting be on the same page either option 1 or 2 seem to be a big step up in terms of user experience regardless of the device you’re on
---
### Author:  [@clapmyhands](https://meta.discourse.org/u/clapmyhands)
#### Post date: [2017年三月28日 17:06 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/15 "2017-03-28T17:06:23Z")
Hi, I decided to go forward with option 2 and mock up how it would look like.
It ain’t finished yet but you should be able to roughly see how the workflow will go. The code is still very much band aid programming 😅
Desktop:
Mobile (Nexus 6P using google developer mode):
some questions for the more senior developer,
1. Right now, the widget is linked to [post\_menu.js.es6](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/post-menu.js.es6) treated like post-admin-menu. Is it okay to do that?
2. I didn’t add the action to the handle bar in [topic.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/topic.hbs). Do I need to add it?
3. To add the `grant badge` command itself, where do I look? I was thinking of searching from [here](https://github.com/discourse/discourse/search?utf8=%E2%9C%93&q=grantableBadges)
and for the user, what do you think so far?
also I don’t think I can proceed faster as I’m busy with day job but at the same time I’d like to finish this so I can get the hang of developing in discourse and apply for GSoC 😄
cheers
---
### Author:  [@clapmyhands](https://meta.discourse.org/u/clapmyhands)
#### Post date: [2017年四月5日 15:51 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/16 "2017-04-05T15:51:42Z")
Sorry for no news for quite some time, I was kinda busy with work and all.
So far I’ve went through the code implementing the badge granting on the current workflow.
Some thing’s I’ve encountered:
1. The old workflow was on it’s own page `/admin/users/[:user_id]/[:username]/badges` which have a controller and model(connected to the user).
2. The controller will calculate which badge can be granted (ones that haven’t been granted or can be granted multiple times)
3. At that page you can grant multiple badge without refreshing (the controller will handle the removal of badge from grantable badge if it can only be granted once).
4. it’s shown using the Ember component `combo-box`
from this, several problem that I’m facing would be:
1. First of all, I want the widget to have the same look and feel as the old one and that requires me to connect the component to widget as shown below and I’m not sure yet on how to do that.
> [@How to render Component inside Widget?](https://meta.discourse.org/t/how-to-render-component-inside-widget/52872/2):
>
> If you have control over what you’re doing, I recommend rendering a widget within a widget rather than a component. However, in the cases where that’s not an option you can use the connect function of the decorator helper: [https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6#L88-L107](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6#L88-L107)
1. Every time we open the `grant badge` widget, we have to get the badges that the user already have, get ones that we can grant, and show them. Right now I’m doing this via `UserBadge.findByUsername(attrs.username)` and `Badge.findAll()`. Instead of doing
`Badge.findAll()` again and again, I can probably keep this somewhere. Any suggestion on how to get the `grantableBadge` in a better way?
[https://meta.discourse.org/t/how-to-get-badges-for-a-user/25421/5](https://meta.discourse.org/t/how-to-get-badges-for-a-user/25421/5)
1. The 2 function I mentioned above are async call and I’m not sure how to populate the widget with data after async call. There’s probably a question in #Development somewhere but I haven’t found it yet 😅
Oh and looking at modals in a glance, it seems they have template and controller? Would I be able to use the `combo-box` component there and would that be a better choice instead of widget?
p.s. does onebox-ing between list in markdown breaks it? I like to onebox between list sometimes and my list starts over from 1.
p.p.s. I always feel like my reply become a long essay hope it’s not too troublesome to read 😅
---
### Author:  [@mauditecandela](https://meta.discourse.org/u/mauditecandela)
#### Post date: [2017年十月4日 15:34 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/17 "2017-10-04T15:34:33Z")
Hi everyone! I am working on this topic as my first contribution for the Outreachy Program. I am right now trying to understand the whole code and managed to:
- add a button to the post/admin/menu.js6 to grant a badge
- create a modal that asks the user for the grant they want to grant the user
obviously these are not that difficult tasks but I am trying my best ^^
I have one first question (more to come, for sure): I created a Model and a Controller for the Modal. I would like to import all grantable Badges for the user to the Model, do you know where could I import them from? Or should I redefine the grantable Badges again?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年十月4日 21:51 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/18 "2017-10-04T21:51:56Z")
> [@mauditecandela](#):
>
> I created a Model and a Controller for the Modal. I would like to import all grantable Badges for the user to the Model, do you know where could I import them from? Or should I redefine the grantable Badges again?
I have not looked at this carefully, but I am not sure that we carry that list around, it is ok to make an extra ajax call when you open the modal to get the list.
---
### Author:  [@mauditecandela](https://meta.discourse.org/u/mauditecandela)
#### Post date: [2017年十月5日 21:53 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/19 "2017-10-05T21:53:43Z")
I am sorry, could you please explain further? Which kind ajax call should I make? Sorry, but I am a bit lost. 🙂
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2017年十月5日 23:02 UTC](https://meta.discourse.org/t/improved-badge-granting-workflow/58631/20 "2017-10-05T23:02:49Z")
Would the Badges page JSON do it?
[https://meta.discourse.org/badges.json](https://meta.discourse.org/badges.json)
[下一頁](https://meta.discourse.org/t/improved-badge-granting-workflow/58631.md?page=2)