Tags:
Related
Recommended

DXA Flexible Layouts

Niclas Cedermalm
Have you wondered how you could do more flexible layouts in SDL Web and DXA? And give editor more freedom how they can build page compositions? In this article I will show you one way of doing that with container components.
 
This week I've released some new DXA modules in my Github repository: 
https://github.com/NiclasCedermalm/modules4dxa-java
 
Two of them I would like address in the blog article:
  • DXA Container Framework - a framework for doing container components in DXA
  • Flex Layout DXA Module - contains a number of container implementations based on vanilla DXA templates
They provide the possibility for an editor to build more flexible layouts in DXA. The DXA container framework introduce a new concept called container components. They are basically containers for other components on a page. When added on a page through Experience Manager an inner drop-zone is created, allowing drag&drop of components into this container. Typical container components are for example carousels, tabs, accordions and different column layouts. It could also be more advanced containers such as dynamic grid layouts, image with a number of overlays etc.
So a container component is technical an ordinary Tridion component but act also as a region in DXA. Comparing traditional regions with containers:
  • Region are a course-grained area on a page, such as main area, side area, header, footer etc. They are managed by the page template/view.
  • Containers are more fine-grained areas on a page which can be managed by editors such as adding new layouts on the page, add components to the layouts and move components between layouts.
I’ve recorded a short video highlighting some of the possibilities with container components: 

  

The Solution

To make it work nicely together with Experience Manager, all components (containers and container items) needs to placed onto the page itself. The first solution that you might consider is to have containers with component links to the items. I tried that but I got some issues with Experience Manager when dropping new items into a container, where update preview is not detected in a correct way. Another disadvantage solving it with component links is that you create a hard connection between the container and the items.

So after some tries I come up with the solution to have container and attached items beside each other on the page where the order on the page is important. Basically flatten the container structure into a plain list on the page. This is not a new invention, I’ve been playing around with this idea in customer projects in my previous life as consultant and as will in older customer demos. So this concept was reused and modernised into a DXA version. See below example how a page can be built up with containers and container items:
 
Example of a DXA page with 3 containers:
  • Carousel with 2 teaser items
  • 3-Column layout with 3 teaser items
  • 2-Column layout with 2 teaser items

In CME the page looks as following:   

Containers and container items are paired using region names. Each container template defines a region it can host by specifying the following in the DXA MVC metadata field ‘Route Values’: 
 
containerRegion:[region name]
 
The templates of the container items uses the standard ‘Region Name’ metadata field. Example: 
 
The region info in the templates is used to generate correct XPM drop-zone info and pair container and container items together during rendering. The assembly of the container structure is managed by an add-on DXA page builder that reshuffle the plain page structure in DXA to a tree structure. In addition there is also an CME extension that is triggered when saving pages. This to make sure that container order is remained when drag&dropping components via Experience Manager. An little hint is embedded into the XPM drop-zone metadata on the page which can be used to keep the structure on the page when components are added or moved. For example when adding a component to a empty drop zone, XPM drops those components at the end of the page. That could break the whole container structure. So here will the CME extension figure out the correct container (based on the drop-zone hint) and move the newly added component to its correct place.
 
Right now is this implemented for DXA.Java, but it should not take that much effort to migrate it to .NET if needed.
 

Getting Started

To setup the DXA framework and the FlexLayout DXA module you need to do the following:

  1. Install the CME extension as described here: https://github.com/NiclasCedermalm/modules4dxa-java/tree/master/dxa-container-framework
  2. Clone the code repository: git clone https://github.com/NiclasCedermalm/modules4dxa-java
  3. Run the CMS import scripts as described here: https://github.com/NiclasCedermalm/modules4dxa-java/blob/master/dxa-module-flex-layout/cms/README.md
  4. Compile the Java code and install it in your local maven repo: mvn install –Pflexlayout (run in the root of the cloned repo)
  5. Add the module to your DXA webapp as described here: https://github.com/NiclasCedermalm/modules4dxa-java/tree/master/dxa-module-flex-layout
  6. Republish the Settings page and do /admin/refresh to trigger reload of all DXA config
  7. Now it should be possible to create new pages with various flexible layouts :-)

 Let me know if you find any issues etc with the modules. Let's make some flexible DXA pages ;-)