# Layouts Plugin
**URL:** https://meta.discourse.org/t/layouts-plugin/55208
**Category:** Plugin
**Tags:** pavilion, broken
**Created:** [January 5, 2017, 9:41am UTC](https://meta.discourse.org/t/layouts-plugin/55208 "2017-01-05T09:41:13Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 5, 2017, 9:41am UTC](https://meta.discourse.org/t/layouts-plugin/55208/1 "2017-01-05T09:41:13Z")
This plugin is a framework for custom Discourse layouts. Its main use case is adding sidebars to Discourse.
| Desktop | Mobile (closed) | Mobile (open) |
| --- | --- | --- |
|  |  |  |
đ„[**Get the code**](https://github.com/paviliondev/discourse-layouts)
đ [**Read the documentation**](https://coop.pavilion.tech/c/documentation/discourse-layouts/92)
đ **[Report a bug](https://coop.pavilion.tech/w/bug-report)**
#### Quick Links
[The advantages of the Layouts Plugin](https://coop.pavilion.tech/t/using-the-layouts-plugin/1737)
[Installation and Setup](https://coop.pavilion.tech/t/installation-and-setup/1606)
[Widget Development](https://coop.pavilion.tech/t/widget-development/1618)
> đ Before you post in this topic, [bug reports](https://discourse.pluginmanager.org/w/bug-report) over at [discourse.pluginmanager.org](https://discourse.pluginmanager.org) are much appreciated (itâs easier to manage than one big topic!). If you just have a quick question, itâs fine to post that here.
---
### Author:  [@DanteZii](https://meta.discourse.org/u/DanteZii)
#### Post date: [January 5, 2017, 10:58am UTC](https://meta.discourse.org/t/layouts-plugin/55208/2 "2017-01-05T10:58:09Z")
This is exactly what I need , thank you very much đ
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [January 5, 2017, 3:01pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/3 "2017-01-05T15:01:32Z")
@angus it would be possible to test some functionality in a sandbox to see it in action?
With your other plugins of course.
---
### Author:  [@jez](https://meta.discourse.org/u/jez)
#### Post date: [January 6, 2017, 1:52am UTC](https://meta.discourse.org/t/layouts-plugin/55208/4 "2017-01-06T01:52:44Z")
This is very cool. Iâve had a play with Discourse Layouts and written [dl-custom-content](https://github.com/jezdean/dl-custom-content).
Itâs a tiny plugin using Discourse Layouts to show arbitrary HTML.
A really awesome projects; thank you!
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 6, 2017, 12:50pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/5 "2017-01-06T12:50:44Z")
Great! Iâm just in transit at the moment. Iâll check it out when I get back home next week.
And provide an example instance @trash
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 19, 2017, 4:00pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/6 "2017-01-19T16:00:22Z")
You can now see this plugin in action, along with my other plugins at: [https://dev.civll.com/](https://dev.civll.com/)
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [January 27, 2017, 10:44pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/7 "2017-01-27T22:44:22Z")
Great idea for a widget, I tried it on a test server (with a heavily modified Discourse) but I had a failed to bootstrap, is it working on yours still ?
The profile widget worked well during install.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 28, 2017, 1:17pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/8 "2017-01-28T13:17:40Z")
@jez Thanks again for making a widget that works with Custom Layouts. Iâve submitted a PR to your widget repo to fix the issue @Steven mentions.
[https://github.com/jezdean/dl-custom-content/pull/1](https://github.com/jezdean/dl-custom-content/pull/1)
---
### Author:  [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [January 29, 2017, 4:21pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/9 "2017-01-29T16:21:08Z")
@angus
Thanks for you plugin.
I have some question about your widget.
in your profile widget there is some lines :
```plaintext
h('h3', this.attach('link', {
route: 'user',
model: currentUser,
className: 'user-activity-link',
icon: 'user',
rawLabel: username
}))
```
or
```plaintext
this.attach('button', {
label: "sign_up",
className: 'btn-primary sign-up-button',
action: "sendShowCreateAccount"
})
```
I know what these codes do but I donât know where how to modify these codes.
for example I want to add a create topic button to widget but I donât know how should I change
this code:
```plaintext
this.attach('button', {
label: "sign_up",
className: 'btn-primary sign-up-button',
action: "sendShowCreateAccount"
})
```
I know what is className(used for CSS) and label and rawLabel(used for translation)(if I am wrong please tell me) but I donât know where should I find all other actions for button and icons.
I have another question,
In this code:
```plaintext
h('h3', this.attach('link', {
route: 'user',
model: currentUser,
className: 'user-activity-link',
icon: 'user',
rawLabel: username
}))
```
what does the `route` and `model` do?what is `link`?
Last question, in this code:
`contents.push("img", "")`
how should I config the image source?image is not in my site
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 30, 2017, 3:13pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/10 "2017-01-30T15:13:35Z")
Hey @Alavi1412, if Iâm understanding you correctly, you want to modify the profile widget to add a button that allows the user to open the composer to create a new topic?
Any button has two basic parts two it: the button element, and the button action. I think you already understand the button element part. As you say youâll need to use the `button` widget with the appropriate classes, icon and label (note that the button widget doesnât have a `rawLabel`, only a link does - go to the [button widget file](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/button.js.es6) and search for ârawlabelâ and there will be no matches. Yes the âlabelâ requires a translation object). Weâll also need the button action, which refers to a method that handles what happens when the button is clicked.
This is the process I would take to figure out what we need for both the button element and the button action. I suggest you follow these steps yourself, as it will help you understand other issues youâll encounter.
As always, the place we start is with the existing Discourse functionality we want to copy. In this case we start with the button in normal Discourse that opens the new topic compose when it is clicked.
1. Go to `meta.discourse.org` and highlight the Create Topic button with the chrome inspector. Youâll see it has the id `create-topic`.
2. Do a search for `create-topic` in the Discourse code. These are the results youâll get
3. Click through one of those relevant results and youâll find button elements in templates that give us much of the information we need. e.g.:
4. If you click that new button, youâll see a message in the console `createTopic not found`. We need to deal with the second part of the button, the button action. If youâve read the part of the Ember Guide that covers [Template Actions](https://guides.emberjs.com/v2.3.0/templates/actions/), youâll know that the action handler we got from one of those templates refers to an action method in a corresponding component, controller or route. So letâs just do a search for that handler and find the corresponding instance.
5. Ok weâve now found the method. How do we get that method to work for our widget button? If youâve read [A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347), youâll know that each action in a widget needs a corresponding action handler in the widget. Ok, so letâs create a `createTopic` method in the profile widget that does the same thing the `createTopic` method in the Discovery Route does.
Once you add that new `createTopic` method and reload, your Create Topic button will now (mostly) work like the Create Topic button in the normal Discourse discovery. The composer will open. There are some issues that arise by virtue of the fact that the profile widget can appear in different contexts from the context in which the normal Create Topic button appears.
There are other ways to do the same thing we just did, however the key point here is:
1. Start with what you already know. We know that there is a button in normal Discourse that does what we want to do. Start by figuring out how that works.
2. Copy as much as possible. We can copy from both normal Discourse and the existing code in the profile widget that does similar things to what we want to do.
Using this approach the answers you get will not be 100% perfect, but they will get you 90% of the way there. Once youâre 90% there you have a much better idea of what the 10% of actual problems youâll need to figure out are.
I have to get back to work now, so Iâll leave those other questions with you for now. Apply the same approach and see if you can figure out the answers.
---
### Author:  [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [January 30, 2017, 8:28pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/11 "2017-01-30T20:28:15Z")
@angus
Thank you so much.It helps me very well,
but I still have one question.
when our widget become long(longer than browser height), the button part is not shown after scrolling
before scrolling:
after scrolling:
one part of my widget is at the bottom but because of the height it is not shown even after scrolling.
in the other words, I donât want my widget to float with user,I want to fix the widget in a position
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 30, 2017, 9:31pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/12 "2017-01-30T21:31:09Z")
Yup, thereâs a setting for that actually. Check Settings \> Plugins.
---
### Author:  [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [February 1, 2017, 3:36pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/13 "2017-02-01T15:36:30Z")
@angus
Why widget is not shown in categories page like :
`http://localhost:3000/c/30`
there is a white space in the widgets place but there is no widget
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [February 1, 2017, 4:01pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/14 "2017-02-01T16:01:40Z")
Have you enabled the sidebar on category pages?
You can enable the sidebar either for all category pages in the admin plugin settings or you can enable the sidebar and widgets for specific categories in the category settings.
---
### Author:  [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [February 1, 2017, 4:04pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/15 "2017-02-01T16:04:44Z")
Yes I have done this.but nothing is shown.
[this](https://dev.civll.com/tags/discussion) page can define my problem
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [February 1, 2017, 10:22pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/16 "2017-02-01T22:22:09Z")
Ah, you mean the sidebars are not working on the tags index page?
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [February 2, 2017, 2:10pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/17 "2017-02-02T14:10:14Z")
Iâve added sidebar support to the tags show route. Let me know if that solves your issue.
[https://github.com/angusmcleod/discourse-layouts/commit/7a345ad390aa867233a2dd9ff0adc8b81e7b32d4](https://github.com/angusmcleod/discourse-layouts/commit/7a345ad390aa867233a2dd9ff0adc8b81e7b32d4)
Youâll need to turn sidebars on for the tags route in admin settings
---
### Author:  [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [February 4, 2017, 10:01am UTC](https://meta.discourse.org/t/layouts-plugin/55208/18 "2017-02-04T10:01:51Z")
@angus Thank you for your change but my problem was something else.(apologize for my delay, I was travelling)
I have done every changes you said but I still have this problem:
my widget didnât show here.
[Here](https://gist.github.com/Alavi1412/f3b64aa9753288759ab5c299c1018093) is my code.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [February 4, 2017, 1:30pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/19 "2017-02-04T13:30:58Z")
The problem is that youâre trying to convert the attrs object to a JSON string and itâs failing. This exception is preventing the sidebars from loading on category routes.
Change these lines
```plaintext
alert(path);
alert("state: " + JSON.stringify(state));
alert("attrs: " + JSON.stringify(attrs));
```
to this
```plaintext
console.log(path);
console.log("state: ", state);
console.log("attrs: ", attrs);
```
And check the output in your browser console: View \> Developer \> JavaScript Console
Also, rather than using an ajax call to get your category list, I suggest you use:
```plaintext
const categories = Discourse.Category.list()
```
Let me know if you need any help with the rest of it.
---
### Author:  [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [February 4, 2017, 4:49pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/20 "2017-02-04T16:49:32Z")
awesome !!!
> [@angus](#):
>
> const categories = Discourse.Category.list()
where should I find something like this?
in writing widget I find the data I need in site and then in XHR of network tab in chrome, I find the url and I use this url in my widget and its response in ajax. but your way is very fast and useful. How can I replace my way of getting data by ajax with something like `Discourse.Category.list()`
[Next page](https://meta.discourse.org/t/layouts-plugin/55208.md?page=2)