Name: Exploring the Backoffice Framework UI in SAP Commerce Cloud
Uploaded: 2021-1-12
Duration: 666 s
Description: The SAP Commerce Backoffice application is a business tool that has been built with the Backoffice framework. This video provides you a walkthrough of the Backoffice application UI.

Share feedback

<p><u><strong>Planned maintenance of Practice Systems</strong></u></p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><p>The SAP Commerce Backoffice application is a business tool that has been built with the Backoffice framework. This video provides you a walkthrough of the Backoffice application UI.</p></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

Exploring the Backoffice Framework UI in SAP Commerce Cloud

In this video, we will do a walkthrough of the Back Office Framework UI. The SAP Commerce Back Office application is a business tool that has been built with the back office framework. It is used for generic data management and demonstrates many important features and best practices of developing with the framework within the SAP Commerce Cloud, back Office is the single user interface for all back end business tools, used by both business and administrative users. For users, it is easy to use user centric, intuitive, and performant. For developers, it is highly extensible and configurable. Seeing what has been done in the back office will provide you with examples of the types of features that you can build into your own applications. With the back office framework, we will start by describing the layout of the back office application and the widgets that are used in the default layout. Next, we'll move to the actions that are available for you to use. Then we will look at the collection browser widget and two main views that are supported by it. The tree view and the list view. Let's begin our walk through of the back office 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 back office 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 back office application. This is where you will access many of your system actions. From right to left we can see the logout button. We can see the available locales and enable or disable each one of them. Enabling or disabling a locale will change whether that locale is available to be populated in an item's localized field. For example, on a product name field, 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 this representative icon. A perspective is a specific view of the application with its associated role based permissions, layout, widget which it 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 back office framework. Let's move back to the left hand side where the exploratory 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 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 select 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 out all 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 use 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 move one of the identifiers and instead add another criteria. The products 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 an 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 back office. Here's 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 done 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 results 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 function ability is similar to the Explorer Tree widget. Let's go back to the list View mode and select one of the products. This product data is now shown in the editor area widget. The editor area which it 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 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. Back office comes with a large set of editors to choose from that handle many different data types. Another feature is that we can see in attributes qualifier after we hover a cursor over an attribute 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 products data. For example, let's change this product 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 for 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 products 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 Back office 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 Back Office Framework UI. Thank you for watching.