To develop a new CMS component in SAP Hybris 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.

$katalog-id=Content-Energie
$katalog-version=Staged
$contentCV=catalogVersion(catalog(id[default=$katalog-id]),version[default=$katalog-version])[default=$katalog-id:$katalog-version]
 
INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true];validComponentTypes(code)
;main_priceChartEvolutionPage_pos;$priceChartEvolutionPage_template_id;CMSMainPriceChartComponent

• 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 automatically. If it doesn't, you should add:

@RequestMapping("/CMSMainPriceChartComponentController")

• 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. The facade symplifies the uses of the services and avoids putting business logic into the controllers
• You may also change some service.
• Create a JSP file which renders your CMS component. You should follow the Hybris 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.

Using an custom extension: https://wiki.hybris.com/display/release5/How+To+Add+a+New+CMS+Component+-+Tutorial

Using an AddOn: https://wiki.hybris.com/display/tr52/Expose+a+new+CMS+Component+type+through+an+AddOn

– Based on SAP Hybris 6.3