Page tree
Skip to end of metadata
Go to start of metadata


In Magnolia 4.x series there exists a mechanism allowing modules to inject their own javascript into the page rendered in edit mode by the cms. All javascript files under /mgnl-resources/js-classes would be aggregated into one big javascript.js file and injected into the page being edited. This was basically the mechanism used by SoftLocking to work. Since 5.0 and its focus on apps this mechanism is no longer available, still some modules, e.g. the new SoftLocking, need to be able to augment the PageEditorSubApp functionality and interact with it when it starts, stops, goes in edit and preview mode.


SoftLocking, in particular, needs to add an extension like Vaadin's Refresher add-on which would poll the server periodically in order to get information about a page being edited (who is editing it, whether it's been saved while being edited concurrently etc.) in order to display it to users editing it concurrently. The extension also would need to know when the app is starting/stopping or switching to preview/edit mode in order to react appropriately.


  • Custom apps can register extensions by declaring them in configuration as a sub-node of the page editor sub app, i.e.  /modules/pages/apps/pages/subApps/detail/extensions (extensions being the name of such special plug-ins in Vaadin 7).
  • Extensions will need to implement a PageExtensionInterface (extending Vaadin's Extension interface) making them aware of PageEditorSubapp main events, i.e. start, stop, preview, edit
public interface PageEditorExtension extends Extension {

    void onStart(PagesEditorSubAppView view, String nodePath, UiContext uiContext);

    void onStop();

    void onPreview();

    void onEdit();


     * An extension will typically "add itself" to the connector by using its protected extend(..) method.


    void addTo(AbstractClientConnector connector);


  • Upon starting the sub-app extensions would be 
    • instantiated/loaded in the order they are declared in the configuration tree 
    • added to the page editor view via the addTo(..) method
    • their onStart(..) method would be called
  • Upon stopping the sub-app 
    • extension's onStop() method would be called
  • Upon switching to preview mode
    • extension's onPreview() method would be called
  • Upon switching to Edit mode
    • extension's onEdit() method would be called

Sample configuration


A spike was done and is available at the following branches

  • No labels