Commerce, Java

Add a Custom Section with Button in Editor Area of Product Cockpit

The editor area is located on the right side of the hybris cockpit. It is a major component enabling cockpit users to easily edit existing items. By default, it can display all properties of an item, which are grouped in a section. This typically is sufficient for most requirements. However, in some special cases (e.g. when we would like to display additional properties or section content should be computed dynamically) default section mechanism could be insufficient, then we can use custom section mechanism that enables us to create whatever section is required.

Figure: Product Cockpit and the editor area of the cockpit on the right 

  1. Create Class for a Custom Section 

    Create a class in the cockpits extension that represents the custom section and provides all necessary elements. This class has to implement a CustomEditorSectionConfiguration interface and it extends the DefaultEditorSectionConfiguration.
    Below I have created a class CustomSectionConfiguration 

    public class CustomSectionConfiguration extends DefaultEditorSectionConfiguration 
    implements CustomEditorSectionConfiguration {
    }
  2. Implement Details of the CustomEditorSectionConfiguration

    Define the details of CustomEditorSectionConfiguration by implementing the following methods:

     void initialize(EditorConfiguration config, ObjectType type, TypedObject object); :
    This method is responsible for initialization of our custom section. It provides  appropriate parameters.

    void allInitialized(EditorConfiguration config, ObjectType type, TypedObject object); :
    This method is a callback method that is called after all sections were initialized.

    void loadValues(EditorConfiguration config, ObjectType type, TypedObject object,
    ObjectValueContainer objectValues); :
    This is a callback method called on each custom section when values of the item in the editor are loaded.

    void saveValues(EditorConfiguration config, ObjectType type, TypedObject object,
    ObjectValueContainer objectValues); :
    This is a callback method called on each custom section when values of the item in the editor are to be saved.

    List<EditorSectionConfigurationgetAdditionalSections(); 
    A custom section can dynamically add some more sections.

    SectionRenderer getCustomRenderer(); 
    This method enables you to create an own custom renderer for section and to  customize its layout.

    We will also create a CustomSectionRenderer class inside our CustomSectionConfiguration class where we will define a method to add buttons to our custom section.
    Finally, our CustomSectionConfigurationClass will look like this:

    public class CustomSectionConfiguration extends DefaultEditorSectionConfiguration 
     implements CustomEditorSectionConfiguration {
    
    private final static String CATALOG_SECTION_CONTAINER_CLASS = "catalog_section_container";
     protected final SectionRenderer renderer = new CustomSectionRenderer();
    
    @Override
     public void allInitialized(EditorConfiguration arg0, ObjectType arg1, TypedObject arg2) {
     // TODO Auto-generated method stub
     
     }
    
    @Override
     public List<EditorSectionConfiguration> getAdditionalSections() {
     return Collections.emptyList();
     }
    
    @Override
     public SectionRenderer getCustomRenderer() {
     return this.renderer;
     }
    
    @Override
     public void initialize(EditorConfiguration arg0, ObjectType arg1, TypedObject arg2) {
     // TODO Auto-generated method stub
     
     }
    
    @Override
     public void loadValues(EditorConfiguration arg0, ObjectType arg1, TypedObject arg2, ObjectValueContainer arg3) {
     // TODO Auto-generated method stub
     
     }
    
    @Override
     public void saveValues(EditorConfiguration arg0, ObjectType arg1, TypedObject arg2, ObjectValueContainer arg3) {
     // TODO Auto-generated method stub
     
     }
     
     protected void renderSection(Component parent) {
     final Div container = new Div();
     container.setStyle("text-align:center");
     container.setSclass(CATALOG_SECTION_CONTAINER_CLASS);
     parent.appendChild(container);
     
     final Button generateBtn = new Button("Click");
     generateBtn.setWidth("150px");
     generateBtn.setHeight("30px");
     generateBtn.setParent(container);
     generateBtn.setStyle("background-color: #4CAF50; color: white;");
    
    generateBtn.addEventListener(Events.ON_CLICK, new EventListener() {
     public void onEvent(final Event arg0) throws Exception {
     final Messagebox ms = new Messagebox();
     Messagebox.show("It Works");
     }
     });
     }
     
     private class CustomSectionRenderer implements SectionRenderer {
     @Override
     public void render(final SectionPanel panel, final Component parent, final Component captionComponent,
     final Section section) {
     parent.getChildren().clear();
     if (panel.getModel() instanceof DefaultEditorSectionPanelModel) {
     renderSection(parent);
     }
     }
     }
    }
  3. Add the Custom Editor Section to the Configuration.

    After creating the custom class providing all necessary methods you add the custom editor section to a particular configuration for the editor area. 
    Example:
    In order to add custom custom section we need to use <custom-group …./> tag  and provide the required attributes through the configuration file. Used attributes are as follows:

    <custom-group tag:
    class: 
    Specify the class representing the custom section providing all necessary things for this section. 
    qualifier: A section identifier. 
    initially-opened: A flag indicating whether this section is opened or not when it is diaplayed.
    show-if-empty: A flag indicating whether this section is opened or not when it does not contain any properties.

    <label tag
    langAn indicator for the language of labels.
    For our case the custom-group tag will look like this:

    <custom-group
                class=”org.training.cockpits.productcockpit.editor.CustomSectionConfiguration”
               qualifier=”customSection”
               initially-opened=”true”
               visible=”true”>
              <label lang=”en”>Custom Editor Section</label>
    </custom-group>
    For our case well go to  trainingcockpits > resources > trainingcockpits-config/cockpitgroup/editorArea_Product.xml
    and add the custom-group tag
    (Note: training is the name of my module extension. Please replace training  by your module extension name)

  4. Final Steps

    Build the project i.e. run ant all and after successful build, run an update from HAC with the project data for the cockpit extension (in my case it is trainingcockpits) checked. 

  5. Result

    After performing all the steps you should be able to see the green colored button inside our custom section. 

 

About The Author

Leave a Reply

*