meta data for this page
  •  

This is an old revision of the document!

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

If you are extending the B2B or B2C accelerators, you have to create an addon, which includes your view and all the code related to your CMS component. If your frontendend is custom, please ask other team members, where you create the CMS component.

  • 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 about configuration files 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 WCMS 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.
$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
    • If you have a custom storefrontend, you have to create your view where other component's view are stored
    • If you are using the B2B or B2C accelerators, you have to create an addon, which includes your view and all the code related to your CMS component.
  • 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

Adding a Feedback CMS Component to the Accelerator - Tutorial

– Based on SAP hybris 1905

Discussion

Enter your comment. Wiki syntax is allowed: