Skip to Content
author's profile photo Former Member
Former Member

Customizing Widgets in browser/tab of CSCockpit

I want to add a new value as loyalty points from webservice to Personal Details widget in Customer browser of CSCockpit.

alt text

Please let me know the steps.

3913-cscockpit.jpg (105.3 kB)
Add a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on Sep 14, 2015 at 04:11 PM

    I followed these steps:

    1) create an ycockpit-based extension for customizing cscockpit. 2) Add the below line in extensioninfo.xml of new cscockpit extension.

                <requires-extension name="cscockpit"/>
    

    3) Modify the contextParam value in web.xml of new cscockpit extension as specified in this link: https://wiki.hybris.com/display/release5/ycockpit+Template+-+Technical+Guide#ycockpitTemplate-TechnicalGuide-ExtendingExistingCockpitImplementation

    4) Widget Configuration : Add your custom widget bean inside widget property of your specific browser bean in cscockpit-web-spring.xml of cscockpit.

                      <property name="widgetCode" value="customerEditAddressesWidget"/>
                      <property name="widgetConfig" ref="csCustomerEditAddressWidgetConfig"/>
      </bean>
    

    5) Add your custom widget bean details in cscockpit-spring-widgets.xml of cscockpit.

      <bean id="defaultCsCustomerEditAddressWidgetConfig" parent="csBaseWidgetConfig">
          <property name="widgetTitle" value="cscockpit.widget.customer.addresses"/>
          <property name="widgetRenderer" ref="csCustomerEditAddressWidgetRenderer"/>
          <property name="widgetController" ref="csCustomerController"/>
          <property name="widgetClass" value="de.hybris.platform.cockpit.widgets.impl.DefaultListboxWidget"/>
          <property name="widgetSclass" value="defaultWidgetFrame csCustomerEditAddressesWidgetFrame"/>
          <property name="widgetModel">
              <bean class="de.hybris.platform.cscockpit.widgets.models.impl.CustomerAddressesListWidgetModel"/>
          </property>
          <property name="widgetAdapter">
              <bean class="de.hybris.platform.cscockpit.widgets.adapters.CustomerEditAddressesAdapter">
                  <property name="cockpitTypeService" ref="cockpitTypeService"/>
              </bean>
          </property>
      </bean>
    

    6) Add the below div in defaultCustomerLayout.zul of cscockpit extension.

     <div id="customerEditAddressesWidget" class="customerEditAddressesWidget" />
    

    7) Then, add your own custom widgetController, CallContextController, widgetAdapter, WidgetModel and WidgetRenderer. Please refer these classes csCustomerController, CallContextController, CustomerEditAddressesAdapter,CustomerAddressesListWidgetModel and CustomerEditAddressWidgetRenderer.

    8)Then, add your xml into import/config folder of cscockpit. Refer Address_CustomerAddressList_CockpitGroup.xml.

    9) Modify the impex projectdata_ui_components.impex to read the above xml to display our selected data in widget.

    10) For labels, add your changes to cscockpit-locales_en.properties and i3-label.properties.

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Sep 14, 2015 at 10:29 AM

    Hi Sourav,

    This can achieved by overriding corresponding xml configurations. Take a look at the following spring bean definition

         <alias alias="csCustomerEditWidgetRenderer" name="defaultCsCustomerEditWidgetRenderer"/>
         <bean id="defaultCsCustomerEditWidgetRenderer" parent="abstractWidgetRenderer" class="de.hybris.platform.cscockpit.widgets.renderers.impl.CustomerDetailsEditWidgetRenderer">
             <property name="editorConfigurationCode" value="editCustomerDetails"/>
             <property name="footerRenderer">
                 <bean class="de.hybris.platform.cscockpit.widgets.renderers.details.impl.ConfigurableItemWidgetDetailRenderer" parent="abstractWidgetDetailRenderer">
                     <property name="configurationCode" value="customerReadonlyDetails"/>
                 </bean>
             </property>
         </bean>
    
    

    If you want the new field to be editable then you need to update editCustomerDetails configuration, otherwise - customerReadonlyDetails.

    Let's say you want to update customerReadonlyDetails. It is defined in /cscockpit/resources/impex/projectdata_ui_components.impex with the corresponding xml file

     INSERT_UPDATE CockpitUIConfigurationMedia;code[unique=true];mime;realfilename;@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator][forceWrite=true]
     ...
     ;customer_readonlydetails_cockpitgroup_ui_config;text/xml;Customer_ReadonlyDetails_CockpitGroup.xml;jar:de.hybris.platform.cscockpit.jalo.CscockpitManager&/cscockpit/import/config/Customer_ReadonlyDetails_CockpitGroup.xml
    
     INSERT_UPDATE CockpitUIComponentConfiguration;code[unique=true];factoryBean;objectTemplateCode[unique=true];principal(uid)[unique=true];media(code);
     ...
     ;customerReadonlyDetails;listViewConfigurationFactory;Customer;cockpitgroup;customer_readonlydetails_cockpitgroup_ui_config;
    
    

    In order to update his configuration you need to copy Customer_ReadonlyDetails_CockpitGroup.xml into /{yourcockpitsextension}/resources/{yourcockpitsextension}/cscockpit/xml/Customer_ReadonlyDetails_CockpitGroup.xml, add necessary field and run with following impex

     $jarResource=jar:package.YourCockpitsConstants&/{yourcockpitsextension}/cscockpit/xml
     
     INSERT_UPDATE CockpitUIConfigurationMedia;code[unique=true];mime;realfilename;@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator][forceWrite=true]
     ;customer_readonlydetails_cockpitgroup_ui_config;text/xml;Customer_ReadonlyDetails_CockpitGroup.xml;$jarResource/Customer_ReadonlyDetails_CockpitGroup.xml
    
    

    YourCockpitsConstants and {yourcockpitsextension} should be replaced with corresponding values.

    You can also look at subscriptioncockpits extension as an example.

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Then xml approach won't help. You need to override createContentInternal method in de.hybris.platform.cscockpit.widgets.renderers.impl.CustomerDetailsEditWidgetRenderer and add necessary field manually in the same way Refresh button is added there.

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.