20+ life-changing tweaks for Magnolia editors and developers

Published on November 5, 2015 by Jan Haderka

Yes, I recognize the clickbaity nature of the title...But users have reported these tweaks to be quite helpful indeed!

I've been with Magnolia for almost a decade now, so I have come to know a number of people who work with our product as editors, developers or integrators. I feel very lucky to count many of them as friends as well. 

These friends have all been a great source of inspiration for enhancing the product. From time to time, they approach me with ideas or requests that might not exactly fit in with officially endorsed plans for the product, might be too specific to their use case or might only work on certain subsets of product functionality or in certain browsers. 

Because I really like to tinker with things (and I'm such a helpful person), I usually try to help them. Sometimes, they're even nice enough to contribute some of their tweaks in return :)

In those cases, the code doesn't get to be included in the product and so far, I've mostly kept it private. Recently though, a few other people approached me independently and asked if I was willing to share this code collection. 


So here it is. Most of the code is mine, but some of the very important additions are contributed by said friends, mainly by my colleague Tomas Gregovsky (all the css & js related tweaks).

If you decide to use the code in your projects as well, please remember that this is not official Magnolia code, meaning it's not supported and I won't guarantee that it works for you.

I would also ask you to contribute back any fixes or enhancements that you might make to the code - or even just reports on conditions in which a tweak doesn't work properly.

The enhancements can be grouped into two different categories - those for editors and those for developers. 

As it often happens with me, I wrote much more code before I got to post about it, so right now the tweaks come in 2 major branches - 1.0.x (compatible with Magnolia 5.3.x) and 2.0.x (compatible with Magnolia 5.4.x)


For editors

#E1 Full screen width page editor

The action bar is still present in the editor view, but instead of taking up your screen real estate, it is semi-transparent and on top of the page.


#E2 Duplicating components

Not a fully fledged copy & paste, but a simple tool to duplicate a currently selected component into the area in which the component already exists. This makes it super easy to fill up the page with extra data.

In version 1.0.x, the duplication will place the duplicated component at the end of the list. In version 2.0.x, the duplication will place the new component right after the original one.


#E3 Change the component type for existing components

I was surprised to find that what might look like a complex thing to implement only took me about two hours. When using this one, you might sometimes see errors in the page if your templates were not written with the possibility of missing up mandatory data in mind. The edit button should still work, so those cases are easy to fix, just a bit scary when you encounter it for the first time.



For developers (that would be me, so the collection of tweaks is much longer :))

#D1 Linking from the page editor to the template definition

How often do you see a component in a page and want to check its definition? Happens to me all the time. For obvious reasons, this only works for JCR configuration, not for YAML (there was no YAML in 5.3.x, for which this was written in the first place).


#D2 Links to dialogs in a page or components template definitions 

What started as simple "link this" or "link that" actually developed into something I like to call the "one click away" concept - you should only ever be one click away from where you want to go. And yes, the links below really are clickable and will open a tab with the linked data.


#D3 Links to extended nodes in the configuration

Same story as above. It is extremely useful at times to check out the node you are extending. Also, please note that the property value will turn into a link only and only if the linked target is valid, so you have immediate feedback for the value you entered and know if it was entered correctly or not. Side effects? As soon as a property value becomes a link, the only way to edit it is via dialog. No more inline editing ... personally, I don't mind, but if you solve this, please contribute back.

The true beauty of all the linking, which you will come to appreciate only after working with the feature for a while, is opening all those new things in tabs so you can always go back or even switch between tabs to look back and forth. 


#D4 Links from definition to template script

And of course, when editing templates or dialogs, I often want to edit the template itself as well. Again, there's a difference in version 1.0 (for Magnolia 5.3), where the action will directly open the script for editing. In version 2.0 (for Magnolia 5.4), the action will open the resources app and select the script for you - and you need to either open it for editing if it's already loaded in the JCR, or make a "hotfix" first to be able to edit the script.


#D5 Action to build dialogs

This one is very experimental and still needs quite some love, but it will already create a skeleton of a dialog for you.


#D6 Action to build fields

Follow up on the above. Rather than building a complex action to do a dialog with all fields, there is a special dialog just for adding fields to existing dialogs. I never manage to get all the fields initially anyway.


#D7 Action to build a REST client definition

This one was just a quick time-saver for my presentation at the Magnolia conference, designed so that I didn't have to create multiple nodes when I knew I'd be short on time. If you work with REST end points, it will help you too.


#D8 Full width template script editor

Similar to the full width page editor. As a developer, I want to use all my screen estate for editing the code I need to edit online. Not just in resources, but really everywhere. And yes, I know I can make it wider with an extra click, but honestly, when would you not want to use full screen width?


#D9 Action to add anything

Building up on the syntax Magnolia uses for listing a path in the format node/node@property, you can now use the same syntax to create a node path and properties in one go ... Often I end up copying the path I want to create and then just pasting it in another location in the dialog. And yes, you can even specify it so that the node types for all parents are different from the last one in the hierarchy (not that you would need to do this very often).


#D10 Action to create a property

Really, how often do you want to create a property without naming it and giving it a value? Me? Never. I always need to set them up, so rather than doing that in multiple steps, there is now an action to do so in one go.


#D11 Action to create apps

Remember my script for creating apps from more than year ago? Yeah, I got tired of running the script, so there's a simple UI for it now as well (just in version 2.0, but it's backportable if anyone's interested). If you are missing the option for selecting the module in which to create the app, it's because the app will be created in the currently selected module. 


#D12 Extends stats in config

Ever wanted to know how many extends you have? If any are broken? How many overrides you have? Well, now you can :)  (again, just in version 2.0, and a tad harder to backport if you want to try). The styling isn't ideal for this one, but hey, you are free to contribute a fix for that. The best part though? It's clickable. Just click on the broken extend - it will open and you can fix it straight away.


#D13 Action to find usages of nodes

Sometimes it gets hard to know if I can delete a dialog or a template definition. Albeit a bit slow (due to the complexity of the query behind), this action can help you to find usages of dialogs, or templates or any other nodes (in case of extends) in the config.


#D14 In app bookmarks

Since version 5.0, Magnolia offers you favorites to create shortcuts to just about anything. This tweak does something similar, but on a smaller scale and closer to you - you can now add bookmarks directly in the action bar in the config app ... add with one click, scroll & expand to the place where you want to be. Just like that.


#D15 Action to open node in a tab

Sometimes you simply don't want to lose a reference and don't want to be scrolling up and down all the time. Now you can simply open it in an extra tab with a single click.


#D16 Ordered module nodes

Last but not least: 2nd and 3rd level nodes under /modules are alphabetically ordered now (and you can still choose your preferred nodes to be listed out-of-order on top for easy access).


And a few extra bits for good measure

#X1 Rounded icons in app launcher

This was really the result of a remark I heard from someone that the app launcher looks too little like Apple and too much like Windows ... That aside, I have to agree, I like it rounded more :)


#X2 More icons per line in app launcher

Once you get the app concept and start creating your apps for just about everything, you will see why it's necessary :)


For now, and also because a picture is worth a thousand words, please just sit back, relax and watch a few silent videos showing each of those tweaks. 

Tweaks for Editors

Tweaks for Developers


If you liked what you saw and want to try it out too, here's the link to the modules themselves. One module contains all tweaks for editors, one has the tweaks for developers (and one commons jar they both share). 



Please remember that the code in question was only tested on 5-10 different installations and just a couple browsers, so if it doesn't work for you, I'm sorry in advance, and would ask you to report back the problems you encounter. 


You should be fine if you use magnolia 5.3.7 or higher for the 1.0 branch and Magnolia 5.4.2 or higher for the 2.0.x branch. It might even work on older versions, but the older the version you use, the more likely you are to encounter some weird problems. 

Another few words of caution:

  • To install the above tweaks successfully, you need to modify the theme of Magnolia. To do so, change your magnolia.ui.vaadin.theme property in magnolia.properties file to either neatcentral53 in Magnolia 5.3, or to neatcentral54 in Magnolia 5.4. If you are using a custom theme already, you can merge the two themes together and name the result neatcentral-anything-you-want.
  • Version 2.0 is compatible, compiled and will run only with Java 8.
  • Please note that sometimes, links to other definitions do not scroll to their proper position. although selected correctly. This seems to be an issue in Vaadin occurring with location changes triggered from the server instead of from the client. 


Have fun! And until we have comments enabled on blog posts, let us know your feedback on the forums


{{item.userId}}   {{item.timestamp | timestampToDate}}

About the author Jan Haderka

Jan is Magnolia's Chief Technology Officer. He has been developing software since 1995. On this blog, he'll write about Magnolia's connectors, integrations and coding ...with the odd Magnolia usability and development tip thrown in for good measure. He lives in the Czech Republic with his wife and three children. Follow him on Twitter @rah003.

See all posts on Jan Haderka