To develop a new CMS component in Hybris 4.x depending of its complexity you must do some of these steps.


  • Modify items.xml and add at least one new Hybris type for the component. The component is usually a subclass of SimpleCMSComponent. For example: CMSMainPriceChartComponent.
  • Add the localization of the new types and their attributes.
  • Access rights: In some projects you have to modify an impex file with the read, write, create and remove rights.
  • Create new CMS Cockpit configuration files in <extension>\resources\<extension>-config\cockpitgroup:
    • base_CMSMainPriceChartComponent.xml: if the user is going to search for instances of this component
    • contentEditor_CMSMainPriceChartComponent.xml: if the component is going to be edited in the center bottom area of the cockpit.
    • editorArea_CMSMainPriceChartComponent.xml: if the component is going to be edited in the right area of the cockpit.
    • wizardConfig_CMSMainPriceChartComponent.xml: if the user is going to create new instances of this component.
  • If your component is a container -it has attributes with CMS components-, you need to add these fields to the Spring configuration of the CMSSynchronizationService. Here are the details: Synchronization of Parent-Child CMS Components: A working example
  • Update the configuration of the slots to allow instances of the new component in it.
INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true];validComponentTypes(code)
  • If some of the values which are displayed by the component require calculations, you should create a controller.
    • Following our example, the controller would be MainPriceChartComponentController. In this case it would be called by Hybris 4 automatically. If it doesn't, you should add:
    • Most of the controllers are subclasses from DefaultCMSComponentController or AbstractCMSComponentController.
    • If you create a controller, you usually create a new facade or add new methods to an existing one.
    • You may also change some service.
  • Create a JSP file which renders your CMS component. You should follow the Hybris 4 naming convention: in our example the file would be <extension>\web\webroot\WEB-INF\jsp\components\cMSPriceChartTeaserComponent.jsp
  • Rarely you should add Live Edit tags to your JSP file. Unfortunately I don't have any example of it.
  • Add new testing cases to the initial data impex files. The location of this files depends on the project.
  • Write the unit tests for the controller, facade and service.


  • Compare the HTML code with the specification.
  • Rendering of the component
    • in different pages
    • with test cases
    • with different sizes (if applicable)
    • with different Browsers
  • Rendering of the component in Live Edit, if the user works with it.

Further Reading

Tested with Hybris 4.8.12

Add comment

Security code