https://cdnapisec.kaltura.com/p/1921661/sp/192166100/playManifest/entryId/1_bqtged0z/format/download/protocol/https/flavorParamIds/0

U2L7V1_Demonstrating Backoffice Interface.mp4

Let's begin our walkthrough of the Backoffice application. Here we can see a login screen and credentials are already filled in. We will be logging in as a user with the admin role in order to demonstrate the admin capabilities of the application. Let's change the language. We can see that the labels are changed immediately. This change will apply to all localized text within the application. Now let's log in to the application. After login, we can see the Backoffice administration cockpit in the default layout which consists of a border layout. The border layout widget is a layout widget that allows for other widgets to be positioned within it. This particular layout widget is divided into two main parts, a left -hand side and a right-hand side. The right-hand side contains by default the administrative cockpit dashboard. As you can see, there is a toolbar across the top of the application, called the System Toolbar. In the Backoffice application, this is where you will access many of your system actions. From right to left, we can see the User Profile button. We can also access the Collaboration Center, where we can monitor workflows and interact with them. The next button gives us access to a list of processes. Then we can check the applicable roles to the user that is logged in. If we have more than one perspective configured, here, we can change to a different one by clicking on its representative icon. A perspective is a specific view of the application with its associated role-based permissions, layout, widget, widget connections, and so on, which is called a mashup. In your application, you might have separate perspectives for different business roles, and each role only sees their applicable perspective when they log in. The system toolbar is an example of a standard widget that you can use and configure in your own standalone applications based on the Backoffice framework. Let's move back to the left -hand side where the Explorer Tree widget is placed. This is another widget that you can use in your own applications for navigation capabilities. Here we can expand tree nodes for navigation of SAP Commerce Cloud items. For example, I'll expand the system node and then I'll select Types. This is one of the ways we can navigate in the Explorer tree. Another way we can navigate is to use the filter input on the top. It will dynamically filter out criteria that don't match your input as you type. Let's type product and then let's select products from the filtered results. We can see that there is some communication happening between the widgets on this page, as now on the right -hand side we can see that there are several products listed here in a widget called the Collection Browser. We will discuss more about widget communication later. Also notice that once we selected a node in the Explorer tree, a search box appeared at the top of the right-hand side widget. This is the Simple Search widget, and it allows us to search within the type that we selected. This means that we can search for specific products. By default, Simple Search searches within the code and the name attributes for all product types, but this is something that is completely configurable. Let's say we want to find all shirts, so we type shirt. Here, we can see a list that contains several products whose code or name contains the word shirt. Search also has an advanced mode where you can use different comparators, criteria, and operators to further refine your search. For presentation purposes, I'll clear all of the default criteria. In advanced search, we can specify the type of object to search for. Let's keep using product here. The global operator, or, is fine for now. For the criteria let's select identifier, specifying that it must contain the word shirt. Then let's add another identifier that must contain the word jeans. Because we used the global operator, or, we can see all products that contain the word, shirt, or the word, jeans, in their identifier fields. If we change it to the AND operator, we will see no results because there are no products that meet both criteria. Let's remove one of the identifiers and instead add another criteria. The product's article number must contain B. After we press the search button, we see that there are eight products that match both criteria. SHIRT in their identifier and B in their article number. Again, it's the AND operator that allows us to narrow the search to only those items that meet all of our defined criteria. Now let's view some generic actions that are available in the Backoffice. hybris the button that can delete the selected item. The next button can be used to create a new product. Let's click it now to start creating a new product. The Create Wizard appears. Currently, it is configured to have four steps. In the first step, all fields must be filled out. After we have filled them, we see that now the Next and Finish buttons are no longer disabled. We can move to the second step, which is fully optional. We can move to the third step or even go back to any of the previous steps. The action Export Excel allows us to export the selected items listed in the collection browser to an Excel file, which we can save on a hard drive. Now, let's take a look at the two view modes that are supported by the Collection Browser widget. The first view mode, which is currently shown, is List View. This is the default view mode, and it resembles a table with columns and rows. At the top, we have a header with column names. Result items are shown one per row, and each result's properties are displayed in the columns. It supports sorting if we click on the column header. For example, let's click on article number. Also, please note that if we click again it will sort again, but in reverse order. The second view mode of the collection browser widget is the tree view mode. To change to this view mode, we need to click on the tree view button which is located on the right side of the collection browser's toolbar. In this mode we can view object properties in hierarchical manner. We can click on any node and it will expand to display its child nodes. This functionality is similar to the Explorer Tree widget. Let's go back to the List View mode and select one of the products. This product's data is now shown in the Editor Area widget. The Editor Area widget is where a user can see and potentially edit any of the editable properties of an item within the system. Please note that we can expand or collapse the editor or the list so that we can focus in just one of them. Back to the editor area, we can see that this widget has multiple tabs across the top, and each tab can be divided into multiple sections. The sections can each be collapsed or expanded to allow the user to focus on one section at a time. Also, in each section we can have as many attributes and editors as we wish with different data types. Out of the box, Backoffice comes with a large set of editors to choose from that handle many different data types. Another feature is that we can see an Attributes qualifier after we hover a cursor over an Attributes label. The tabs, sections, attributes, and editors that you can see in this widget are all configurable. Now that we are working in the editor, we can change the product's data. For example, let's change this product's description and save it. Notice that after we press the Save button, a green banner with a notification message appears at the top. This is a common place for notifications to appear. Now, let's move to the Prices tab. Here, notice that the Price class label has a question mark icon near it. When you click on the icon, additionally provided context information about that property will appear. You can use this feature as a way to provide some additional help to your business users while they populate these fields. Another way of providing additional information can be seen in the Variants tab. Here we can see comments that are always displayed to the users. While in the Variants tab, we can see that this product has many different variants. If we double-click on one of the variants, we can see the Preview widget pop up with all of that product's variants. This whole widget reuses the Editor Area widget with all its actions and options, but additionally on the right, we can see that it also has preview images of other variants within the widget. This type of widget, that is built from more than one widget, is called a composed widget. If we click on the preview image of another variant, the editor is switched to that of the newly selected variant. Let's switch to the Multimedia tab and double-click on a thumbnail. Here we can upload, for example, the product's photo, download the existing photo, or just clear the content. Now let's switch to the Attributes tab and double-click on Catalog Version Input field. Another window has appeared, but as you can see, the previous one is still open in the background. This is because Backoffice supports cascading windows within a single browser tab. If we close this new window, we can continue working from where we left off in the previous window. This ends our walkthrough of the Backoffice Framework UI.

Share feedback

<p>We are aware of intermittent issues in accessing the learning content</p>

We are aware of intermittent issues in accessing the learning content

Track your progress, save content and access your certifications — all in one place.

Log in or create a free account.

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Activate your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

Describing Backoffice Standard Features

bookmap_CX3400_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2026-10-13T09:58:52.000Z

<div id="content"><p tabindex="0">The Backoffice is a user-centric, extensible, back-end interface enabling business users to easily manage any kind of data within SAP Commerce Cloud.</p><p tabindex="0">View the following video to get an overview of the Backoffice interface:</p><div class="kalturaVideoLessonWrapper"><div id="1_bqtged0z" data-testid="video" class="kalturaVideoLessonContainer" aria-label="This video offers a comprehensive guide to navigating the Backoffice user interface, highlighting key graphical user interface components."></div></div><div class="parentsection"><div class="section"><div tabindex="0"><h3>Key Takeaways</h3></div><ul style="list-style-type:disc"><li tabindex="0">The Backoffice is a user-centric, extensible, back-end interface that enables business users to easily manage data within SAP Commerce Cloud.</li><li tabindex="0">Its widget-based interface includes the Explorer Tree for navigation, the Collection Browser for browsing and searching items, and the Editor Area for viewing and editing item properties.</li><li tabindex="0">The video walkthrough demonstrated key features including role-based perspectives, simple and advanced search, product creation and editing, and support for cascading windows.</li></ul></div></div></div>

Backoffice Overview

This browser is not supported

Show more

Ooops, something went wrong!

Oh no! Tell us how we can improve.

Great! We value your feedback

Thank you!

Browse by capability

Please wait

Unfortunately there is a technical problem preventing us from checking your exam attempt status. Please try again later.

Unable to check your exam status

Please try again later

Sorry, we encountered an error

Try again or reset results to continue browsing

We didn't find what you're looking for

To continue, please log in

Your session has timed out

Validate your skills and learning by completing the certification exam and gain a highly recognised accreditation.

Book your certification exam

Complete the assessment to validate your SAP PartnerEdge competency qualifications.

Ready to take your assessment?

Learn about the key features and essentials in the latest release to help you prepare for the Stay Certified assessment.

Prepare for assessment

Learn new skills you need at your own pace with our bite-sized lessons.

Prepare for certification

In your My Learning account you can view your certification and learn how to take your Stay Certified assessment.

Ready to take your Stay Certified assessment?

Turn it into a podcast, summary, mind map, or interactive study guide – and get AI answers on any topic as you go.

Learn this course your way

Get tailored answers, tune into podcasts, and dive deeper with interactive study guides, mind maps, FAQs and more.

Upskill faster with AI-powered assistance

Upgrade to AI-powered learning

Enroll in Gemini Notebook to flexibly interact with SAP Learning content. It's free and activates instantly.

You are all set. Gemini Notebook is now active. You will have access to AI powered learning for all our eligible courses.

Enrollment successful!

Get started with AI-powered learning

Stay Certified Assessment/s Pending

Explore {title} at SAP Learning. Find out more!

You have earned a new badge!

You've completed

Something went wrong when connecting to the badge service. You can always check your achievements in My Learning.

Badge couldn't be issued

You've finished the course, but the external system didn't verify it. Please try again later or refresh the page to update your record.

We couldn't confirm your completion

The learning content has been updated. Refresh the page to reload the most recent content.

Your course content has changed

This badge was already awarded earlier, so no new one is added. You can view it anytime in My Learning.

You've already earned this badge

We couldn't finish your request due to an unexpected error. Please refresh the page and try again. If the issue continues, check My Learning or try again later.

Something went wrong...

The saved progress data isn't valid, so we couldn't update your course status. Please try again later or refresh the page.

We couldn't load your progress

{count, plural, one {Objective} other {Objectives}}

Assessment

Course Completion

Knowledge Badge

Overview

Support Resource

Certification Exam

Theoretical Exam

Schedule

Stay Certified

External Course

AI Roleplay

Practical Exercise

Practical Test

External Hands-On

External Resource

Learning Journey

Learning Journey Assessment

Lesson

Live Session

Practice System

Hands-on Practice for {title}

Quiz

Scenario Based Assessment

Course Assessment

Course

SAP Expert Lectures

Subscription

System Based Assessment

Unit

Video

Video Playlist

Week

You have until July 30, 2026 to complete your Stay certified assessment.

Your SAP Certification extension is now active!

Please log out and log back in. If the issue persists after waiting a moment, please reach out to Support.

An error occurred during log in

Your exclusive access to the SAP Learning Hub, event edition is ready. <link>Start learning now.</link>

Access activated

Your free Joule Studio Certification voucher is now available. <link>Prepare for your exam</link>

Free voucher activated

Something went wrong while activating your free Certification voucher. Try again.