Evaluating Custom Backoffice Extensions


After completing this lesson, you will be able to:

  • Evaluate how to create custom Backoffice extensions and identify the required configuration files to successfully create extensions for various implementations

Custom Backoffice Extensions

The Backoffice application is based on the Cockpit NG Framework and can be extensively customized.

It is implemented in the Backoffice extension, so let’s look at some essentials and the use of the yBackoffice template to manage your own Backoffice extensions.

Backoffice extension contains all OOTB functionalities of Backoffice, which includes Backoffice framework and Administration Cockpit with standard widgets. It's a single web application that serves as a container for all Backoffice modules. It contains the Application Orchestrator (F4) to design your own custom mashup. By default, the application is accessible at this link: (https://localhost:9002/backoffice)

yBackoffice extension template helps you customize your Backoffice. The template can be used to generate a custom extension where you can implement your own Backoffice module, widgets, or UI configuration. Each extension based on yBackoffice contributes to the main Backoffice application. However, it's important to note that these extensions cannot be used to create another Backoffice application with a different access URL.

Demo: Create a Custom Backoffice Extension

Now that you understand the essentials of Backoffice and using the yBackoffice template, let’s see how to create a custom Backoffice extension in the following demo.

Backoffice-Related Files in a Custom Backoffice Extension

You might be curious about how a custom Backoffice extension is different from other commerce extensions after learning how to create one.

Custom Backoffice extensions, created using the yBackoffice template, come with unique Backoffice-related files. These files are designed specifically to configure, extend, or customize the Backoffice according to your needs. Let's look at an example (below) of a custom Backoffice extension named demoBackoffice, and understand how these special files are organized within this extension.

This image depicts the two specific folders that contain the unique Backoffice related files in a custom Backoffice extension.?This image depicts the two specific folders that contain the unique Backoffice related files in a custom Backoffice extension.

As illustrated in the preceding image, within the custom Backoffice extension, "demoBackoffice", there exists two folders containing Backoffice-related files.

The first folder referred to as backoffice, typically contains a subfolder named widgets where custom widget types are stored.

For example, widgets/mywidget folder contains all the necessary files for a custom widget type called mywidget. These files include:

  • demobackoffice/backoffice/resources/widgets/mywidget/definition.xml: Declaration of a specific widget type. The component definition, inputs and outputs, and meta data related to it.
  • demobackoffice/backoffice/resources/widgets/mywidget/view.zul (optional): Default view for a widget type based on ZK.
  • demobackoffice/backoffice/src/<package_of_demobackoffice>/widgets/MywidgetController: is the Java class acting as the Controller for the custom widget type.
  • demobackoffice/backoffice/resources/widgets/mywidget/cockpit-config.xml (optional): Default context configuration of a custom widget type. Consider it as the widget’s default configuration.

Creating a custom widget type in the backoffice folder is beyond the scope of this learning journey. For further information, refer to the Creating a Widget section in our help portal documentation or C4H365 - SAP Commerce Cloud Backoffice Framework Developer Training.​

The second folder, resources, maintains special Backoffice-related files. Particularly in the demoBackoffice extension, this folder contains two vital Backoffice configuration XML files.

  • demobackoffice/resources/demobackoffice-backoffice-config.xml: Configuration of context components defined in the demoBackoffice extension. 
  • demobackoffice/resources/demobackoffice-backoffice-widgets.xml: Configuration of widgets (IDs, positions, settings, and so on) and their socket communication is defined in the demoBackoffice extension.

We will examine these files more thoroughly in the next lesson.​

Log in to track your progress & complete quizzes