Create a custom CMS component in Hybris

CMS Components is what makes the WCMS module of SAP Hybris so powerful and so flexible.

In this article, I will show you how to create a custom cms component in Hybris.

1. Overview

A cms component consists of three elements interact with one another : Model, JSP and Controller.

• Model : identify the component with a uid, name, catalog version and also holds the inputs to be sent to the JSP.
• JSP : is the template of the component, describe the look and feel of it.
• Controller : is the mediator between the Model and the JSP, inputs are sent from the Model to the JSP with the help of it.

In SAP Hybris there are already many cms components come within the Accelerator hence for the most cases there is no need to create new components.

Example Out-of-the-Box components: CMSParagraphComponent, CMSImageComponent, BannerComponent, CMSLinkComponent…

2. Implementation

Let’s try to create a new component, in Hybris there is no Out-of-the-Box component allows to display an embed video, so let’s try it 🙂

We will use YouTube’s script to add embed videos to our pages :

<iframe 
	width="700" 
	height="400" 
	src="https://www.youtube.com/embed/xcJtL7QggTI?autoplay=0&controls=1">
</iframe>

This script needs five inputs, they are the inputs for our component :

• width : video  frame width (700).
• height : video frame height (400).
• autoplay : play or not the video automatically (1 or 0).
• controls : display or not Player controls (1 or 0).
• videoId : the id of the video (xcJtL7QggTI).

2.1. Create the Model

Create a new itemType with YoutubeVideoComponent as a name and extends SimpleCMSComponent.

<itemtype code="YoutubeVideoComponent"
		  extends="SimpleCMSComponent"
		  jaloclass="com.stackextend.training.jalo.components.YoutubeVideoComponent">

	<attributes>
		<attribute qualifier="width" type="java.lang.Integer">
			<modifiers/>
			<persistence type="property"/>
		</attribute>

		<attribute qualifier="height" type="java.lang.Integer">
			<modifiers/>
			<persistence type="property"/>
		</attribute>

		<attribute qualifier="videoId" type="java.lang.String">
			<modifiers/>
			<persistence type="property"/>
		</attribute>

		<attribute qualifier="autoPlay" type="java.lang.Boolean">
			<modifiers/>
			<persistence type="property"/>
		</attribute>

		<attribute qualifier="showControls" type="java.lang.Boolean">
			<modifiers/>
			<persistence type="property"/>
		</attribute>
	</attributes>
</itemtype>

2.2. Create the JSP

The JSP is where we will put YouTube’s script, the JSP file should have the same name as the Model youtubevideocomponent.jsp.

<%-- web/webroot/WEB-INF/views/desktop/cms/youtubevideocomponent.jsp --%>

<%@ page trimDirectiveWhitespaces="true" %>

<iframe
        width="${width}"
        height="${height}"
        src="https://www.youtube.com/embed/${videoId}?autoplay=${autoPlay}&controls=${showControls}">
</iframe>

2.3. Create the Controller

It’s a basic Spring MVC controller extends the AbstractCMSComponentController and implements fillModel(...).

package com.stackextend.training.storefront.controllers.cms;

import ...;

@Scope("tenant")
@Controller("YoutubeVideoComponentController")
@RequestMapping("/view/YoutubeVideoComponentController")
public class YoutubeVideoComponentController 
	extends AbstractCMSComponentController<YoutubeVideoComponentModel>
{
	@Override
	protected void fillModel(HttpServletRequest request, Model model, YoutubeVideoComponentModel component) {

		model.addAttribute("width", component.getWidth());
        model.addAttribute("height", component.getHeight());
        model.addAttribute("videoId", component.getVideoId());

        model.addAttribute("autoPlay", BooleanUtils.toBoolean(component.getAutoPlay()) ? 1 : 0);
        model.addAttribute("showControls", BooleanUtils.toBoolean(component.getShowControls()) ? 1 : 0);
	}
}

Our new cms component is now ready to be used, let’s attach it to the home page of our website 😀

2.4. Use the Component

Create an instance of the component using Impex or directly from HMC, fill the inputs with the appropriate data.

Attach the component MyYoutubeVideoComponent to a ContentSlot of the home page (Section3 for example).

If everything goes will this is how our CMS Component will look like in the home page.

3. Conclusion

This is a basic example on how to create a cms component, that could be extended to create more complex cms component.

Mouad EL Fakir

Software Craftsmanship, Stackextend author and Full Stack developer with 6+ years of experience in Java/Kotlin, Java EE, Angular and Hybris…
I’m Passionate about Microservice architectures, Hexagonal architecture, Event Driven architecture, Event Sourcing and Domain Driven design (DDD)…
Huge fan of Clean Code school, SOLID, GRASP principles, Design Patterns, TDD and BDD.