Help on developing and using custom components

[Lennart Kruse (via Magnolia Forums)]

Hi,

this is the first time I use Magnolia and I'm having a hard time building my own template:

Right now I have a page template in [Configuration]/modules/templating/templates/pages/home. This works, I can use this template for a new page.

Then I added an area (type: list) as described in [url]http://documentation.magnolia-cms.com/templates/introduction.html#Areas[/url]. This works as well, meaning I see the component selector within my page's preview.

Now the tricky part: Building a custom component and wire it with my area list. I tried building the component in [Configuration]/modules/templates/components/largeTeaser, as described in [url]http://documentation.magnolia-cms.com/templates/introduction.html#Components[/url], but how do I wire it to my area list? The documentation says to use [quote]<module name>:<relative path to component>[/quote], which would be [quote]templating:templates/components/largeTeaser[/quote], right? But the result is: [quote]ERROR fo.magnolia.pages.app.action.CreateComponentAction: Exception caught: No template definition registered for id: templating:templates/components/largeTeaser[/quote]...

BTW: I would suggest to add an example to the documentation. And [url]http://documentation.magnolia-cms.com/templates/stk/template-prototype.html#Availablecomponents[/url] says components "are typically configured in Template Definitions > /components" - isn't this inconsistent? If not: How do I wire components from there?

Thanks in advance,
crusy

[Antti Hietala (via Magnolia Forums)]

Hi crusy,

[quote]ERROR fo.magnolia.pages.app.action.CreateComponentAction: Exception caught: No template definition registered for id: templating:templates/components/largeTeaser[/quote]

The error suggests that the system cannot find your component definition at the given location or the component definition is not correct.

Things to check:
* The path in your component ID is longer than the tutorial examples. Is templating:templates/components/largeTeaser a valid path or should it be templating:components/largeTeaser?
* Is the component definition correct? Check that your largeTeaser component definition has at least a renderType property, and probably also a script property.

[quote]http://documentation.magnolia-cms.com/templates/stk/template-prototype.html#Availablecomponents says components "are typically configured in Template Definitions > /components" - isn't this inconsistent? If not: How do I wire components from there?[/quote]

Template Definitions > /components is a shortcut to /modules/standard-templating-kit/templates/components. That's where Standard Templating Kit component definitions are. Your own components don't have to reside at that path. In the templating tutorial we put the component definitions under the Templating module instead. In fact, the best practice is to create your own module and define components there. But take one step at a time. :)

You can reference components from any module and path with the id property. Examples:

STK Video component
id = standard-templating-kit:components/content/stkVideo

STK Stage XL
id = standard-templating-kit:components/stages/stkStageXL

Category cloud
id = categorization:components/catCloud

Your large teaser?
id = templating:components/largeTeaser

--Antti

[Lennart (via Magnolia Forums)]

Thanks Antti,

it seems it really has to be "templating:components/largeTeaser", not "templating:templates/components/largeTeaser". Kind of confusing, see image:

[img]Loading Image...[/img]

"templating" is the module, but below "templating" there comes "templates". Why do I have to skip this in the "id"-tag? Seems "templates" is some mandatory folder...

Anyway: Thanks again :-)
crusy

[Lennart (via Magnolia Forums)]

Hm, and right the next problem: I have a dialog in modules/templating/templates/dialogs/largeTeaser, but neither
templating:templates/dialogs/largeTeaser
nor
templating:dialogs/largeTeaser
seems to work... :-( This UI [i]may[/i] be easy to use for editors, but it really isn't for developers!

[Wolfgang Wachsmuth (via Magnolia Forums)]

At first it really looks confusing and I was struggling too.
But take your time and study the configured stk components, dialogs and pages. You will learn a lot! The next step is, to copy some nodes and alter what you want. Then you can experiment what is needed, what you can extend etc. After some weeks everything seems very clear and straight forward. Magnolia configuration mechanism is very mighty and flexible, so you just have to learn a little bit by try and error/copy-paste


I had some moments too I could scream ;-)

[Antti Hietala (via Magnolia Forums)]

Move the dialog definition to /modules/templating/dialogs/largeTeaser. Reference it from the component definition with templating:largeTeaser.

[quote]This UI may be easy to use for editors, but it really isn't for developers![/quote]

Duly noted. You may have hit the one thing that changed a bit between 4.5 and 5.0: dialog definitions. Here's the tutorial updated with M5 trees, hope it helps. http://wiki.magnolia-cms.com/display/DOCS/Introduction+to+templating Referencing a dialog works the same, though.

--Antti

[Lennart (via Magnolia Forums)]

Ah, thanks again. Restructuring the dialog to "actions"/"form" did the trick. So [url]http://documentation.magnolia-cms.com/templates/introduction.html#Creatingacomponentdialog[/url] is no longer valid, even though [url]http://wiki.magnolia-cms.com/display/DOCS/Templates[/url] says so. I will have to note this to myself for the next time :-)

Thanks again!

[Lennart (via Magnolia Forums)]

Bundled learnings (in German): [url]http://blog.crusy.net/2013/07/09/magnolia-cms-templates-mit-custom-komponenten-und-dialogen/[/url]