Steps to create a cms component

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

Development

  • 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.

The following section refers to the WCMS Cockpit. This extension will be replaced by SmartEdit and is deprecated since SAP Hybris 6.7. SmartEdit will support the old features and new ones.

  • 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.

Testing

  • 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

Discussion

Enter your comment. Wiki syntax is allowed: