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
- 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.
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 6.3
Discussion