Introducing Zen Garden Blocks

13 April 2017
Tomasz Kaik
Frink_Cognifide_2016_HeaderImages_0117

One of the most important steps when starting a brand new project on Adobe Experience Manager is component development. This requires knowledge of Java, the AEM platform and other related back-end technologies. It can be a time-consuming part of project development and is one of the many reasons to use our site production accelerator, AEM Zen Garden. 

Zen Garden provides you with 26 highly reusable components, designed, built and maintained around years of site production experience and customer research. If you're a regular to the Cog Blog, you'll have seen how authors can use these basic components to quickly create composites with new functionality without any developer input.

While 26 out-of-the-box components therefore provides developers and authors with a solid set of building blocks, occasionally they are not enough. Sometimes, even using style variants you'll need more customisation.  If your new component doesn't require any back-end business logic, it may be tempting to simply edit the HTML on the author page. Something that possibly an author, rather than a developer could do.

An easy work-around perhaps, but a practice that abuses governance and is a highly error-prone solution. To prevent this, Zen Garden's innovative feature, Blocks, provides you with an easy way to create new reusable components. 

What are Blocks?

Blocks are basically an accelerator tool for building components.  They provide an easy way of creating reusable components that don't require any back-end business logic. Blocks use Apache Velocity templating language and they come with many field types, that can look up their values from page metadata.

With Blocks, your theme or front end developers can produce new components for your platform with ease, without any knowledge of Java. All they need to do is provide a markup for the component (using the templating engine) and configure the field types. The component is then available for authors to drag and drop from the components browser. You can read more about the Zen Garden components browser here.

blocks on components browser

Components created using Blocks are available in the components browser.

Perfect for client side processing

Modern websites tend to move a lot of the application logic processing client side, using modern Javascript frameworks. Blocks are perfect for use in this instance. Front-end developers can quickly prepare templates with configurations (e.g. using the AngularJS framework) and provide a smooth authoring experience thanks to this  Zen Garden feature.

Quick and easy 3rd party integration 

If you want to integrate your website with 3rd party services like Facebook, Youtube, Soundcloud, or any rating or comments system, then you won’t need to create a brand new AEM component with an <iframe> element in HTL or JSP file. Using Blocks for integration with 3rd party services is the way to go, as long as you don’t need to make any back-end calculations relating to those components.

blocks - 3rd party

Blocks providing integration with Soundcloud and Youtube.

Want to learn more?

Stay tuned for further articles on Zen Garden and look out for our announcement on the new release which will give you even more useful features.

To find out more about AEM Zen Garden or to schedule a demo, please get in touch with sales@cognifide.com.