widgetsap-commerce-cloudbackofficezul

SAP HYBRIS [Y] : How to create our custom widget in backoffice

I am a beginner in the Sap Hybris. I want to understand the backoffice extension and how to create our custom widget. Just a small example to understand with the different steps.

Solution

  • I'm going to clear the steps to create a widget

    Creating a Widget

    To create a widget, you need to start by creating a widget definition. The definition of a widget is provided in definition.xml file.

    Procedure

    1. In myextension/backoffice/resources/widgets directory create a new folder called mysearch.

    2. In the mysearch folder, create a definition.xml file.

    3. Add information about the search widget.

    You can provide information like name, description, default title, author, and version. Each widget must have a unique ID made up of the extension and widget names. For this tutorial, the widget ID is org.myextension.widgets.mysearch.

    definition.xml :

    <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<widget-definition id="org.myextension.widgets.mysearch" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/widget-definition.xsd">

    <name>My Search</name>
    <description>My own search widget.</description>
    <defaultTitle>Search</defaultTitle>
    <author>Me</author>
    <version>0.1</version>

</widget-definition>

    Creating a Widget View :

    The view of this widget is defined in a ZK ZUL file, named after the last part of the widget ID as specified in the definition.xml (in this case mysearch.zul).

    Context

    In the mysearch.zul file, you define all frontend components. For the search widget, you need two components: a text box and a button.

    Procedure

    1. In the mysearch folder, create the mysearch.zul file.
    2. Add the text box and button components, providing an ID for each, along with a button label. Your mysearch.zul file should look more or less like the following example.

    mysearch.zul

    <widget xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.zkoss.org/2005/zul">
    <style src="${wr}/default.css"/>
    <div>
        <hlayout>
            <textbox id="searchInput"/>
            <button id="searchBtn" label="Search"/>
        </hlayout>
    </div>
</widget>

    Deploying the Widget

    Now, the newly created widget needs to get deployed.

    Procedure

    1. Include your new extension:

      a. Open the <HYBRIS_CONFIG_DIR>/localextensions.xml file.

      b. Add the following line
      <extension name="myextension" />

      c. Save the file.

    2. Build your project:

    Call ant clean all to build SAP Hybris Commerce and start server

    Adding the Widget to an Application

    After deploying a widget, you need to add the widget to an application.

    Implementing the Search Service

    The widget requires implementing some logic. As the widget is responsible for search, the SearchService is to be implemented.

    Context

    Before creating controller, you must add a SearchService, which is used by your search widget.

    Procedure

    1. Add a new class named SearchService to the src folder within the org.myextension package. The following code is an example implementation.

    SearchService.java

    package org.myextension;

import java.util.ArrayList;
import java.util.List;

public class SearchService {
    public List<String> search(final String text) {
        List<String> result = new ArrayList<String>();
        result.add(text);
        result.add("Hello");
        result.add("Cockpit NG");
        result.add("Developer");

        return result;
    }
}
    1. Add the new implementation to the Spring context file located in myextension/resources directory:

    myextension-backoffice-spring.xml

    <bean id="searchService" class="org.myextension.SearchService"/>

    Creating a Controller

    The newly created widget requires a widget controller.

    Context

    As you have not defined any action for the Search button, nothing happens if it is clicked. For this you need to create a controller.

    Procedure

    1. In myextension/backoffice/src/org/myextension, create a controller with the following package name: org.myextension.widgets.mysearch.

    The controller should extend DefaultWidgetController. Name it MySearchController.

    1. Add the implementation for the following actions:

      a. When a search query is typed in the text box, it should trigger the search.

      b. When the Search button is pressed, the search for the search query should be executed.

    MySearchController.java

    package org.myextension.widgets.mysearch;

import java.util.List;

import org.myextension.SearchService;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.select.annotation.WireVariable;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Textbox;

import com.hybris.cockpitng.annotations.ViewEvent;
import com.hybris.cockpitng.util.DefaultWidgetController;

public class MySearchController extends DefaultWidgetController {
    private Textbox searchInput;

    @WireVariable
    private SearchService searchService;

    @ViewEvent(componentID = "searchBtn", eventName = Events.ON_CLICK)
    public void doSearch() throws InterruptedException {
        List<String> result = searchService.search(searchInput.getText());
        Messagebox.show(result.get(0));
    }
}
    1. Add a controller class in definition.xml (the one located in myextension/backoffice/resources/widgets/mysearch directory).

    definition.xml

    1. Rebuild the system like you did in the Deploying the Widget procedure.

    2. Click the Search button.

    A pop-up message appears with the same text that you typed into the text box.