Backoffice Customizations in SAP Commerce: Explorer Tree, Search, List View ,Label & Wizard

When to create new navigation node in backoffice
a)When we want to access an item-type very frequently because Business User will not be more technical guy to open type node and search for particular node.
b)For Navigation Nodes we can specific access restrictions through roles.

Example:- If we mention principal="backofficeadministratorrole" for our new node , Only those specific users with this current role can see and access the Node in Backoffice. This ensure only authorized users can see and access the node.

Step 1:Create SampleB2CStore item type with attributes like storeId,storeName,storeLocation,storeOwner,storeGstNumber in samplecore-items.xml 
<itemtype code="SampleB2CStore" autocreate="true" generate="true">
    <deployment table="SampleStore" typecode="15786" />
    <attributes>
        <attribute qualifier="storeId" type="java.lang.String">
            <description>Unique Store Identifier</description>
            <modifiers unique="true" read="true" search="true" write="true"/>
            <persistence type="property" />
        </attribute>
        <attribute qualifier="storeName" type="java.lang.String">
            <description>Store Name</description>
            <modifiers read="true" write="true" search="true"/>
            <persistence type="property" />
        </attribute>
        <attribute qualifier="storeLocation" type="java.lang.String">
            <description>Store Location Name</description>
            <modifiers read="true" write="true" search="true"/>
            <persistence type="property" />
        </attribute>
        <attribute qualifier="storeOwner" type="java.lang.String">
            <description>Store Owner Name</description>
            <modifiers read="true" write="true" search="true"/>
            <persistence type="property" />
        </attribute>
        <attribute qualifier="storeGstNumber" type="java.lang.String">
            <description>Store GST Number</description>
            <modifiers read="true" write="true" search="true"/>
            <persistence type="property" />
        </attribute>
    </attributes>
</itemtype>

Step 2:Do ant all ,make server up and update Hac

Step 3: Define Unique identifier for the navigation node i.e Under SampleStore(some identifier) i want to add SampleB2CStore node
location:samplebackoffice/resources/samplebackoffice-backoffice-config.xml Add below configuration for Custom Node in above file 
<context component="explorer-tree" parent="auto" merge-by="principal" principal="backofficeadministratorrole">
    <explorer-tree:explorer-tree xmlns:explorer-tree="http://www.hybris.com/cockpitng/config/explorertree">
        <explorer-tree:navigation-node id="hmc_typenode_sample_b2c_store">
            <explorer-tree:type-node code="SampleB2CStore" id="hmc_typenode_sample_b2c_store_node" />           
        </explorer-tree:navigation-node>
    </explorer-tree:explorer-tree>
</context>

Step 4: Add below properties in /samplebackoffice/resources/samplebackoffice-backoffice-labels/labels_en.properties 
hmc_typenode_sample_b2c_store = SampleStores
hmc_typenode_sample_b2c_store_node = SampleB2CStore

Step 5: Add below configuartion for listview in samplebackoffice-backoffice-config.xml 
<context type="SampleB2CStore" component="listview">
    <list:list-view xmlns:list="http://www.hybris.com/cockpitng/component/listView">
        <list:column qualifier="storeId" />
        <list:column qualifier="storeName" />
        <list:column qualifier="storeLocation" />
        <list:column qualifier="storeOwner" />
        <list:column qualifier="storeGstNumber" />
    </list:list-view>
</context>

Step 6: Add below properties in /samplebackoffice/resources/localization/samplebackoffice-locales_en.properties 
type.SampleB2CStore.name=SampleB2CStore
type.SampleB2CStore.storeId.name=StoreId
type.SampleB2CStore.storeName.name=StoreName
type.SampleB2CStore.storeLocation.name=StoreLocation
type.SampleB2CStore.storeOwner.name=StoreOwner
type.SampleB2CStore.storeGstNumber.name=StoreGstNumber

Step 7: Add below configuartion for simple search in samplebackoffice-backoffice-config.xml 
<context merge-by="type" type="SampleB2CStore" component="simple-search">
    <yss:simple-search xmlns:yss="http://www.hybris.com/cockpitng/config/simplesearch">
        <yss:field name="storeId" />
        <yss:field name="storeName" />
    </yss:simple-search>
</context>


Step 8: Add below configuartion for Advance search in samplebackoffice-backoffice-config.xml 
<context type="SampleB2CStore" component="advanced-search">
    <as:advanced-search xmlns:as="http://www.hybris.com/cockpitng/config/advancedsearch" connection-operator="AND">
        <as:field-list>
            <as:field name="storeId" operator="equals" selected="true"/>
            <as:field name="storeName" operator="equals" selected="true"/>
            <as:field name="storeGstNumber" operator="equals" selected="true"/>
        </as:field-list>
    </as:advanced-search>
</context>
Step 9: Add below configuartion for wizard component in samplebackoffice-backoffice-config.xml 
<context component="create-wizard" type="SampleB2CStore">
    <wz:flow xmlns:wz="http://www.hybris.com/cockpitng/config/wizard-config" id="sampleb2cstoreWizard" title="create.sampleb2cstore.general.label">
        <wz:prepare id="sampleb2cstore">
            <wz:initialize property="sampleb2cstore" type="SampleB2CStore"/>
        </wz:prepare>
        <wz:step id="step1">
            <wz:content id="step1.content">
                <wz:property-list root="sampleb2cstore">
                    <wz:property qualifier="storeId"/>
                    <wz:property qualifier="storeName"/>
                    <wz:property qualifier="storeGstNumber"/>
                </wz:property-list>
            </wz:content>
            <wz:navigation id="step1.navigation">
                <wz:cancel />
                <wz:done>
                    <wz:save property="sampleb2cstore"/>
                </wz:done>
            </wz:navigation>
        </wz:step>
    </wz:flow>
</context>

Step 10: Add below proprties for wizard component in labels_en.properties 
hmc_typenode_sample_b2c_store = SampleStores
create.sampleb2cstore.general.label = SampleB2CStore Wizard
Step 11: Add Configuration for base component in samplebackoffice-backoffice-config.xml 
<context type="SampleB2CStore" component="base">
        <y:base xmlns:y="http://www.hybris.com/cockpit/config/hybris">
            <y:labels>
                <y:label>storeId + '-' + storeName + '-' + storeGstNumber</y:label>
            </y:labels>
        </y:base>
</context>

Step 12: Do Hac update by selecting specific(samplecore & samplebackoffice) extensions and by checking Update running system & Localize types

Step 13:After Update is Done ,Open Backoffice click on f4(Orchestra Mode) ,then click on Reset Everything

Step 14: Check our Custom Navigation Node SampleB2cStore,listview,simple & advance search,base component and wizard.

Comments

Anonymous said…
Very helpful content bro.
December 1, 2024 at 9:46 PM
Anonymous said…
Nice work 👏
December 1, 2024 at 10:02 PM
Anonymous said…
Great explaination
December 1, 2024 at 10:03 PM
Anonymous said…
Great documentation
December 1, 2024 at 10:05 PM
Anonymous said…
Good presentation
December 1, 2024 at 10:49 PM
Anonymous said…
Good one
December 2, 2024 at 1:17 PM
Anonymous said…
Good content
December 2, 2024 at 5:50 PM
Anonymous said…
Good Work , Keep Given us more content on SAP commerce
December 3, 2024 at 6:54 PM
Post a Comment

Popular posts from this blog

Latest SAP Commerce (Hybris) Interview Questions

1.What is the need for the deployment tag, and what does autocreate=true 2.What happens if the deployment tag is not used 3.Explain the process of adding a step in the checkout end-to-end. 4.Have you worked on order process Share a project use case. 5.How do you configure and abort a cron job in Hybris 6.What are composite cron jobs 7.How do you create variants and sub-variants in SAP Commerce 8.Share your experience with Solr and Backoffice customizations. 9.Have you worked on cart customizations Share a project use case. 10.What is the difference between value providers and resolvers 11.Explain the OCC flow in Hybris. 12.Have you worked on payment integration or any third-party integration 13.Are you familiar with Kibana, Dynatrace, or CCV2 14.Explain the Spring MVC flow. 15.What are the types of dependency injection in Spring 16.Mention any JDK 17 or JDK 11 features you know. 17.Why is navigable=true used in Sap Commerce. 18.Explain...
Read more

Steps to Install SAP Commerce Cloud 2211/Install SAP Hybris 2105 to 2211

Image
Let us discuss What is Sap Commerce (or) Hybris,What is the Purpose of SAP Commerce ? Let's say we have a requirement to develop an Ecommerce Site or Shopping Site then we can use SAP COMMERCE . Right now we are planning to use SAP COMMERCE , it means we need to install SAP COMMERCE Software After installation we get a Ready Made Site (or) ready to use site. Ready made site means 80% of site code and functionality is ready. Step 1: Download SAP Commerce Software. Step 2 : Before extracting the zip file using 7 zip ,observe the sap commerce software name CXCOMCL221100U_20-70007431.ZIP Try to avoid special characters like (spaces or , _ ,- ) in zip file names because we might face problems while installing . So rename with short names like CX2211.zip then extract. If you don't have 7 zip file software in your system ,you can download from https://www.7-zip.org/download.html according to your system requirements. Extract below folder with the help of 7-Zip too...
Read more

OCC Webservices in SAP Commerce(hybris) 2211 using YOCC template – Part 1

Omnichannel Commerce Connect(OCC), which is a RESTful web services framework provided by SAP Commerce (Hybris).We can expose sap commerce(hybris) apis to external systems. Requirement : Create a custom OCC endpoint that retrieves detailed store information based on the storeId Step 1: Run the following command ant extgen to create a new OCC extension in platform Select Yocc template ,give name of your extension like sampleocc and package like com.hybris.occ Note: Remove or comment yocc extension ,add your custom occ extension in localextensions.xml and do ant clean all Step 2: Create SampleB2CStore an item type with attributes like storeId,storeName,storeLocation,storeOwner,storeGstNumber in samplecore-items.xml < itemtype code = "SampleB2CStore" autocreate = "true" generate = "true" > < deployment table = "SampleStore" typecode = "15786" /> < attributes > < attribute qualifi...
Read more