Backoffice Customization

What is Backoffice Framework?

Backoffice Framework is new SAP Hybris Backoffice Framework designed to facilitate the creation of business tools and user interfaces in an easy and consistent way. It is shipped with SAP Hybris Commerce in the backoffice extension. It makes it possible to create a variety of components that can be reused later on in all kinds of applications. These components are standalone and deployable widgets can be easily modified without touching the code base.

In this tutorial, we will show you, how to create a custom widget using the Backoffice Framework. Our custom widget will have one input and one submit button. Suppose we enter some input and press the button, If the entered value is an integer then one pop up appears and it contains a message that Input value is an integer otherwise it will display an error that entered input is not an integer.

Steps to create a custom widget

  1. Create a custom  backoffice extension

  2. Create a widget definition

  3. Creating a widget view

  4. Create a service for widget/Use existing service for a widget

  5. Create a controller for the widget

  6. Build and start the server

  7. Deploy the widget

1. Create a custom  backoffice extension

Here we will create one custom backoffice extension named hybrisdiary using the BackOffice template extension. In this custom backoffice extension (hybrisdiary) we can create our custom widgets. To create custom backoffice extension(hybrisdiary) follow the following steps:-

  1. Open the command prompt and navigate to  <%HYBRIS_HOME_DIR%>/hybris/bin/platform directory and run the setantenv.bat file as shown in below image.setantenv.bat
  2. Now run ant extgen command.ant extgen
    Extgen prompts you to specify values for the technical aspects of an extension. Extgen comes with default values for all these technical aspects.
    These default values are defined in the file in the extgen directory. The default value is displayed in brackets ([ and ])
  3. Now we enter ybackoffice as shown in below image.ybackoffice
  4. Now enter extension name hybrisdiary as shown in below image.
    hybrisdiary custom backoffice name
  5. Now enter the package name(de.hybris.hybridiary) as shown in below  image
    package name
  6. If you want to register  SASS support for your extension then press enter otherwise type false and then press enter. Here we are using default value so we will press enter.
  7. If you want to create sample widget then press enter otherwise type false and then press enter. Here we are creating sample widget so will press enter.
  8. If you want to create a sample style sheet then type true and then press enter. If you do not want to create a sample style sheet then simply press enter.
    SASS extension sample widget sample style sheet
  9. Navigate to <%HYBRIS_HOME_DIR%>/config and open file and specify the following entry and save it.
  10. Now run ant sasscompile from the platform.
    ant sasscompile
  11. Now we will add our custom backoffice extension(hybrisdiary) to localextensions.xml
  12. Now we will do ant clean all.
    ant clean all

If the build successful then your custom backoffice extension successfully generated. If you are using eclipse then import your custom backoffice extension in to eclipse.

2. Create a widget definition

To create a widget definition, we must keep in mind that widget-definition id must be unique. If your widget-definition id matches with existing widget-definition id then your new widget will not appear on the list of widgets in the choose widget wizard. Now do the following steps to create the widget definition:-

  1. Navigate to hybrisdiary->backoffice->Resources->widgets and create a new folder called as mycustominput
    mycustominput folder location
  2. Now create a definition.xml file inside the newly created folder(mycustominput).
  3. Now add the following lines of code to the file(definition.xml).


3.Creating a widget view

The view of our widget will be defined in the ZUL file and the name of the file must match with last part of the widget ID as defined in the definition.xml file. The last part of widget ID is mycustominput so the view file name will be mycustominput.zul. In mycustominput.zul file, we will define all frontend component. To check whether the entered input is an integer or not we need one textbox for input and one button to submit. So we will define one textbox and one button in mycustominput.zul file. Now follow the following steps to create the widget view:-

  1. Now create a mycustominput.zul file inside the mycustominput folder.
  2. Now add the following lines of code to the mycustominput.zul file.


4.Create a service for widget/ Use existing service for a widget

For our example, we need some service to do some action. Either we can create our custom service to do some logic or we can use existing services. In our example, we will create a custom service that will check that the entered input is an integer or not. To create a service for our custom widget, we need to follow the following steps:-

  1. Navigate to hybrisdiary->src folder and create file in de.hybris.hybrisdiary.mycustominput package.
  2. Add the following lines of code to the file. file
  3. Navigate to hybrisdiary->resources and open hybrisdiary-backoffice-spring.xml file and define the bean for MyCustomInputService as shown in below image.
    mycustominputservice bean
    mycustominputservice bean


5. Create a controller for the widget

Here we have not defined any action for submit button so when we click on the button nothing will happen. To do some action we need to define a controller for the widget. To create a controller for the custom widget we need to follow the following steps:-

  1. Navigate to hybrisdiary->backoffice/src and create in de.hybris.hybrisdiary.widgets.mycustominput package.
  2. Add the following lines of code to the file.

  3. Navigate to hybrisdiary->backoffice->Resouces->widgets->mycustominput and open definition.xml file and we add a controller class to this file as shown in the image.


6.Build and start the server

Now we will build the system by running ant clean all and we start the server by running the hybrisserver.bat file.

7.Deploy the widget

Now we will deploy our custom widget. To deploy the custom widget do the following steps:-

  1. Open the internet browser.
  2. Enter https://localhost:9002/backoffice  in the browser’s address bar.
  3. Enter your credentials and log in.
    backoffice login
  4. Press F4 to enter into Application Orchestrator mode and click on the symbol(+ symbol inside an orange circle) to add the new widget as shown in below image.
    Application Orchestrator mode
    Application Orchestrator mode

    The choose widget appears, which contain all the available widgets and choose My Custom Input widget. You can easily learn the process of adding a widget to backoffice by observing the image.
    add widget process

  5. Now press F4 to enter into normal mode and you will see the newly added widget in backoffice.
    new widget in backoffice
  6. Now we enter 54 in the input box and which is an integer and we press the submit button. Now message box will appear which show us that “input value is an integer“.
    working widget

Managing configuration properties for multiple environments

An enterprise level solution always have different environments for different stakeholders like local, dev for developers, UAT/SIT for QAs etc. Then we have a production environment.

Every environment may have different characteristics,  like different email SMTP servers or different database etc. Hybris based projects are no different and have multiple multiple environment based on lifecycle of project.

Now the problem is how to manage configuration for multiple environments. Of course, we can do it manually, where we can have different property files set up on individual server. But this solution is  not modular and efficient.

The approach i am going to present is based on using apache ant to create environment specific file. It will copy properties from one common file and one environment specific file and merge them to create a complete file.

Follow below steps:

  1. Create below  folder structure inside hybris config directory. 


 2. Place your properties in each one of local files as per environment related values. The property which have same values across environment will go to common local property file.

3. Create a build.xml file inside config project and copy below content. 


4. Now we have a ant build xml, which will create a environment specific property file. You can run like below, pass the environment name as required. 


Now you have a flexible solution to configure your hybris system more efficiently, thanks to open source apache ant.


Dynatrace installation : org.apache.catalina.LifecycleException: An invalid Lifecycle transition was attempted ([before_stop]) for component [StandardService[Catalina]] in state [INITIALIZED]

Are you getting a life cycle exception during server start. This is actually because you followed hybris wiki blindly, without reading instructions carefully.

While installing a dynatrace for your hybris project, you need to add few parameter to tomcat, so that dynatrace agent is loaded. But probably, you overridden all tomcat options.

Solution is to copy tomcat.generaloptions from of platform extension and add dynatrace properties in the end.

tomcat.generaloptions=-Xmx2G …”${HYBRIS_TEMP_DIR}” ${dynatrace.jvm-opts}

Restart cmd and run build again.