Create a custom CMS component in Hybris

Hybris featured image

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.

core concept of cms component in sap hybris

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: CMSParagraphComponentCMSImageComponentBannerComponentCMSLinkComponent

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.

create new cms component via hmc in sap hybris

 

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

attach cms component to content slot via hmc n sap hybris

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

display cms component on page in sap hybris

3. Conclusion

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

 

28
Leave a Reply

avatar
9 Comment threads
19 Thread replies
8 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
Prajwal PoonachaRodrigo CostaJyotiissamalya Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Itesh Jadhav
Guest
Itesh Jadhav

Hi Mouad ,

How we can fetch category image in our Custom component (i.e fillModel method) at run time

Houssein
Guest
Houssein

thank yououou very useful

Ernie
Guest
Ernie

Hi Mouad,

How do you override CMS component jsp in an addon

alya
Guest
alya

Thank you for this tutorial Mouad. Following this approach, can we change or author the youtube link from smart edit.
I mean i want to create a video component but at the same time i should be able to change or author different youtube links via smart edit.

Nick
Guest
Nick

Hello Mouad! Let’s say that I’ve create my custom cms component. Also, I created a new ContentSlot, ContentSlotName and assigned my component to that slot using ContentSlotForPage. Now I display it using “<cms:pageSlot …". So far so good. It is presented both on the Staged and, after synchronization, on the Online catalog version. But I want to be able to edit this component in the WCMS cockpit. I found out that editing .vm template files is needed. Still, having added my own 'section' in the corresponding .vm template file, I see no changes. So, I want to see my ContentSlot… Read more »

raffaele
Guest
raffaele

Hi Mouad,
I’m trying to create a sidebar on a hybris page.
my question is:
how can I make sure that the sidebar can be seen in all the pages, in the same way as the navbar.
could you indicate a safe way to solve this problem?
thank you

Raffaele

alya
Guest
alya

Thank you for this tutorial Mouad. Following this approach, can we change or author the youtube link from smart edit.
I mean i want to create a video component but at the same time i should be able to change or author different youtube links via smart edit.

Jyoti
Guest
Jyoti

Hi Mouad,

I want to show the attributes in certain order like first height , then videoId, then width and so on. How to achieve this ordering while opening the component? Mentioning in this order in items.xml doesn’t work.

Rodrigo Costa
Guest
Rodrigo Costa

UOOW Great man!! Helped me a lot!

Prajwal Poonacha
Guest
Prajwal Poonacha

Hi Mouad,

1. Is it by convention the Name of controller should be same as Model with Controller prefix.
2. Is it possible to skip the Controller creation .

Regards,
Prajwal