After zoom and focus the last special mode is expand described here. The concept for it came well before those other two and differs from them significantly. On one hand it does not need to extend parsys with new selectors, but on the other - it's a little entangled on its own...

I've introduced two examples for it within AEM Tools. One can be checked in the video made for focus mode and shows how they work in tandem in a table page. The simplest possible case is showcased via raw expandable component in an example page. Note that both of them work under cf# - it's not a coincidence since in AEM 6.3 editor.html does not allow the main ingredient expand requires.

The idea is actually quite simple on the surface. Let's say we have a cq:Page node in our repository under the path /content/enigmatic/expandable. Underneath the page exists our complex component /content/enigmatic/expandable/jcr:content/content/expandable. We can edit our page from within /content/enigmatic/expandable.html rendering. But why not edit our component visually from a similar rendering maybe as well then: /content/enigmatic/expandable/jcr:content/content/expandable.html somehow? How can we achieve that? Unfortunately the setup is not that straightforward and needs a couple of tricks. What is easy to use for the user is also usually complicated under the hood...

Let's examine the structure on the expandable example:

• An author opens a page /content/enigmatic/expandable,
• The page gets rendered as a resource of type enigmatic/pages/content by the usual renderer,
• content.html includes a parsys named content which contains a resource of type enigmatic/test/expandable named expandable,
• The resource /content/enigmatic/expandable/jcr:content/content/expandable gets rendered by the usual renderer,
• The file expandable.html contains the final look of our component from the publish perspective,
• The context menu of our component contains a custom Expand button. A click on the button redirects to the independent expand edit page: /content/enigmatic/expandable/jcr:content/content/expandable.expand.html.

So basically we have this kind of structure:

That was actually quite straightforward. We establish an example content structure and from non-statdard operations - only introduce a new button which simply moves us to a different URL. What happens next then? That's the heart of the solution:

• The browser opens a URL: /content/enigmatic/expandable/jcr:content/content/expandable.expand.html,
• That is not a page though! It is a simple nt:unstructured resource of type enigmatic/test/expandable. But there is an additional selector here to consider: expand. After examination we conclude that AEM renders output using file enigmatic/foundation/complex/expand/expand.html,
• The file expand.html only includes the current page, but forces it to be rendered as enigmatic/foundation/complex/expand/page. It is a custom page component that extends enigmatic/pages/base and overrides the file main.html,
• The script main.html includes /content/enigmatic/expandable/jcr:content/content/expandable forcing it to be rendered as enigmatic/test/expandable/expand/author,
• We can finally find our author-only and author-friendly rendering in the file enigmatic/test/expandable/expand/author/author.html,
• Additionally - there is a Collapse button within the component expanded page that allows us to go back to the source page itself.

The structure changed like this now:

Once the above is in place the usage scenario is actually not that difficult. The expandable component needed the following:

• an entry in cq:editConfig to add the button,
• an expand/author subcomponent directly under enigmatic/test/expandable with the author script.

The table's row needed:

• cq:editConfig
• the authoring script,
• an entry inside designs.

Since the header extends the row - its expand/author also extends its row's counterpart. But the designs are separate anyway.

Note that the designs file is different compared to what a normal authoring mode would provide. The difference is obviously an addition of the following intermediate xml elements:

<page jcr:primaryType="nt:unstructured">
	<author jcr:primaryType="nt:unstructured">...</author>
</page>

Unfortunately that's an inevitable consequence of the double proxy approach described above.

So to summarize - these would be the steps to introduce expand mode to a new component:

• make it extend complex,
• configure Expand button in cq:editConfig,
• create an authoring component in the location expand/author relative to your component (it's important to keep it this way exactly),
• modify designs to incorporate intermediate page/author nt:unstructured nodes directly under the one corresponding to your component.

There are some drawbacks of this approach unfortunately.

• It will not work for Touch UI currently since editor.html renders cq:Page resources only... Check for yourself - any resource will produce an empty page.
• Designs get extra nodes that will affect the search paths for placing the components based on them - I've noticed a slight decrease in performance in Classic UI sometimes.