Adding Custom CMS component in Hybris
In this requirement, we are going to create a completely new component type and add it to the page.
Let’s say the requirement is to display the Offers on the Home page, where Offers component should include the attributes like images,header text of the offer,footer text of the offer.
So Our aim is to create a new CMS component type to add these attributes into it and display it in the page
Lets see the steps below to achieve the same.
1) Create a new CMS component type by defining in the *items.xml
hybris\bin\custom\training\trainingcore\resources\trainingcore-items.xml
2)Write an impex statements for adding the new component item type instance and to add the newly created CMS component to a home page by assigning it to the right content slot
3)Create the controller and JSP page for the new component
4)Add this new component into the Home page JSP using CMS tags
5)Open the Home page and Verify to check new component
Step 1
Create a new CMSComponent in *items.xml
- <itemtype code="CustomOffersComponent" extends="SimpleCMSComponent" generate="true" autocreate="true"
- jaloclass="org.training.core.jalo.CustomOffersComponent">
- <description>Used to display offers on homepage</description>
- <attributes>
- <attribute type="localized:java.lang.String" qualifier="headrerText">
- <modifiers read="true" write="true" optional="false" />
- <persistence type="property" />
- </attribute>
- <attribute type="localized:java.lang.String" qualifier="footerText">
- <modifiers read="true" write="true" optional="false" />
- <persistence type="property" />
- </attribute>
- <attribute type="Media" qualifier="offerImage">
- <modifiers read="true" write="true" optional="false" />
- <persistence type="property" />
- </attribute>
- <attribute type="CustomOfferLinksList" qualifier="offerImageLink">
- <persistence type="property" />
- <description>List of CMS Link Component</description>
- <modifiers read="true" write="true" />
- </attribute>
- </attributes>
- </itemtype>
<itemtype code="CustomOffersComponent" extends="SimpleCMSComponent" generate="true" autocreate="true" jaloclass="org.training.core.jalo.CustomOffersComponent"> <description>Used to display offers on homepage</description> <attributes> <attribute type="localized:java.lang.String" qualifier="headrerText"> <modifiers read="true" write="true" optional="false" /> <persistence type="property" /> </attribute> <attribute type="localized:java.lang.String" qualifier="footerText"> <modifiers read="true" write="true" optional="false" /> <persistence type="property" /> </attribute> <attribute type="Media" qualifier="offerImage"> <modifiers read="true" write="true" optional="false" /> <persistence type="property" /> </attribute> <attribute type="CustomOfferLinksList" qualifier="offerImageLink"> <persistence type="property" /> <description>List of CMS Link Component</description> <modifiers read="true" write="true" /> </attribute> </attributes> </itemtype>
Add below collection type for CMSLinkComponent Collection type attribute in the same items.xml file under collectiontypes tag
- <collectiontype code="CustomOfferLinksList" elementtype="CMSLinkComponent" autocreate="true" generate="true" type="list" />
<collectiontype code="CustomOfferLinksList" elementtype="CMSLinkComponent" autocreate="true" generate="true" type="list" />
Do ant all and refresh the platform after build success.
We can now see that CustomOffersComponentModel.java class created with all the attributes as we defined in *items.xml file
Now only java class is generated but table for this new component is not yet created.
So do the update system, so that table will be created for this new item type
Step 2
We need to write an impex to add the data for this new component type.
Since new component item type has some of the composed types(like CMSLinkComponent,Media),
lets define the impex for those composed types first.
Note: Write all these impexes in the file specified below
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex
Impex for CMSLinkComponent
- #Custom offers components
- INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;&linkRef;&componentRef;target(code)[default='sameWindow'];$category;
- ;;MenOfferLink;Men Offer Link;/MenOfferLink;MenOfferLink;MenOfferLink;;;;
- ;;WomenOfferLink;Women Offer Link;/WomenOfferLink;WomenOfferLink;WomenOfferLink;;;;
- ;;KidsOfferLink;Kids Offer Link;/KidsOfferLink;KidsOfferLink;KidsOfferLink;;;;
#Custom offers components INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;&linkRef;&componentRef;target(code)[default='sameWindow'];$category; ;;MenOfferLink;Men Offer Link;/MenOfferLink;MenOfferLink;MenOfferLink;;;; ;;WomenOfferLink;Women Offer Link;/WomenOfferLink;WomenOfferLink;WomenOfferLink;;;; ;;KidsOfferLink;Kids Offer Link;/KidsOfferLink;KidsOfferLink;KidsOfferLink;;;;
Impex for Media
- INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpeg'];&imageRef;folder(qualifier)[default='images'];altText
- ;;customOffersMedia;$siteResource/images/banners/homepage/offers.jpeg;;offers.jpeg;;
INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpeg'];&imageRef;folder(qualifier)[default='images'];altText ;;customOffersMedia;$siteResource/images/banners/homepage/offers.jpeg;;offers.jpeg;;
Impex for CustomOffersComponent
- INSERT_UPDATE CustomOffersComponent;$contentCV[unique=true];uid[unique=true];name;headrerText[lang=$lang];footerText[lang=$lang];offerImage(code);&componentRef;offerImageLink(&linkRef);
- ;;summerOfferComponent;Summer offer Component;"up to 70 % off";"Grab this offer on all summer<br>Collections";customOffersMedia;summerOfferComponent;MenOfferLink,WomenOfferLink,KidsOfferLink
INSERT_UPDATE CustomOffersComponent;$contentCV[unique=true];uid[unique=true];name;headrerText[lang=$lang];footerText[lang=$lang];offerImage(code);&componentRef;offerImageLink(&linkRef); ;;summerOfferComponent;Summer offer Component;"up to 70 % off";"Grab this offer on all summer<br>Collections";customOffersMedia;summerOfferComponent;MenOfferLink,WomenOfferLink,KidsOfferLink
Note: Copy any image to the below path to have media reference, the same image appears on the Home page after completing the requirement
Make sure the name of the image should be offers.jpeg, else change the impex accordingly.
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\images\banners\homepage
Now define the content slot and link the component to it
Impex for defining content slot name
- INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='LandingPage2Template'];validComponentTypes(code);compTypeGroup(code)
- ;SummerOffersSlotName;;CustomOffersComponent
INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='LandingPage2Template'];validComponentTypes(code);compTypeGroup(code) ;SummerOffersSlotName;;CustomOffersComponent
Impex for defining content slot
- INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)
- ;;summerOfferContentSlot;Summer offer slot;true;summerOfferComponent
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef) ;;summerOfferContentSlot;Summer offer slot;true;summerOfferComponent
Impex for defining content slot for page
- INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true][default='homepage'];contentSlot(uid,$contentCV)[unique=true]
- ;;summerOfferslotforpage-Homepage;SummerOffersSlotName;;summerOfferContentSlot
INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true][default='homepage'];contentSlot(uid,$contentCV)[unique=true] ;;summerOfferslotforpage-Homepage;SummerOffersSlotName;;summerOfferContentSlot
Make sure below lines are added at the beginning of the cms-content.impex to avoid any errors
- $contentCatalog=apparel-ukContentCatalog
- $contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
- $productCatalog=apparelProductCatalog
- $productCatalogName=Apparel Product Catalog
- $productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Staged'])[unique=true,default=$productCatalog:Staged]
- $picture=media(code, $contentCV) ;
- $siteResource=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/contentCatalogs/$contentCatalog
- $jarResourceCms=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/cockpits/cmscockpit
- # Load the storefront context root config param
- $storefrontContextRoot=$config-storefrontContextRoot
- $lang=en
- $category=category(code, $productCV)
$contentCatalog=apparel-ukContentCatalog $contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged] $productCatalog=apparelProductCatalog $productCatalogName=Apparel Product Catalog $productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Staged'])[unique=true,default=$productCatalog:Staged] $picture=media(code, $contentCV) ; $siteResource=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/contentCatalogs/$contentCatalog $jarResourceCms=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/cockpits/cmscockpit # Load the storefront context root config param $storefrontContextRoot=$config-storefrontContextRoot $lang=en $category=category(code, $productCV)
Note:
We are defining the content slot directly for page rather than template, doing so will just add this slot only to the page not to the template
Step 3
Create the custom controller and JSP for the new component
We can either extend the AbstractCMSComponentController or DefaultCMSComponentController for our custom controller.
AbstractCMSComponentController has no implementation for fillModel() method whereas DefaultCMSComponentController has overridden it and provided the definition for fillModel() method.
Note:If we dont provide our own controller, then above controllers will be called by Hybris automatically but its not a good practice to use like that for new component
Let’s extend our class with AbstractCMSComponentController as we are going to write our own implementation for fillModel() method as below
Create the below class in the same package where AbstractCMSComponentController is available
- package org.training.storefront.controllers.cms;
- import javax.servlet.http.HttpServletRequest;
- import org.springframework.context.annotation.Scope;
- import org.springframework.stereotype.Controller;
- import org.springframework.ui.Model;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.training.core.model.CustomOffersComponentModel;
- import org.training.storefront.controllers.ControllerConstants;
- @Controller("CustomOffersComponentController")
- @Scope("tenant")
- @RequestMapping(value = ControllerConstants.Actions.Cms.CustomOffersComponent)
- public class CustomOffersComponentController extends AbstractCMSComponentController<CustomOffersComponentModel>
- {
- @Override
- protected void fillModel(final HttpServletRequest request, final Model model, final CustomOffersComponentModel component)
- {
- model.addAttribute("offerImageLinks", component.getOfferImageLink());
- model.addAttribute("offerImage", component.getOfferImage());
- model.addAttribute("headerText", component.getHeadrerText());
- model.addAttribute("footerText", component.getFooterText());
- }
- }
package org.training.storefront.controllers.cms; import javax.servlet.http.HttpServletRequest; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.training.core.model.CustomOffersComponentModel; import org.training.storefront.controllers.ControllerConstants; @Controller("CustomOffersComponentController") @Scope("tenant") @RequestMapping(value = ControllerConstants.Actions.Cms.CustomOffersComponent) public class CustomOffersComponentController extends AbstractCMSComponentController<CustomOffersComponentModel> { @Override protected void fillModel(final HttpServletRequest request, final Model model, final CustomOffersComponentModel component) { model.addAttribute("offerImageLinks", component.getOfferImageLink()); model.addAttribute("offerImage", component.getOfferImage()); model.addAttribute("headerText", component.getHeadrerText()); model.addAttribute("footerText", component.getFooterText()); } }
Also make sure the RequestMapping value is defined in the ControllerConstants.java file(\hybris\bin\custom\training\trainingstorefront\web\src\org\training\storefront\controllers\ControllerConstants.java)
add new constant value inside Actions Interface and inside CMS interface,it should be something like as below
- public interface ControllerConstants
- {
- interface Actions
- {
- interface Cms
- {
- //All the existing lines goes here
- String CustomOffersComponent = _Prefix + CustomOffersComponentModel._TYPECODE + _Suffix;
- }
- }
- //All the existing lines goes here
- }
public interface ControllerConstants { interface Actions { interface Cms { //All the existing lines goes here String CustomOffersComponent = _Prefix + CustomOffersComponentModel._TYPECODE + _Suffix; } } //All the existing lines goes here }
Create a new jsp page called customOffersComponent.jsp as below
(/trainingstorefront/web/webroot/WEB-INF/views/desktop/cms/customOffersComponent.jsp)
- <%@ page trimDirectiveWhitespaces="true" %>
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
- <%@ taglib prefix="template" tagdir="/WEB-INF/tags/desktop/template" %>
- <%@ taglib prefix="theme" tagdir="/WEB-INF/tags/shared/theme" %>
- <%@ taglib prefix="nav" tagdir="/WEB-INF/tags/desktop/nav" %>
- <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
- <%@ taglib prefix="cms" uri="http://hybris.com/tld/cmstags" %>
- <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
- <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
- <%@ taglib prefix="ycommerce" uri="http://hybris.com/tld/ycommercetags" %>
- <%@ taglib prefix="common" tagdir="/WEB-INF/tags/desktop/common" %>
- <%@ taglib prefix="breadcrumb" tagdir="/WEB-INF/tags/desktop/nav/breadcrumb" %>
- <div class="customOffersComponent">
- <p class="customOffersComponent_header_text">${headerText}</p>
- <img alt="Offer Image" src="${offerImage.url}" class="offers_image">
- <ul class="offers_list">
- <c:forEach items="${offerImageLinks}" var="offerImageLink">
- <li class="offers_list_element"><a href="${offerImageLink.url}">${offerImageLink.name}</a></li>
- </c:forEach>
- </ul>
- <p class="customOffersComponent_header_text">${footerText}</p>
- </div>
<%@ page trimDirectiveWhitespaces="true" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="template" tagdir="/WEB-INF/tags/desktop/template" %> <%@ taglib prefix="theme" tagdir="/WEB-INF/tags/shared/theme" %> <%@ taglib prefix="nav" tagdir="/WEB-INF/tags/desktop/nav" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="cms" uri="http://hybris.com/tld/cmstags" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="ycommerce" uri="http://hybris.com/tld/ycommercetags" %> <%@ taglib prefix="common" tagdir="/WEB-INF/tags/desktop/common" %> <%@ taglib prefix="breadcrumb" tagdir="/WEB-INF/tags/desktop/nav/breadcrumb" %> <div class="customOffersComponent"> <p class="customOffersComponent_header_text">${headerText}</p> <img alt="Offer Image" src="${offerImage.url}" class="offers_image"> <ul class="offers_list"> <c:forEach items="${offerImageLinks}" var="offerImageLink"> <li class="offers_list_element"><a href="${offerImageLink.url}">${offerImageLink.name}</a></li> </c:forEach> </ul> <p class="customOffersComponent_header_text">${footerText}</p> </div>
In the above JSP file, we have just added the new component attributes for display.
Add the CSS properties in CSS file for UI change
Add the below lines at the end to landingLayout2Page.css file for the same as below
(hybris\bin\custom\training\trainingstorefront\web\webroot\_ui\desktop\common\css\landingLayout2Page.css)
- .customOffersComponent{
- border:1px dotted #a5a5a5;
- border-width:1px 0 ;
- position:relative;
- }
- .customOffersComponent_header_text .customOffersComponent_header_text{
- border-bottom:1px solid #a5a5a5;
- height:30px;
- line-height:30px;
- text-transform:uppercase;
- font-weight:bold;
- font-size:1em;
- white-space: nowrap;
- display:block;
- margin:0 0 10px 0;
- }
- .offers_list{
- margin: 20px 0;
- padding: 5px;
- border: 1px dotted #000;
- }
- .offers_list_element{
- vertical-align:top;
- border-bottom:1px dotted #a5a5a5;
- padding:20px 0 0 0;
- }
- .offers_image{
- float:left;
- text-align:center;
- }
.customOffersComponent{ border:1px dotted #a5a5a5; border-width:1px 0 ; position:relative; } .customOffersComponent_header_text .customOffersComponent_header_text{ border-bottom:1px solid #a5a5a5; height:30px; line-height:30px; text-transform:uppercase; font-weight:bold; font-size:1em; white-space: nowrap; display:block; margin:0 0 10px 0; } .offers_list{ margin: 20px 0; padding: 5px; border: 1px dotted #000; } .offers_list_element{ vertical-align:top; border-bottom:1px dotted #a5a5a5; padding:20px 0 0 0; } .offers_image{ float:left; text-align:center; }
Step 4
Add this component into the Home page jsp using CMS tags
Open landingLayout2Page.jsp and add the below code(for now , add it below Section5 pageSlot)
- <cms:pageSlot position="SummerOffersSlotName" var="feature" element="div" class="span-24 section5 cms_disp-img_slot">
- <cms:component component="${feature}" />
- </cms:pageSlot>
<cms:pageSlot position="SummerOffersSlotName" var="feature" element="div" class="span-24 section5 cms_disp-img_slot"> <cms:component component="${feature}" /> </cms:pageSlot>
Note: position that we have added here should be same as content slot name in the impex.
Step 5
Do ant all, Update system and make sure the content catalog is copied from Staged to Online(if not done then synchronize it)
Open the Home page in the site and check the output
In the Home Page, we are getting our custom component displayed and highlighted the 4 attributes of the component rendered as we defined.
Getting this error, How to fix? please help.
[echo] KOMP aswintrainingstorefront – acceleratorstorefrontcommons
[yjavac] Compiling 1 source file to C:\Users\2210084\Desktop\hybrisSoftware\hybris\bin\custom\aswintraining\aswintrainingstorefront\web\webroot\WEB-INF\classes
[yjavac] C:\Users\2210084\Desktop\hybrisSoftware\hybris\bin\custom\aswintraining\aswintrainingstorefront\web\src\com\aswin\aswinrm\storefront\controllers\ControllerConstants.java:43: error: cannot find symbol
[yjavac] String CustomOffersComponent = _Prefix + customOffersComponentModel._TYPECODE + _Suffix;
[yjavac] ^
[yjavac] symbol: variable customOffersComponentModel
[yjavac] location: interface Cms
[yjavac] 1 error
I followed the entire tutorial, the Impex are creating the registers in the different tables, but, the Component is not appearing in the DPD, I confirmed the steps and the routes images with other existing resources.
The links of my resource are in my backoffice, and appear in my content catalog Staged, I synchronized this to Online, but still not appearing.
So I think is an error in the relation between the .JSP and the cms instance, I don’t understand how is “mapping” these things…can you help me to understand this please. Thanks in advance
Note:If we dont provide our own controller, then above controllers will be called by Hybris automatically but its not a good practice to use like that for new component.
Can u explain why it is not a good practice?
Hi ,
How to import cms-content.impex file in hybris through hac? Please provide the steps to import as I am not able to import the file.
Appreciate your help!
Thanks
small correction :
Create a new jsp page called customOffersComponent.jsp as below
(/trainingstorefront/web/webroot/WEB-INF/views/desktop/cms/customOffersComponent.jsp)
the jps should be like this customofferscomponent.jsp here o and c should be small case
If i need to create a custom component and I need to manage from cmsckopit console, What steps should I follow?
i am a fresher working on hybris 6.7…..am unable to write to this file…this is of readOnly type …please help me out
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex
I created item type for CustomOffersComponent build is success but it didn’t create MOdel class file.
Used to display offers on homepage
List of CMS Link Component
Refresh your suite in eclipse you will get that model class
KB, very nice tutorials. Thanks. Had couple questions:
1. What is the significance of ApparelstoreConstants in the siteResource ?
2. If we have a custom catalog, and put our resource under custom catalog dir, what would we use for custom package name ? (I tried many options but it said could not find class resource)
3. How do we use initialData extension under training module to achieve the same instead of putting data in hybris/bin/ext-data?
Hi,
I have a question regarding components and solr search.
There is a task to add facets to the text search box in storefront.
We have now a searchBox slot: when you tape some letters, a dynamic list of products that match this text is shown. We have to customize this list so that it shows also categories (such as ‘Search result list slot’) in left column and products in left column.
Example: you tape ‘red’ and you get a dynamic list below:
In ‘Fruits’ (category) – 5 results | ‘red apple A’ (product)
| ‘red apple B’ (product)
In ‘Vegetables’ (category) – 3 results | ‘red carrot’ (product)
| ‘red potato’ (product)
In ‘Sweets’ (category) – 4 results | ‘red candy A’ (product)
| ‘ red candy B’ (product)
Could you please help to find the ways of solving this task?
Update: we’ve used to manage DTOs and create style for displaying
Hi, i have some question.
i follow the step and synchronize the catalog.But i don’t see something change.
When i use cmscockpit function “edit in front end”, i can see my custom component and the media.But when i restart the server,it will cancel.
so,how should i solve the problem,thanks.
Very Nice explanation and very helpful.
KB, it just doesn’t work. Can you help out with the impex issues? Greatly appreciated!!
Have you done system update before running impex ?
If updated, can you see this item type created in backend
“CustomOffersComponent “
Hi Dagmara,
Please find below observations:
1.If you override getView(-) method then it should be:
@Override
protected String getView(final CustomOffersComponentModel component)
{
return ControllerConstants.Views.Cms.ComponentPrefix + StringUtils.lowerCase(getTypeCode(component));
}
2.make jsp as customofferscomponent.jsp and keep in responsive folder
path:web/webroot/WEB-INF/views/responsive/cms/customofferscomponent.jsp
Hi KB,
Thanks for the tutorials, you are doing great job.
I had a query regarding Controller. Here in our controller we are annotating it with @Controller(“CustomOffersComponentController”), what is significance of parameter “CustomerOffersComponentController”?
Apparently, for all component controllers, we are doing this and for normal storefront controller we are not doing this. Thanks in Advance.
Regards,
Rupesh
i am running the bellow impex including all micros
INSERT_UPDATE CustomOffersComponent;$contentCV[unique=true];uid[unique=true];name;headrerText[lang=$lang];footerText[lang=$lang];offerImage(code);&componentRef;offerImageLink(&linkRef);
;;summerOfferComponent;Summer offer Component;”up to 70 % off”;”Grab this offer on all summerCollections”;customOffersMedia;summerOfferComponent;MenOfferLink,WomenOfferLink,KidsOfferLink
i am getting the bellow error.
INSERT_UPDATE CustomOffersComponent;catalogVersion(CatalogVersion.catalog(Catalog.id[default=apparel-ukContentCatalog]),CatalogVersion.version[default=Staged])[default=apparel-ukContentCatalog:Staged][unique=true];uid[unique=true];name;headrerText[lang=en];footerText[lang=en];offerImage(code);&componentRef;offerImageLink(&linkRef);# no permitted type found for configured columns. omitted types: {8796131000402=[type CustomOffersComponent is abstract – no permitted type for mode import_strict]}, definition: {0=INSERT_UPDATE CustomOffersComponent, 1=catalogVersion(CatalogVersion.catalog(Catalog.id[default=apparel-ukContentCatalog]),CatalogVersion.version[default=Staged])[default=apparel-ukContentCatalog:Staged][unique=true], 2=uid[unique=true], 3=name, 4=headrerText[lang=en], 5=footerText[lang=en], 6=offerImage(code), 7=&componentRef, 8=offerImageLink(&linkRef)};# invalid item expression ‘# no permitted type found for configured columns. omitted types: {8796131000402=[type CustomOffersComponent is abstract – no permitted type for mode import_strict]}, definition: {0=INSERT_UPDATE CustomOffersComponent, 1=catalogVersion(CatalogVersion.catalog(Catalog.id[default=apparel-ukContentCatalog]),CatalogVersion.version[default=Staged])[default=apparel-ukContentCatalog:Staged][unique=true], 2=uid[unique=true], 3=name, 4=headrerText[lang=en], 5=footerText[lang=en], 6=offerImage(code), 7=&componentRef, 8=offerImageLink(&linkRef)}’ – unexpected expression at 164
,,,,no permitted type found for configured columns. omitted types: {8796131000402=[type CustomOffersComponent is abstract – no permitted type for mode import_strict]}, definition: {0=INSERT_UPDATE CustomOffersComponent, 1=catalogVersion(CatalogVersion.catalog(Catalog.id[default=apparel-ukContentCatalog]),CatalogVersion.version[default=Staged])[default=apparel-ukContentCatalog:Staged][unique=true], 2=uid[unique=true], 3=name, 4=headrerText[lang=en], 5=footerText[lang=en], 6=offerImage(code), 7=&componentRef, 8=offerImageLink(&linkRef)}, invalid item expression ‘# no permitted type found for configured columns. omitted types: {8796131000402=[type CustomOffersComponent is abstract – no permitted type for mode import_strict]}, definition: {0=INSERT_UPDATE CustomOffersComponent, 1=catalogVersion(CatalogVersion.catalog(Catalog.id[default=apparel-ukContentCatalog]),CatalogVersion.version[default=Staged])[default=apparel-ukContentCatalog:Staged][unique=true], 2=uid[unique=true], 3=name, 4=headrerText[lang=en], 5=footerText[lang=en], 6=offerImage(code), 7=&componentRef, 8=offerImageLink(&linkRef)}’ – unexpected expression at 164;;summerOfferComponent;Summer offer Component;up to 70 % off;Grab this offer on all summerCollections;customOffersMedia;summerOfferComponent;MenOfferLink
31.07.2017 19:20:46: ERROR: de.hybris.platform.impex.jalo.ImpExException: Can not resolve any more lines … Aborting further passes (at pass 2). Finally could not import 1 lines![HY-123]
31.07.2017 19:20:46: ERROR: de.hybris.platform.impex.jalo.ImpExException: Can not resolve any more lines … Aborting further passes (at pass 2). Finally could not import 1 lines![HY-123]
could you please help??
Amol, have you resolved this issue? I am getting the same error when creating a custom component.
KB, can you help out? Thanks!
Hi KB,
Impex for defining content slot
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)
;;summerOfferContentSlot;Summer offer slot;true;summerOfferComponent
While performing the above step, its failing with the below message
INSERT_UPDATE ContentSlot;catalogVersion(CatalogVersion.catalog(Catalog.id[default=apparel-ukContentCatalog]),CatalogVersion.version[default=Staged])[default=apparel-ukContentCatalog:Staged][unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)
,8796158592042,,, column 5: cannot resolve value ‘summerOfferComponent’ for attribute ‘cmsComponents’, column 5: cannot resolve value ‘summerOfferComponent’ for attribute ‘cmsComponents’;;summerOfferContentSlot;Summer offer slot;true;summerOfferComponent
03.07.2017 14:31:53: ERROR: line 3 at main script: Can not resolve any more lines … Aborting further passes (at pass 2). Finally could not import 1 lines!
03.07.2017 14:31:53: ERROR: line 3 at main script: Can not resolve any more lines … Aborting further passes (at pass 2). Finally could not import 1 lines!
Any help would be appreciated.
Thanks
Hi,
I have created a new cms component I am getting following error while importing impex.
no permitted type found for configured columns. omitted types: {=[type CustomComponent is abstract – no permitted type for mode import_strict]}
Any solution for this? I am also getting the same error
Hi! I am new to hybris. For a customized component, one controller is controlling one component, right? The way the controller find the way to the jsp is by looking up the *component.jsp in the cms/ folder?
Hi, ya what you said is right.
I would explain it as below
When we render component in any jsp using cms tags , Hybris will try to find the corresponding controller for that component and then return the corresponding component view to enclose in the same jsp.
Hi KB, Can we do the same for 6.2 version also?
hi sir, very well explained.
Could u pls do some tutorials on OMS in hybris.
basic steps for integrating it with the external application
Thanks,
Sapna
Thank you Sapna !!
I will do it after some time.
beautifully explained 🙂
A very good platform for hybris beginners 🙂
please keep up the good work by sharing your knowledge and conveying it so beautifully.
Thank you, sure will do it !!
Hi KB Sir,
I Have followed all your steps for creating custom component and i am getting below error in command prompt and in homepage it does’t showing component.
ERROR:
Feb 27, 2017 3:54:43 PM org.apache.catalina.core.ApplicationDispatcher invoke
SEVERE: Servlet.service() for servlet DispatcherServlet threw exception
javax.servlet.ServletException: File "/WEB- INF/views/desktop/cms/customofferscomponent.jsp" not found.
please suggest me
It says customofferscomponent.jsp file not found, can you please check the path of the file placed in your system.
i have kept in this path:
C:\trail\hybris\bin\ext-template\yacceleratorstorefront\web\webroot\WEB-INF\views\desktop\cms\customOffersComponent.jsp..
and i am getting this error:
WARN [hybrisHTTP4] [DefaultCMSComponentRendererRegistry] Error processing component tag. currentComponent [CustomOffersComponentModel (8796256928828)] exception: File "/WEB-INF/views/desktop/cms/customofferscomponent.jsp" not found
Hi,
Why you have kept in yacceleratorstorefront ?
You have created your custom extensions using modulegen or using yaccelerator only ?
Whats the Storefront URL you are accessing ?
Hi KB,
yes,i did’t created any extension…..simply i just installed recipe as b2c_acc and i am accesing the site by using below URL.i did’t use modulegen.
Is it mandatory to create extensions using modulegen..?
what happens if i directly kept anything in yaccelerator..?
Storefront URL:localhost:9001/yacceleratorstorefront/store/?site=electronics
Its not good practice to do the changes in those extensions.
You can do modulegen and use it but anyway for practice its fine.
your URL should be http://localhost:9001/yacceleratorstorefront?site=electronics
did you define store as root path ? if not use above URL and try
Hi KB,
No,i did’t defined any store path…
But even if am using below URL also,I am getting same error..
http://localhost:9001/yacceleratorstorefront?site=electronics
Better follow the standard way by creating custom extensions using modulegen and let me know if you cant access then.
HI KB,
Now i will do by creating modulegen..
Anyway thank you so much KB sir for replying each and every question..
You are welcome 🙂
Hi KB,
While importing time i’m getting this error “‘de.hybris.platform.impex.jalo.translators.ItemExpressionTranslator$ExpressionQuery@13106d98’ with values {v0=customOffersMedia} – got LazyList[[8797670932510, 8797509255198]]” How to solve this one ?
Did you get this answer?
C:\trail\hybris\bin\ext-template\yacceleratorstorefront\web\webroot\WEB-INF\views\desktop\cms\customOffersComponent.jsp..
should be
C:\trail\hybris\bin\ext-template\yacceleratorstorefront\web\webroot\WEB-INF\views\desktop\cms\customofferscomponent.jsp..
I’m trying to create a Component. I followed your name step
by step from your page. But the Homepage does not come to the page component. I
created the componentide by doing backoffice settings. Could you please help?
What is the way to write a custom component and show its content to home page for some time period i.e. if I want to show data of that component between 3 PM to 4 PM or from 1/Feb/2017 to 28/Feb/2017. How can we do this? This question has been asked in so many hybris interview.
This can be achieved by adding time restriction on the component after creating it.
You can do this either in CMS cockpit or through impex.
Can you provide me one example for that by using impex?
Check OOTB impexes, there are so many existing impexes on the same.
Is it mandatory to define new controller for creating custom component..?
No.
Hybris provides a default controller to handle the custom component if you are not defining one for it.
You will go for it only if you want to add some dynamic values to that component.
Thank you so much Karibasappa…
you are welcome !!
suppose if i am writing custom component for a new Page..Then is it mandatory to define new controller for that custom component..?
This question is same as you asked before and answer is given above
what would be the best approach if I want to create a custom rss feed component? should I extend SimpleCMSComponent? or CMSParagraphComponent?
For RSS Feed, you can go for CMSParagraphComponent as you can mention all the updates of the site in that paragraph.
Beautiful, keep giving inputs like this
Sure, Thanks!!
beautifully explained !
What if I want to add something like a radio button or some checkbox by creating a component and and I should add that checkbox to some already existing jsp?
Thanks!!
Create a new simple cms component and define the controller and jsp for this component.
Add checkbox , radio buttons whatever you want in this jsp page.
And link this component to the content slot of existing template where you want to add it.
Hi KG.
Your tutorials are great!
I have a question. How to find pages jsp file if I want to add checkbox to Backoffice > Catalog > Product Properties tab
Here is the original question with image
http://stackoverflow.com/questions/43408071/how-to-add-checkbox-to-hybirs
can you please tell which *items.xml , where it is located.
also which version of hybris you used for this tutorial.
Its our custom core extension’s items.xml.
It will be inside customcore extension/resources folder with the name
customcoreextension-items.xml
I have used hybris 5.7
Hi KB, I have one question. What is the difference between converter and populator? When to use what?
If such questions are asked in an interview, what sjould be my answer