<p>about your learning experience to help us improve.</p>

You've completed

cleanFiles/bookmap_SAP_Commerce_Cloud_Essentials_for_Develope_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2024-11-21T07:42:21.000Z

Configuring Backoffice Using Application Structure Files

<div id="content"><p tabindex="0">As you learned in the previous concept, the behavior of widgets displayed inside Backoffice can be modified by editing XML configuration files.</p><p tabindex="0">It’s time for some practical examples.</p><p tabindex="0">The following video demonstrates how to modify the product advanced search widget in the Administration cockpit.</p><div class="kalturaVideoLessonWrapper"><div aria-label="This video shows how to configure the backoffice." class="kalturaVideoLessonContainer" data-testid="video" id="1_4rvfam0t"></div></div></div>

Backoffice Configuration

Exploring the Technical Essentials of SAP Commerce Cloud

Configuring Backoffice using Application Structure Files

The Backoffice application structure contains two XML files  that you need to know about as a developer:  backoffice-widgets.xml and backoffice-config.xml.  backoffice-widgets.xml contains the application mashup  for any perspective within the application.  The local file backoffice-config.xml contains the contextual UI behavior for components  depending on the current user and on the datatype being displayed.  These files in your backoffice extension are merged into  an in-memory global mashup for the entire application,  which can be viewed within the Application Orchestrator.  We’ll discuss these files in more detail in a moment.  For now, just note that the configuration that  developers will edit primarily resides in these two files.  To view the content in the widgets.xml view, I'll click on the menu icon in the upper right corner and then click on Show widgets.xml.  As you can see, this file contains the XML representation of all of the information  that you just viewed within Application Orchestrator.  You can see the list of widgets, each denoted by a XML element.  You can see how a widget is placed within the layout,  denoted by whether it is nested inside another element and its slotId attribute.  You can view the actual values of various widget settings.  At the bottom of the file, you can view any  connections that have been configured between widgets.  Remember that you cannot directly edit this file, as it is read-only.  It is dynamically merged from multiple filesystem XML files.  To make runtime changes to this file,  you can edit the desired application's mashup in the Application Orchestrator.  Both the widgets.xml file and the user interface will be dynamically updated.  You can also make runtime updates to the merged widgets.xml file  by providing either application-level or extension-level widgets.xml files  and then selecting 'Reset to Defaults'.  This will cause the application to reload and  merge all of the widget xml files in the application.  Note that this will revert any changes to this file  that were made within the Application Orchestrator.  I'll close the widgets.xml file and switch  our focus to making runtime configuration changes to the backoffice-config.xml file. The "component context UI configuration" describes the content and behavior of widgets  and other components in different contexts. The component context UI configuration exists in a file called ”backoffice-config.xml". This is also a merged file that is  dynamically created from multiple XML files on the filesystem.  You can view and edit the XML from this merged file within the Application Orchestrator.  Once you edit this file through the user interface,  you can tell the Application Orchestrator to save the entire merged XML  to the database as a Media item.  Backoffice developers can provide default UI configurations for their custom and extended widgets. This configuration is located in an XML file within the individual widget's folder structure. At runtime, this XML file will be loaded into the merged cockpit-config.xml definition.  Any runtime changes to the merged cockpit-config.xml  will override these default configurations. We will take a look at the AdvancedSearch widget  and note how it looks in a given context, that context being the selected type.  Now let’s select the Product type to activate the AdvancedSearch widget.  As you see, it has quite a few visible search attributes by default. Even more search attributes can be added.  I'll change the configuration of this widget, but just for the Product type.  I'll change it so that only the Identifier appears on its default search attributes list.  I'll also restrict it so that only the Approval status can be added as an additional search attribute.  To make these changes to the backoffice-config.xml, I'll enter the Application Orchestrator.  I'll click on the menu icon in the upper right corner and select Show cockpit-config.xml. Notice that if you compare what you are seeing now  to the widgets.xml file that we previously looked at,  this file has the addition of a 'Store' button at the bottom.  This is because the file is editable and can be saved to the database.  Let's locate the configuration  for the Advanced Search widget in the context of the Product type.  We can do this by opening the Filter Options and filtering,  first, on “advanced search” under “Component”, and then on “ Product” under “Type”.  To learn more about the configuration requirements and options for a specific widget,  remember that you can visit that widget's wiki page under Available Widgets.  For the purpose of simplifying this demonstration,  let's remove the XML responsible for merging this configuration.  Merging is a topic that will be covered in another video Now, let's remove all of the 'advanced-search:field' elements  that we do not want to display for Products.  We will keep only the lines that refer to the Identifier,  and the Approval status fields.  Note that the 'selected' attribute specifies whether a field is displayed by default  or is only available as a potential additional search attribute to display.  Now I'll save our updated config.xml file back to the database by clicking Store.  A confirmation is requested to avoid any accidental saves.  After the cockpit-config.xml has been saved and the page has reloaded,  we can exit the Application Orchestrator and view the effects of our updates. I'll again select Products and expand the Advanced search.  You can see now that only the Identifier is visible on the search attributes list by default. If we want to add another search attribute open the Add Criteria combobox  we can see that now the list only contains those attributes that we've specified in cockpit-config.xml file: Identifier and Approval status.  The other attributes are derived from GenericItem.  Note that our configuration updates do not apply to the AdvancedSearch widget  in any other context, for example when any type other than Product is selected.  This is because we edited this widget's configuration exclusively for the Product context.  This concludes our brief introduction  to making runtime configuration changes in a Backoffice Framework application. Although this demonstration was based in the Backoffice Admin Perspective,  the process would be the same for any other cockpit view.

Share feedback

Follow guided learning and develop the skills you need at your own pace

Join a moderated learning group to engage with our experts and peers

Find the right learning resources to drive your career as a developer

Sign up to access exclusive student learning journeys

Discover the SAP product knowledge you need to help you progress in your career

Develop your skills

Learn.png

Want to learn more about the value of learning with SAP?

View available SAP Certifications on SAP Learning 

Purchase a subscription and book your exam

Validate your SAP expertise

SAP Certification validates your skills, sets you apart from the crowd, and demonstrates you have the knowledge you need to succeed.

Certify.png

Accelerate your career 

Upskill in key innovation topics through openSAP's free, expert-led online courses, microlearning, and podcasts.

Join SAP Community and connect with a global network of experts and peers to ask and answer questions.

Search for SAP product documentation or browse all SAP Learning Journeys to become competent in the SAP solutions you need.

Log in to SAP Learning Hub and access the entire SAP Learning portfolio, live practice systems, and social learning opportunities.

Find free tutorials, trials, downloads, and technical product information in the SAP Developer Center.

Book live classes (online and in person) and purchase SAP Certification and SAP Learning Hub subscriptions.