Create a custom CMS component in Hybris

Hybris Logo

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.

 

32
Leave a Reply

avatar
11 Comment threads
21 Thread replies
9 Followers
 
Most reacted comment
Hottest comment thread
14 Comment authors
Sébastien GuillemetteMohamed BELMAHIRakesh PPrajwal PoonachaRodrigo Costa 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

Rakesh P
Guest
Rakesh P

HI Mouad,
Is it cumpulsory to create a controller in order to add new component.
Are their any other way out without adding the controller way.

Mohamed BELMAHI
Admin

Basically the controller is not compulsory for new custom component, and what really happens when you create a new component without its Controller
the component will be based on a default controller (com.wonder.storefront.controllers.cms.DefaultCMSComponentController) who is going to fill all components attributes on model
and you can get access to them from jsp by ${component.customAttribute}

I hope this is unswerving your question.

Rakesh P
Guest
Rakesh P

Thanks for the reply.

Sébastien Guillemette
Guest
Sébastien Guillemette

Hi Mouad,

Is there a way to show the component in a specific location in a page? In my solution, i have a Page JSP (Not a component) and i wish to replace an image with a CMS Image Component between 2 paragraphs. Look a bit different than your example.

Thanks!