# Developing Discourse Plugins - Part 5 - Add an admin interface
**URL:** https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761
**Category:** Developer Guides
**Tags:** plugin-guides, tutorial
**Created:** [8월 4, 2015, 8:34오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761 "2015-08-04T20:34:32Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [8월 4, 2015, 8:34오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/1 "2015-08-04T20:34:32Z")
Previous tutorial: [Developing Discourse Plugins - Part 4 - Setup git](https://meta.discourse.org/t/developing-discourse-plugins-part-4-setup-git/31272)
* * *
Sometimes [site settings](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-3-custom-settings/31115) aren’t enough of an admin interface for your plugin to work the way you want. For example, if you install the [discourse-akismet](https://github.com/discourse/discourse-akismet) plugin, you might have noticed that it adds a navigation item to the admin plugins section in of your Discourse:
In this tutorial we’ll show you how to add an admin interface for your plugin. I’m going to call my plugin purple-tentacle, in honor of [one of my favorite computer games](https://en.wikipedia.org/wiki/Day_of_the_Tentacle). Seriously, **[I really love that game](https://twitter.com/eviltrout/status/627119973773746176)**!
### Setting up the Admin Route
Let’s start by adding a `plugin.rb` like we’ve done in previous parts of the tutorial.
**`plugin.rb`**
```rb
# name: purple-tentacle
# about: A sample plugin showing how to add a plugin route
# version: 0.1
# authors: Robin Ward
# url: https://github.com/discourse/purple-tentacle
add_admin_route 'purple_tentacle.title', 'purple-tentacle'
Discourse::Application.routes.append do
get '/admin/plugins/purple-tentacle' => 'admin/plugins#index', constraints: StaffConstraint.new
end
```
The `add_admin_route` line tells Discourse that this plugin will need a link on the `/admin/plugins` page. Its title will be `purple_tentacle.title` from our i18n translations file and it will link to the `purple-tentacle` route.
The lines below that set up the server side mapping of routes for our plugin. One assumption Discourse makes is that almost every route on the front end has a server side route that provides data. For this example plugin we actually don’t need any data from the back end, but we need to tell Discourse to serve up something in case the user visits `/admin/plugins/purple-tentacle` directly. This line just tells it: ‘hey if the user visits that URL directly on the server side, serve the default plugins content!’
(If this is confusing don’t worry too much, we’ll come back to it in a future tutorial when we handle server side actions.)
Next, we’ll add a template that will be displayed when the user visits the `/admin/plugins/purple-tentacle` path. It will just be a button that shows an animated gif of purple tentacle when the user clicks a button:
**`assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.gjs`**
```gjs
import DButton from "discourse/components/d-button";
{{#if @controller.tentacleVisible}}
{{/if}}
```
If you’ve learned the basics of handlebars the template should be pretty simple to understand. The `` is a component in Discourse we use for showing a button with a label and icon.
To wire up our new template we need to create a route map:
**`assets/javascripts/discourse/purple-tentacle-route-map.js`**
```js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
```
A route map is something we added to discourse to make it so that plugins could add routes to the ember application. The syntax within `map()` is very similar to [Ember’s router](https://guides.emberjs.com/release/routing/defining-your-routes/). In this case our route map is very simple, it just declares one route called `purple-tentacle` under `/admin/plugins`.
Finally, let’s add our translation strings:
**config/locales/client.en.yml**
```yaml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
```
If you restart your development server, you should be able to visit `/admin/plugins` and you’ll see our link! If you click it, you’ll see the button to show our purple tentacle:
Unfortunately, when you click the button, nothing happens ☹
If you look at your developer console, you should see an error that provides a clue to why this is:
```plaintext
Uncaught Error: Nothing handled the action 'showTentacle'`
```
Ah yes, the reason is in our template we are depending on a couple of things:
1. That when the user clicks the button, `showTentacle` will be called on the controller.
2. `showTentacle` should set the property `tentacleVisible` to `true` so that the image shows up.
If you haven’t read the [Ember Guides on Controllers](https://guides.emberjs.com/release/routing/controllers/) now is a good time to do so, because we’ll implement a controller for our `purple-tentacle` template that will handle this logic.
Create the following file:
**assets/javascripts/discourse/controllers/admin-plugins-purple-tentacle.js**
```js
import Controller from "@ember/controller";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
export default class AdminPluginsPurpleTentacleController extends Controller {
@tracked tentacleVisible = false;
@action
showTentacle() {
this.tentacleVisible = true;
}
}
```
And now when we refresh our page, clicking the button shows our animated character!
I’ll leave it as an extra exercise to the reader to add a button that hides the tentacle when clicked 😄
If you are having trouble getting your version of this plugin working, I’ve pushed it to [github](https://github.com/eviltrout/purple-tentacle).
* * *
### More in the series
Part 1: [Plugin Basics](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-1/30515)
Part 2: [Plugin Outlets](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-2-plugin-outlets/31001)
Part 3: [Site Settings](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-3-custom-settings/31115)
Part 4: [git setup](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-4-git-setup/31272)
**Part 5: This topic**
Part 6: [Acceptance tests](https://meta.discourse.org/t/beginner-s-guide-to-creating-discourse-plugins-part-6-acceptance-tests/32619)
Part 7: [Publish your plugin](https://meta.discourse.org/t/beginner-s-guide-to-creating-discourse-plugins-part-7-publish-your-plugin/101636)
* * *
This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/04-plugins/05-admin-interface.md).
---
### Author:  [@snjqi188](https://meta.discourse.org/u/snjqi188)
#### Post date: [8월 6, 2015, 12:38오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/5 "2015-08-06T00:38:00Z")
Hm, doesn’t seem to work on my local side… did anyone face the same problem?
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [8월 6, 2015, 2:39오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/6 "2015-08-06T14:39:58Z")
What’s the problem? If you install the purple tentacle plugin does it not work?
---
### Author:  [@snjqi188](https://meta.discourse.org/u/snjqi188)
#### Post date: [8월 6, 2015, 11:36오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/7 "2015-08-06T23:36:02Z")
edit: issue resolved. it works!
@eviltrout nope, it doesn’t work. I believe @ladydanger is also facing the same problem.
nothing appears in the site settings or plugins tabs.
I tried both following the instructions as well as symlink-ing your plugin (dl-ed from github).
I then tried to create server.en.yml, client.en.yml, settings.yml following the format of other plugins, but the image wouldn’t render anyhow.
probably something wrong with the ..route-map.js.es6 or config files.
interestingly enough, akismet’s plugin does work for me.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8월 6, 2015, 11:51오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/8 "2015-08-06T23:51:44Z")
One issue that keeps on biting me is that I still need to do
```plaintext
rm -fr /tmp/cache
```
To kick away some odd caching we have in _some_ cases.
---
### Author:  [@snjqi188](https://meta.discourse.org/u/snjqi188)
#### Post date: [8월 6, 2015, 11:53오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/9 "2015-08-06T23:53:32Z")
@eviltrout
oh now this is an interesting finding - apparently our ad plugins were interfering with the purple-tentacle plugin. or the other way round. it works now, after having removed the ad plugin files.
- it now works with our ad plugins! possibly some minor bug yesterday. all is good!
@sam, what’s the difference between `rm -rf tmp` and `rm -fr /tmp/cache`
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8월 7, 2015, 12:01오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/10 "2015-08-07T00:01:10Z")
I usually only delete the cache directory, no need to nuke the entire tmp directory.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [8월 7, 2015, 12:19오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/11 "2015-08-07T00:19:22Z")
> [@snjqi188](#):
>
> possibly some minor bug yesterday
Are you sure it was a plugin conflict?
I copied it into my localhost plugin folder and started up the VM _without_ removing the temp folder and got the same results as you posted.
I was puzzled to see the route in object dot notation but ignored that.
I then started up the VM and _did_ remove the temp folder and all was OK
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [8월 7, 2015, 3:49오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/12 "2015-08-07T03:49:47Z")
Actually, sometimes you need just cache, and sometimes you need the whole tmp directory.
Maybe we could have an initializer that checks the timestamps on the plugin folders and nukes tmp if they were updated (dev only).
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [8월 7, 2015, 2:17오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/13 "2015-08-07T14:17:30Z")
> [@snjqi188](#):
>
> it now works with our ad plugins! possibly some minor bug yesterday. all is good!
One thing I really should have warned you about is I started raising errors on ember deprecations. We are really working towards upgrading our version of Ember soon and I wanted to make sure developers caught them. It’s possible your plugin has a deprecation or two and is now raising an error with the latest version of Discourse.
If you can’t figure out how to fix the deprecation, it’s okay to temporarily disable it in the Discourse working directory you are using. Try removing [these two lines](https://github.com/discourse/discourse/blob/master/app/views/common/_discourse_javascript.html.erb#L29-L30).
---
### Author:  [@webeindustry](https://meta.discourse.org/u/webeindustry)
#### Post date: [2월 14, 2016, 2:36오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/14 "2016-02-14T02:36:41Z")
No clue what I’m doing wrong here, but it shows up like this:
It must be the /config/locales/en.yml not loading, but why?
I put this file structure in the root of the plugin directory. Verified it’s there, nuked the tmp, restart rails.
```
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
```
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2월 14, 2016, 7:48오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/15 "2016-02-14T07:48:26Z")
> [@webeindustry](#):
>
> but why?
I was a bit surprised to see the file named “en.yml” but figured either eviltrout knew something I didn’t (which I’m sure he does … anyway) or that maybe something had changed the way things worked.
I’m guessing that what Robin meant was **client** ,en.yml because that works for me.
> [@webeindustry](#):
>
> in the root of the plugin director
the file goes in the plugins config/locales folder
---
### Author:  [@webeindustry](https://meta.discourse.org/u/webeindustry)
#### Post date: [2월 14, 2016, 9:33오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/16 "2016-02-14T09:33:26Z")
Thanks I’ll try that after I get my dev environment setup on the xeon, went through hell getting ubuntu 16.04 to work right with my hardware. Turned out it wasn’t the server mobo, but the new nvidia card.
Yea I meant I put all the directories listed hierarchically starting with the plugins folder. Was wondering if for some reason that last file went elsewhere.
---
### Author:  [@webeindustry](https://meta.discourse.org/u/webeindustry)
#### Post date: [2월 14, 2016, 11:53오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/17 "2016-02-14T23:53:20Z")
Same thing.
I tried naming the file client,en.yml, client.en.yml, and creating a client folder placing en.yml inside it.
Same result
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2월 15, 2016, 12:06오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/18 "2016-02-15T00:06:57Z")
Did you stop vagrant, clear the cache
$\> rm -rf tmp
and restart vagrant?
---
### Author:  [@webeindustry](https://meta.discourse.org/u/webeindustry)
#### Post date: [2월 15, 2016, 12:09오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/19 "2016-02-15T00:09:51Z")
I’m not using vagrant, yes I nuked tmp, restart rails.
This is a bit too annoying, and not a big deal. I’m going to move forward, but thanks for the efforts.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2월 15, 2016, 12:24오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/20 "2016-02-15T00:24:59Z")
I have a feeling you may have the folder structure wrong, or maybe the naming. Mine is like
```plaintext
/discourse
../plugins
..../{yourpluginname}
......plugin.rb
....../config
........settings.yml
......../locales
..........client.en.yml
..........server.en.yml
....../assets
......../javascripts
........../discourse
............{yourpluginname}-route-map.js.es6
............/controllers
..............admin-plugins-{yourpluginname}.js.es6
............/templates
............../admin
................plugins-{yourpluginname}.hbs
```
---
### Author:  [@webeindustry](https://meta.discourse.org/u/webeindustry)
#### Post date: [2월 15, 2016, 1:38오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/21 "2016-02-15T01:38:07Z")
That’s the file structure I have.
I don’t see a point in getting stuck on this, already hacked together a couple of rails sites and trying to absorb as much as possible.
Just going to leave this as some simple error on my part that I’ll come look back at later on and probably realize right away what it was.
Thanks, thou
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2월 16, 2016, 4:00오후 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/22 "2016-02-16T16:00:56Z")
Another mistake of mine! I’ve updated the OP, thanks.
---
### Author:  [@Einsteino](https://meta.discourse.org/u/Einsteino)
#### Post date: [3월 24, 2016, 6:15오전 UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761/23 "2016-03-24T06:15:18Z")
Is there any way I can change a global plugin setting, say, a siteSetting, from here?
I need admins to be able to use this interface to add data into a global array.
[Next page](https://meta.discourse.org/t/developing-discourse-plugins-part-5-add-an-admin-interface/31761.md?page=2)
