Freestyle apps
Using the full power of Fiori Elements is quit easy, if you can use the Supported Floorplans, but what, if you need more freedom and have to develop a SAPUI5 Freestyle Application.
How can i use the generic power of SAP Fiori elements inside my custom apps?
SAP Fiori elements for OData V2
Smart controls
In case of the v2 model, you can use the Smart controls like SmartField or SmartTable, that interprets OData metadata so that you can use annotations to control high level features.
Smart controls are a specific category of SAPUI5 controls that have some special features in addition to the standard SAPUI5 features and thus make it easier to use the control in certain scenarios.
Smart controls
The controls in this library only support OData V2 and a default model (named undefined).
SAP Fiori elements for OData V4
The Supported Floorplans allow you to enrich apps with custom sections that allow to reuse the power of SAP Fiori elements by using the Building Blocks.
Building Blocks
SAP Fiori elements provides you with Building Blocks that allow you to create a visual representation of your data in a convenient way.
Building Blocks (Macros)
While extension points provide you with containers where you can then implement your own UI, SAP Fiori elements exposes a set of building blocks that are used to build the templates. These building blocks are not SAPUI5 controls, but rather a set of templating instructions that result in the creation of a specific control tree, depending on the bound data structures.
This topic is only applicable to SAP Fiori elements for OData V4.
Flexible Programming Model (FPM)
The SAP Fiori elements Flexible Programming Model Explorer showcases samples to better understand building blocks as part of the flexible programming model.
Flexible Programming Model
SAP Fiori elements for OData V4 provides various ways to extend applications to your own particular needs. The flexible programming model makes this easy for you. While you're free to use any SAPUI5 coding or controls in extension points, you can also take advantage of our building blocks and controller extensions.
FPM Cheat Sheet
| AppComponent | Main class for components (extends UIComponent) |
|---|---|
| RootView | NavContainer or Fcl (in FCL use case) |
| BaseController | Internal base controller |
| PageController | Base controller for Freestyle Page (extends BaseController) |
| ExtensionAPI | For all pages API to Controller Extensions |
| ui | Properties: editMode, isEditable, draftStatus, busy, pages OneWay |
|---|---|
| internal | Internally used TwoWay |
| view | UDINA namespace for custom freestyle page UX bindings TwoWay |
| List Report (LR) | View, find and act on a large set of items |
|---|---|
| Object Page (OP) | Display and categorize business object info |
| Form Entry Object Page (FEOP) | Alternative to LR/OP for data entry only usescase |
| Analytical List Page (ALP) | Offers a unique way to analyze data |
| Wizard | UDINA SAP Fiori Wizard Floorplan implementation |
| Illustrated Message Page | UDINA Floorplan to visually confirm a former action |
| Freestyle Page | UDINA Freestyle Floorplan for everything else |
| EditFlow | Edit flow of the application |
|---|---|
| IntentBasedNavigation | Intent-based navigation |
| MessageHandler | Message Handling |
| Paginator | Navigation using paginators |
| Routing | Routing flow of the application |
| Share | Share functionality |
| ViewState | State Handling |
| Table | PresentationVariantType, SelectionPresentationVariantType, LineItem |
|---|---|
| FilterBar | SelectionFields, Capabilities.SearchRestrictions |
| FilterField | Common.ResultContext |
| Form | Facets, CollectionFacet, ReferenceFacet, FieldGroup |
| FormElement | Common.Label |
| Field | DataField, DataPointType, DataFieldWithNavigationPath, DataFieldWithUrl, DataFieldWithIntentBasedNavigation, DataFieldWithAction |
| Chart | PresentationVariantType, Chart |
|---|---|
| MicroChart | Chart, ChartDefinitionType, ChartType, ChartMeasureAttributeType, DataPoint, DataPointType |
| FlexibleColumn LayoutActions | - |
| Paginator | - |
| Share | - |
Using building blocks in stand-alone custom pages
Adaptions to manifest.json
- Add the
sap.fe.macroslibrary as a dependency to your project.
json
"sap.ui5": {
"dependencies": {
"libs": {
...,
"sap.fe.macros": {}- Wrap your view into the FPM Component provided by SAP Fiori elements
You must wrap each view in which you want to use the building blocks provided by SAP Fiori elements into the FPM component provided by SAP Fiori elements. SAP Fiori elements needs the context path as the pointer to the metadata path.
json
"sap.ui5": {
"routing": {
"targets": [
"checkoutOnePage": {
"type": "Component",
"id": "entryPage",
"name": "sap.fe.core.fpm",
"options": {
"settings": {
"viewName": "ns.view.ViewName",
"contextPath": "/RootEntity"
}
}
}TIP
Because you have added a further component to your application tree, you can not access your app component from the view controller of your custom view via this.getOwnerComponent(). You must use this.getAppComponent() instead.
Adaptions to Component.js
- Extend
sap.fe.AppComponentinstead ofsap.ui.core.ComponentinsideComponent.jsYou must change your Component.js file to extend the SAP Fiori elements AppComponent instead of the UI5 Core Component. This ensures that your app will run within the SAP Fiori elements framework.
js
sap.ui.define([
"sap/fe/core/AppComponent", // instead of using sap/ui/core/UIComponent
], function (AppComponent) { // instead UIComponentAdaptions to YourPage.controller.js
If possible, extend the sap.fe.PageController instead of the sap.ui.core.mvc.Controller:
js
sap.ui.define(["sap/fe/core/PageController"], function(PageController) {
"use strict";
return PageController.extend("ns.DetailPage", {});
});but if your controller extends your own BaseController, this will also work with some (maybe not recommended) tweeking:
js
sap.ui.define([
"your/namespace/controller/BaseController.controller",
"sap/ui/model/json/JSONModel",
"sap/fe/core/controllerextensions/InternalEditFlow",
"sap/fe/core/controllerextensions/SideEffects"
], function (BaseController, JSONModel, InternalEditFlow, SideEffects) {
"use strict";
return BaseController.extend("your.namespace.controller.YourPage", {
_editFlow: InternalEditFlow,
sideEffects: SideEffects,
onInit: function () {
var oComponent = this.getAppComponent();
var oUIModel = new JSONModel({
// fixes for sap.fe flow
"isEditable": true,
"editMode": "Editable"
});
this.getView().setModel(oUIModel, "ui");
// ...
}Adaptions to YourPage.view.xml
Use the building blocks inside your view.
- Add sap fe namespace to your view:
xml
<mvc:View controllerName="your.namespace.controller.yourPage"
xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:fe="sap.fe.macros">
...
</mvc:View>- Add Field Building Block
xml
<f:FormContainer>
<f:FormElement>
<f:label>
<Label text="{i18n>SoldToParty}" required="true"/>
</f:label>
<fe:Field id="SoldToParty" metaPath="SoldToParty"/>
</f:FormElement>
</f:FormContainer>- Add FormElement Building Block (same result as above, but more fancy)
xml
<f:FormContainer>
<fe:FormElement id="SoldToParty" metaPath="SoldToParty"/>
</f:FormContainer>- Add FormElement Building Block inside Aggregation
xml
<fe:FormElement id="CartItem:GLAccount"
contextPath="to_Items" <!-- currently neccessary to repeat outer relative path
metaPath="GLAccount"
visible="{= !!${path: 'GLAccount_FC', targetType: 'any'}}"
/>Handling the Edit Mode
The building blocks provided by SAP Fiori elements require a 'UI' model with an isEditMode property. If you don't use the editFlow controller extension our framework provides, you must set this property yourself. If you want to use a building block in edit mode independent of the UI model, for example when using a dialog, you can explicitly set readOnly to false. Note that this also overrides the field control.
Benefits of using Building Blocks
Building Blocks offer the whole power of the SAP Fiori elements macro framework inside your custom controllers and views.
| Benefit | Description |
|---|---|
| Annotation Driven Design | You can control many data relevant aspects on service layer. |
| Field Control | Easily use Field Control annotations that will be taken into account. |
| Mix & Match | Just use the the things you need and chosse the level of granularity by yourself. |
| Side Effects | Side effects are evaluated automatically by the building blocks. |
| Value Helps | Using Field- or FormElement Building Blocks allow annotation driven value helps. Especially helpful, because neccessary sap.ui.mdc controls are currently not available. |
Open Topics
While working with the Flexible Programming Model, you maybe will notice some showstoppers. This happens because the main purpose of SAP Fiori Elements v4 is driving the annotation driven CRUD functionality for the supported Floorplans. Therefore, not all aspects of a freestyle developer have been taken into account, but feel free to contribute your needs.
The following list reflects the main needs from an UDINA point-of-view:
| No. | Topic | Type | Description | SAP Status |
|---|---|---|---|---|
| 1 | Non-Draft support | F | Drafts can be easily used in Greenfield (managed) integration scenarios, but are problematic with Brownfield (unmanaged). For example, you want to create a Form Entry Object Page for a remote service using a federation proxy with SAP CAP and all relevant annotations. | SAP currently does not plan to support CRUD operations for a non-draft oData service, but there is an alternative by using a CAP-Proxy to leverage Draft4NonDraft with CAP v7 and the upcomming Lean Draft. |
| 2 | Form Entry Object Page | F | The pattern only supports creation mode, but should also support continueing on previously created draft data, similar to the ui5-cap-event-app. | SAP will revise the Form Entry Object Page and follow the suggestion. Exactly what that will look like is still being discussed internally. |
| 3 | EditFlow onAfterSave | F | In conjunction with FEOP, there is no EditFlow.onAfterSave event available, to display a confirmation page after creating a new document. | This will be implemented by SAP and taken into account in the next planning. |
| 4 | Table Macro | F | It is not possible to stretch the table columns to the whole viewport width. | That was a UX decision. We want to avoid showing the table in different designs. Therefore we would rely on the UX decision and do not want to give our applications any decision-making ability. |
| 5 | Table Macro | I | It is not possible to completely hide the table header. The property headerVisible=" false" is not working as expected. | Is currently still being discussed with the sap.ui.mdc core team. |
| 6 | FilterBar Macro | F | There is no Reset-All-Filter-Fields button available. The only way is to open Adapt Filters and use the Reset button, that also needs a confirmation. From UX perspective, this is a bad behavior, because you need four clicks to reset your filters. Maybe, this concept also needs to be addressed in the SAP Fiori Design Guidelines for Filter Bar. | SAP introduced a "Clear" button inside the control. |
| 7 | List Macro | F | There is no List macro (like the SmartList) that allows the annotation driven usage of responsive lists. | Support not planned for SAP FE v4. |
| 8 | Common MessageButton | F | It is currently not possible to use the MessageButtton. Also the underlying server-side messages are not available by api. | Will be implemented by SAP and taken into account in the next planning.‚ |
| 9 | Field Macro | I | The field does not passthrough layoutData (e.g. to control GridData span). | Was implemented by SAP and is currently available via layoutData Aggregation. |
| 10 | Field Macro | F | It is not possible to use a custom field binding to be able to define event handler like dataReceived. In such cases, you have to fallback to plain input controls. | Still under discussion. |
| 11 | FormElement Macro | F | Needing to control the Field macro change event, you can not use FormElement anymore. Would be great to have have a delegated FieldChange event instead. | We will take this into account in the next planning. |
F=Feature Request, I=Issue
Placeholder Loading
This is our first implementation and usage of Skeleton Screens, which are defined in the UDINA UX/UI Design Guidelines.
Concerning this, SAP Fiori Elements implemented the Placeholder Loading general pattern.
INFO
Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.
A skeleton page shows the frame of the final content without the content being fully loaded. Visually, skeleton pages are grey boxes with animations to indicate loading activity.
Skeleton pages are used to create an impression of speed and reliability when an app encounters performance barriers. They provide a generic preview of the layout, which makes the app seem to load faster. This improves the overall user experience.
The following animation shows the skeleton for the object page floorplan to feel the impression of speed:
SAP Fiori Elements Source Code
The SAP FE developer team did a nice implementation of the underlying UI5 layouts while using plain css styles. The placeholder views consists of div containers with class names, that reflect the relevant ux controls.
To be able to create custom placeholder html views, the used view templates will be a good starting point, how the styles should be used.
bash
# SAPUI5 SDK Fiori Elements Placeholder Resources
# Views
./resources/sap/fe/placeholder/view/PlaceholderALP.fragment.html
./resources/sap/fe/placeholder/view/PlaceholderLR.fragment.html
./resources/sap/fe/placeholder/view/PlaceholderOP.fragment.html
./resources/sap/fe/placeholder/view/PlaceholderOVP.fragment.html
# Styles
./resources/sap/fe/placeholder/themes/base/library.lesshtml
<div class="sapFePlaceholderContainer">
<!-- P A G E H E A D E R -->
<div class="sapFeHeader sapFeResponsivePadding sapFePageHeader">
<div class="sapFeHeaderTitle">
<div class="sapFeHeaderTitleTextContainer">
<div class="sapFeHeaderTitleText sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
</div>
<div class="sapFeHeaderTitleActions sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeHeaderTitleAction"></div>
</div>
</div>
<div class="sapFeHeaderContent">
<div class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeHeaderTitleAction">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeHeaderTitleAction sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeHeaderTitleAction sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeHeaderTitleAction sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
</div>
</div>
</div>
<!-- P A G E C O N T E N T -->
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeContent sapFeResponsivePadding">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTable">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthXL sapFeTableTitle"></div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
</div>
</div>
</div>html
<div class="sapFePlaceholderContainer">
<!-- P A G E H E A D E R -->
<div class="sapFeHeader sapFeResponsivePadding sapFeObjectPageHeader">
<div class="sapFeHeaderTitle">
<div class="sapFeHeaderTitleTextContainer">
<div class="sapFeHeaderTitleText sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
</div>
<div class="sapFeHeaderTitleActions sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeHeaderTitleAction"></div>
</div>
</div>
<div class="sapFeHeaderContent">
<div class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeAvatar sapFeAvatarSizeM sapFeAvatarShapeSquare"></div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeHeaderTitleAction">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeHeaderTitleAction sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeHeaderTitleAction sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
</div>
</div>
<div class="sapFeAnchorBar sapFeHorizontalContent sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthM sapFeAnchorBarItem"></div>
<div class="sapFeText sapFeTextWeightL sapFeTextWidthM sapFeAnchorBarItem"></div>
<div class="sapFeText sapFeTextWeightL sapFeTextWidthM sapFeAnchorBarItem"></div>
</div>
</div>
<!-- P A G E C O N T E N T -->
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeContent sapFeResponsivePadding">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeObjectPageSection">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthXL sapFeObjectPageSectionTitle"></div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeCols4">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFePaddingTop">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeVerticalRepeaterItem"></div>
</div>
</div>
</div>
</div>
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTable">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthXL sapFeTableTitle"></div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeL">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
</div>
</div>
</div>
</div>html
<div class="sapFePlaceholderContainer">
<!-- P A G E H E A D E R -->
<div class="sapFeHeader sapFeResponsivePadding sapFeOVPHeader">
<div class="sapFeHeaderTitle sapFeHeaderTitleWithSubtitle">
<div class="sapFeHeaderTitleTextContainer">
<div class="sapFeHeaderTitleText sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
<div class="sapFeHeaderSubTitleText sapFeText sapFeTextWeightS sapFeTextWidthS"></div>
</div>
</div>
</div>
<!-- P A G E C O N T E N T -->
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeContent sapFeResponsivePadding">
<div class="sapFeOVPCardContainer">
<div class="sapFeOVPCard sapFeOVPCardVersion1 OVPContentCard1">
<div class="sapFeOVPCardHeader">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardHeaderText"></div>
</div>
<div class="sapFeOVPCardContent">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardContentContainer">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
<div class="sapFeOVPCard sapFeOVPCardVersion3 OVPContentCard3">
<div class="sapFeOVPCardHeader">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeText sapFeTextWeightM sapFeTextWidth80PX sapFeOVPCardHeaderText"></div>
<div class="sapFeText sapFeTextWeightM sapFeTextWidth100PX sapFeOVPCardHeaderText"></div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div
class="sapFeAvatar sapFeAvatarSizeM sapFeAvatarShapeSquare sapFeOVPCardHeaderAvatar sapFeTextWidth120PX">
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignEnd sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardHeaderText">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50PX sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth30PX sapFeVerticalRepeaterItem">
</div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignEnd sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardHeaderText">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50PX sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth30PX sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
<div class="sapFeText sapFeTextWeightM sapFeTextWidth80PX sapFeOVPCardHeaderText"></div>
</div>
</div>
<div class="sapFeOVPCardContent">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeBarChart">
<div class="sapFeTextAlignInherit">
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeHorizontalRepeater sapFeOVPCardContentChart sapFeChartHorMeasure sapFeChartVertMeasure sapFeVerticalBarChart">
<div
class="sapFeTextHeight90PX sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeTextHeight90PX sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeTextHeight90PX sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sapFeOVPCard sapFeOVPCardVersion1 OVPContentCard4">
<div class="sapFeOVPCardHeader">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardHeaderText"></div>
</div>
<div class="sapFeOVPCardContent">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardContentContainer">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
<div class="sapFeOVPCard sapFeOVPCardVersion2 OVPContentCard2 sapFeSmallestVisibleSizeM">
<div class="sapFeOVPCardHeader">
<div class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeAvatar sapFeAvatarSizeM sapFeAvatarShapeSquare sapFeOVPCardHeaderAvatar"></div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardHeaderText">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthL sapFeVerticalRepeaterItem"></div>
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeVerticalRepeaterItem"></div>
</div>
</div>
</div>
</div>
<div class="sapFeOVPCardContent">
<div class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardContentContainer">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardContentContainer">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50perct sapFeOVPCardContentText sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sapFeOVPCard sapFeOVPCardVersion4 OVPContentCard5 sapFeSmallestVisibleSizeM">
<div class="sapFeOVPCardHeader">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeText sapFeTextWeightM sapFeTextWidth80PX sapFeOVPCardHeaderText"></div>
<div class="sapFeText sapFeTextWeightM sapFeTextWidth100PX sapFeOVPCardHeaderText"></div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div
class="sapFeAvatar sapFeAvatarSizeM sapFeAvatarShapeSquare sapFeOVPCardHeaderAvatar sapFeTextWidth120PX">
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignEnd sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardHeaderText">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50PX sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth30PX sapFeVerticalRepeaterItem">
</div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignEnd sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardHeaderText">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50PX sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth30PX sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
<div class="sapFeText sapFeTextWeightM sapFeTextWidth80PX sapFeOVPCardHeaderText"></div>
</div>
</div>
<div class="sapFeOVPCardContent">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeBarChart">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardContentChart sapFeChartHorMeasure sapFeChartVertMeasure sapFeHorizontalBarChart">
<div
class="sapFeText sapFeTextWeightL sapFeTextWidth160PX sapFeVerticalRepeaterItem">
</div>
<div class="sapFeText sapFeTextWeightL sapFeTextWidthM sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightL sapFeTextWidth90PX sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightL sapFeTextWidth90PX sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sapFeOVPCard sapFeOVPCardVersion3 OVPContentCard6 sapFeSmallestVisibleSizeM">
<div class="sapFeOVPCardHeader">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeText sapFeTextWeightM sapFeTextWidth80PX sapFeOVPCardHeaderText"></div>
<div class="sapFeText sapFeTextWeightM sapFeTextWidth100PX sapFeOVPCardHeaderText"></div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div
class="sapFeAvatar sapFeAvatarSizeM sapFeAvatarShapeSquare sapFeOVPCardHeaderAvatar sapFeTextWidth120PX">
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignEnd sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardHeaderText">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50PX sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth30PX sapFeVerticalRepeaterItem">
</div>
</div>
</div>
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignEnd sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardHeaderText">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth50PX sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidth30PX sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
<div class="sapFeText sapFeTextWeightM sapFeTextWidth80PX sapFeOVPCardHeaderText"></div>
</div>
</div>
<div class="sapFeOVPCardContent">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeBarChart">
<div class="sapFeTextAlignInherit">
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeHorizontalRepeater sapFeOVPCardContentChart sapFeChartHorMeasure sapFeChartVertMeasure sapFeVerticalBarChart">
<div
class="sapFeTextHeight90PX sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeTextHeight90PX sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHori zontalRepeaterItem">
</div>
<div
class="sapFeTextHeight90PX sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalR epeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeightL sapFeVerticalBarHeightM sapFeHorizontalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sapFeOVPCard sapFeOVPCardVersion1 OVPContentCard7 sapFeSmallestVisibleSizeM">
<div class="sapFeOVPCardHeader">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardHeaderText"></div>
</div>
<div class="sapFeOVPCardContent">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeOVPCardContentContainer">
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
<div
class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeOVPCardContentText sapFeOVPCardContentContainer sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>html
<div class="sapFePlaceholderContainer">
<!-- P A G E H E A D E R -->
<div class="sapFeHeader sapFeResponsivePadding sapFeALPHeader">
<div class="sapFeHeaderTitle sapFeHeaderTitleWithSubtitle">
<div class="sapFeHeaderTitleTextContainer">
<div class="sapFeHeaderTitleText sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
<div class="sapFeHeaderSubTitleText sapFeText sapFeTextWeightS sapFeTextWidthS"></div>
</div>
<div class="sapFeHeaderTitleActions sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeHeaderTitleAction"></div>
</div>
</div>
<div class="sapFeHeaderContent">
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeDonutChart sapFeALPHeaderDonut">
<div class="sapFeDonutChartCutOut"></div>
<div class="sapFeDonutChartInnerCircle"></div>
</div>
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeBarChart">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeALPHeaderChart sapFeVAlignInline sapFeSmallestVisibleSizeM sapFeChartHorMeasure sapFeChartVertMeasure sapFeHorizontalBarChart">
<div class="sapFeText sapFeTextWeightL sapFeTextWidth160 sapFeVerticalRepeaterItem">
</div>
<div class="sapFeText sapFeTextWeightL sapFeTextWidthM sapFeVerticalRepeaterItem">
</div>
<div class="sapFeText sapFeTextWeightL sapFeTextWidth140 sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeBarChart">
<div class="sapFeVerticalAlignInherit">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeALPHeaderChart sapFeVAlignInline sapFeSmallestVisibleSizeM sapFeChartHorMeasure sapFeChartVertMeasure sapFeHorizontalBarChart">
<div class="sapFeText sapFeTextWeightS sapFeTextWidth160 sapFeVerticalRepeaterItem">
</div>
<div class="sapFeText sapFeTextWeightS sapFeTextWidth140 sapFeVerticalRepeaterItem">
</div>
<div class="sapFeText sapFeTextHeight20 sapFeTextWidth0 sapFeVerticalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- P A G E C O N T E N T -->
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeContent sapFeResponsivePadding">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeALPHeaderText"></div>
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
<div class="sapFeBarChart">
<div class="sapFeTextAlignInherit">
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeHorizontalRepeater sapFeALPHeaderChart sapFeChartHorMeasure sapFeChartVertMeasure sapFeVerticalBarChart">
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight100 sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight30 sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight60 sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight40 sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight30 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight20 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight100 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight80 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight80 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight60 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight70 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
</div>
<div
class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight60 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
</div>
</div>
</div>
</div>
</div>
<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTable">
<div class="sapFeText sapFeTextWeightL sapFeTextWidthXL sapFeTableTitle"></div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
</div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
<div
class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
<div
class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
</div>
</div>
</div>
</div>
</div>less
/* START "Placeholder.less" */
.sapFePlaceholderContainer {
background-color: @sapUiBaseColor;
position: absolute;
width: 100%;
height: 100%;
}
.sapFeResponsivePadding {
width: calc(~"100% - 6rem");
padding-left: 3rem;
padding-right: 3rem;
}
.sapFeCols4 > * {
width: calc(~"25% - 2rem");
}
.sapFePaddingTop {
padding-top: 1rem;
}
.sapFeTextAlignStart {
text-align: start;
}
.sapFeTextAlignCenter {
text-align: center;
}
.sapFeTextAlignEnd {
text-align: end;
}
.sapFeTextAlignInherit {
text-align: inherit;
}
.sapFeVerticalAlignTop {
vertical-align: top;
}
.sapFeVerticalAlignInherit {
vertical-align: inherit;
}
.sapFeVerticalAlignMiddle {
vertical-align: middle;
}
.sapFeVerticalAlignBottom {
vertical-align: bottom;
}
.sapFeVerticalRepeater {
display: flex;
flex-direction: column;
align-items: flex-start !important;
align-content: flex-start;
width: fit-content;
}
.sapFeVerticalRepeater.sapFeTextAlignCenter {
align-items: center;
}
.sapFeVerticalRepeater.sapFeTextAlignEnd {
align-items: flex-end;
}
.sapFeVerticalRepeater.sapFeVerticalAlignMiddle {
align-content: center;
}
.sapFeVerticalRepeater.sapFeVerticalAlignBottom {
align-content: flex-end;
}
.sapFeHorizontalContent > * {
display: inline-block;
}
.sapFeHorizontalContent > .sapFeVerticalRepeater,
.sapFeHorizontalContent > .sapFeHorizontalRepeater {
display: flex;
}
.sapFeHorizontalContent > *:not(:last-child) {
margin-left: 0;
}
.sapFeHorizontalContent > *:not(:last-child) {
margin-right: 2rem;
}
.sapFeHorizontalContent.sapFeTextAlignEnd > *:not(:last-child) {
margin-right: 0;
}
.sapFeHorizontalContent.sapFeTextAlignEnd > *:not(:first-child) {
margin-left: 2rem;
}
.sapFeVerticalContent > * {
display: block;
}
.sapFeVerticalContent > *:not(:last-child) {
margin-bottom: 1rem;
}
.sapFeVerticalContent.sapFeVerticalAlignBottom > *:not(:first-child) {
margin-top: 1rem;
}
.sapFeText {
border-radius: 0.25rem;
}
.sapFeTextWeightS {
height: 0.5rem;
}
.sapFeTextWeightM {
height: 0.75rem;
}
.sapFeTextWeightL {
height: 0.875rem;
}
.sapFeTextWidthS {
width: 75px;
}
.sapFeTextWidthM {
width: 120px;
}
.sapFeTextWidthL {
width: 225px;
}
.sapFeTextWidthXL {
width: 275px;
}
.sapFeTextWidth30PX {
width: 30px;
}
.sapFeTextWidth50perct {
width: 50%;
}
.sapFeTextWidth50PX {
width: 50px;
}
.sapFeTextWidth80PX {
width: 80px;
}
.sapFeTextWidth90PX {
width: 90px;
}
.sapFeTextWidth100PX {
width: 100px;
}
.sapFeTextWidth120PX {
width: 120px !important;
}
.sapFeTextWidth160PX {
width: 160px;
}
.sapFeTextHeight20 {
height: 20px;
}
.sapFeTextHeight90PX {
height: 90px !important;
}
.sapFeTextWidth0 {
width: 0px;
}
.sapFeTextWidth140 {
width: 140px;
}
.sapFeTextWidth160 {
width: 160px;
}
.sapFeAction {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
.sapFeAvatarSizeS {
width: 2rem;
height: 2rem;
}
.sapFeAvatarSizeM {
width: 5rem;
height: 5rem;
}
.sapFeOVPCardHeaderAvatar {
width: 40px;
height: 40px;
background-size: 900px 900px;
}
.sapFeAvatarShapeCircle {
border-radius: 50%;
}
.sapFeBarChart {
display: inline-block;
}
.sapFeVerticalBarChart,
.sapFeHorizontalBarChart {
padding-right: 1rem;
white-space: nowrap;
}
.sapFeBarChartWithMeasure .sapFeVerticalBarChart,
.sapFeBarChartWithMeasure .sapFeHorizontalBarChart {
padding-right: 3rem;
}
.sapFeBarChart .sapFeHorizontalRepeaterItem,
.sapFeHorizontalBarChart .sapFeVerticalRepeaterItem {
border-radius: 0.25rem;
}
.sapFeHorizontalContent > .sapFeVerticalBar {
margin: 0 0.55rem;
}
.sapFeVerticalBarWeightS {
width: 0.5rem;
}
.sapFeVerticalBarWeightM {
width: 0.75rem;
}
.sapFeVerticalBarWeight15 {
width: 1.5rem;
}
.sapFeVerticalBarWeightL {
width: 0.875rem;
}
.sapFeVerticalBarHeightS {
height: 75px;
}
.sapFeVerticalBarHeight0 {
height: 0px;
}
.sapFeVerticalBarHeight20 {
height: 20px;
}
.sapFeVerticalBarHeight30 {
height: 30px;
}
.sapFeVerticalBarHeight40 {
height: 40px;
}
.sapFeVerticalBarHeight60 {
height: 60px;
}
.sapFeVerticalBarHeight70 {
height: 60px;
}
.sapFeVerticalBarHeight80 {
height: 80px;
}
.sapFeVerticalBarHeight100 {
height: 100px;
}
.sapFeVerticalBarHeightM {
height: 120px;
}
.sapFeVerticalBarHeightL {
height: 225px;
}
.sapFeVerticalBarHeightXL {
height: 275px;
}
.sapFeBarChartLegendContainer {
padding-bottom: 2rem;
}
.sapFeBarChartLegendItem:not(:last-child) {
margin-bottom: 0.25rem;
}
.sapFeChartSum {
line-height: 0.125rem;
}
.sapFeChartHorMeasure,
sapFeChartVertMeasure {
position: relative;
}
.sapFeChartVertMeasure:before {
content: "";
position: absolute;
top: 0;
bottom: 2px;
left: 0;
width: 2px;
}
.sapFeChartHorMeasure:after {
content: "";
position: absolute;
bottom: 2px;
right: 0.5rem;
left: 0;
height: 2px;
}
.sapFeBarChartWithMeasure .sapFeChartHorMeasure:after {
right: 2.5rem;
}
.sapFeVerticalBarChart.sapFeChartVertMeasure {
margin-top: 0.5rem;
}
.sapFeBarChartWithMeasure .sapFeVerticalBarChart.sapFeChartVertMeasure {
margin-right: 1rem;
}
.sapFeVerticalBarChart.sapFeVAlignInline.sapFeChartHorMeasure {
margin-top: 0;
}
.sapFeVerticalBarChart.sapFeChartVertMeasure:before {
top: -0.5rem;
}
.sapFeHorizontalBarChart.sapFeChartHorMeasure {
padding-bottom: 0.5rem;
margin-top: 0.5rem;
}
.sapFeHorizontalBarChart.sapFeVAlignInline.sapFeChartHorMeasure {
margin-top: 0;
}
.sapFeHorizontalBarChart.sapFeChartVertMeasure {
padding-left: 0.5rem;
margin-right: 1rem;
}
.sapFeHorizontalBarChart.sapFeChartVertMeasure:before {
top: -0.5rem;
}
.sapFeHorizontalBarChart.sapFeChartHorMeasure:after {
right: 0;
}
.sapFeBarChartWithMeasure .sapFeHorizontalBarChart.sapFeChartHorMeasure:after {
right: 2rem;
}
.sapFeChartSum .sapFeHorizontalRepeaterItem {
height: 5px !important;
}
.sapFeDonutChart {
width: 4rem;
height: 4rem;
border-radius: 50%;
position: relative;
}
.sapFeDonutChartInnerCircle {
width: 2rem;
height: 2rem;
margin: 1rem;
border-radius: 50%;
background: @sapUiBaseColor;
position: absolute;
top: 0;
left: 0;
}
.sapFeDonutChartCutOut {
width: 2rem;
height: 2rem;
border-radius: 50% 0 0 0;
background: @sapUiBaseColor;
position: absolute;
top: 0;
left: 0;
}
.sapFeOVPCardContainer {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.sapFeOVPCard {
width: calc(~"20rem - 2rem");
margin: 0 2rem 2rem 0;
border: 1px solid @sapUiContentPlaceholderloadingBackground;
}
.sapFeOVPCardVersion2 {
width: calc(~"20rem - 2rem + 20rem");
}
.sapFeOVPCardHeader {
padding: 1rem;
border-bottom: 1px solid @sapUiContentPlaceholderloadingBackground;
}
.sapFeOVPCardHeader .sapFeHorizontalContent > *:not(:last-child) {
margin-right: 1rem;
}
.sapFeOVPCardContent {
padding: 1rem;
}
.sapFeOVPCardContentContainer {
width: 100%;
}
.sapFeOVPCardVersion2 .sapFeOVPCardContent > .sapFeHorizontalLayout > * {
width: calc(~"50% - 1rem");
}
.sapFeHeader {
padding-top: 1rem;
padding-bottom: 2rem;
background: @sapUiBaseColor;
}
.sapFeHeaderTitle {
height: 3rem;
line-height: 2.825rem;
display: flex;
justify-content: space-between;
}
.sapFeHeaderTitle > * > * {
display: inline-block;
vertical-align: middle;
}
.sapFeHeaderTitleWithSubtitle {
height: 4.25rem;
}
.sapFeHeaderSubTitleText {
display: block;
}
.sapFeHeaderContent {
padding-top: 2rem;
padding-bottom: 2rem;
}
.sapFeAnchorBar {
padding-top: 1rem;
padding-bottom: 1px;
}
.sapFeContent {
background: @sapUiBaseColor;
}
.sapFeObjectPageSection {
padding-top: 1rem;
position: relative;
}
.sapFeVerticalContent > *:not(:last-child).sapFeObjectPageSectionTitle {
margin-bottom: 3rem;
}
.sapFeObjectPageSectionTitle:after {
content: ".";
color: transparent;
position: absolute;
top: 3rem;
left: -1rem;
right: -1rem;
height: 2px;
background: @sapUiListHeaderBackground;
}
.sapFeTable {
padding: 2rem 0;
}
.sapFeTableTitle {
background: @sapUiContentPlaceholderloadingBackground;
opacity: 0.66;
}
.sapFeTableColmnHeaderRow {
background: @sapUiListHeaderBackground;
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.sapFeTableCell {
height: 2rem;
line-height: 2rem;
width: calc(~"100% / 8");
}
.sapFeTableColmnHeaderCell {
height: 2.5rem;
line-height: 2.5rem;
width: calc(~"100% / 8");
}
.sapFeTableText {
display: inline-block;
}
.sapFeHorizontalContent > *:not(:last-child).sapFeTableColmnHeaderCell,
.sapFeHorizontalContent > *:not(:last-child).sapFeTableCell {
margin: 0;
}
.sapFeText,
.sapFeAction,
.sapFeVerticalBar,
.sapFeChartVertMeasure:before,
.sapFeChartHorMeasure:after,
.sapFeAvatar,
.sapFeDonutChart {
background: @sapUiContentPlaceholderloadingBackground;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
background-image: @sapUiContentPlaceholderloadingGradient;
background-repeat: no-repeat;
background-size: 900px 104px;
}
.sapFeChartVertMeasure:before {
background-size: 104px 900px;
}
.sapFeVerticalBar {
background-size: 104px 900px;
}
@keyframes placeHolderShimmer {
0% {
background-position-x: 100%;
}
100% {
background-position-x: 0%;
}
}
@media (min-width: 2560px) and (max-width: 3839px) {
.sapFeSmallestVisibleSizeXXL {
display: none;
}
.sapFeCols4 > * {
width: calc(~"(100% / 3) - 2rem");
}
.sapFeTableColmnHeaderCell,
.sapFeTableCell {
width: calc(~"100% / 6");
}
}
.sapUiContainer-Wide .sapFeSmallestVisibleSizeXXL,
.sapUiContainer-Wide .sapFeSmallestVisibleSizeXL {
display: none;
}
.sapUiContainer-Wide .sapFeCols4 > * {
width: calc(~"(100% / 2) - 2rem");
}
.sapUiContainer-Wide .sapFeTableColmnHeaderCell,
.sapUiContainer-Wide .sapFeTableCell {
width: calc(~"100% / 4");
}
@media (min-width: 1024px) and (max-width: 2559px) {
.sapFeSmallestVisibleSizeXXL,
.sapFeSmallestVisibleSizeXL {
display: none;
}
.sapFeCols4 > * {
width: calc(~"(100% / 2) - 2rem");
}
.sapFeTableColmnHeaderCell,
.sapFeTableCell {
width: calc(~"100% / 4");
}
}
.sapUiContainer-Medium .sapFeSmallestVisibleSizeXXL,
.sapUiContainer-Medium .sapFeSmallestVisibleSizeXL,
.sapUiContainer-Medium .sapFeSmallestVisibleSizeL {
display: none;
}
.sapUiContainer-Medium .sapFeResponsivePadding {
width: calc(~"100% - 4rem~");
padding-left: 2rem;
padding-right: 2rem;
}
.sapUiContainer-Medium .sapFeCols4 > * {
width: calc(~"(100% / 2) - 2rem");
}
.sapUiContainer-Medium .sapFeTableColmnHeaderCell,
.sapUiContainer-Medium .sapFeTableCell {
width: calc(~"100% / 3");
}
@media (min-width: 600px) and (max-width: 1023px) {
.sapFeSmallestVisibleSizeXXL,
.sapFeSmallestVisibleSizeXL,
.sapFeSmallestVisibleSizeL {
display: none;
}
.sapFeResponsivePadding {
width: calc(~"100% - 4rem");
padding-left: 2rem;
padding-right: 2rem;
}
.sapFeCols4 > * {
width: calc(~"(100% / 2) - 2rem");
}
.sapFeTableColmnHeaderCell,
.sapFeTableCell {
width: calc(~"100% / 3");
}
}
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeXXL,
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeXL,
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeL,
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeM {
display: none;
}
.sapUiContainer-Narrow .sapFeResponsivePadding {
width: calc(~"100% - 2rem");
padding-left: 1rem;
padding-right: 1rem;
}
.sapUiContainer-Narrow .sapFeCols4 > * {
width: calc(~"100% - 1rem");
}
.sapUiContainer-Narrow .sapFeTableColmnHeaderCell,
.sapUiContainer-Narrow .sapFeTableCell {
width: 100%;
}
@media (max-width: 599px) {
.sapFeSmallestVisibleSizeXXL,
.sapFeSmallestVisibleSizeXL,
.sapFeSmallestVisibleSizeL,
.sapFeSmallestVisibleSizeM {
display: none;
}
.sapFeResponsivePadding {
width: calc(~"100% - 2rem");
padding-left: 1rem;
padding-right: 1rem;
}
.sapFeCols4 > * {
width: calc(~"100% - 1rem");
}
.sapFeTableColmnHeaderCell,
.sapFeTableCell {
width: 100%;
}
}sap.fe.placeholder library
The whole functionality is bundled in the sap.fe.placeholder library. If you are using the Building Blocks and the sap.fe.macrosdependency inside your project, the placeholder library will be automatically loaded as a dependency.
What we got
Now we have a nice toolset to create placeholder view that mimic the underlying UI5 layout, just using vanilla html and css. The used styles also define @media queries, so the layout will even be responsive and the background animation just used plain css animations.
The result is a As-Fast-As-Possible UX representation, that can be used as a loading indicator.
Using custom placeholder views
To be able to use the placeholder concept inside a Freestyle UI5 Application, parts of the Fiori development found their way into the UI5 core. You can watch the UI5ers live: Episode 10 (Aug '21) episode concerning the Placeholder Concept.
Use Case: Product Detail Page
The detail page of the product catalog is using a RAP service, that collects relevant data from multiple systems and has an average runtime of ~300ms. To avoid an unbound empty view with busy loading indicator while loading data (ugly), the Placeholder Loading Concept should be used instead to have a better UX while waiting for data.
Define placeholder views inside manifest.json
You can define the placeholder views on the targets section (or also on the route/target section), by adding a Placeholder Config with the following properties:
| Property | Value | Description |
|---|---|---|
| html | HTMLView | For performance reason, the path to a plain HTML view. |
| autoClose | true | The placeholder will be hidden automatically, after a short delay. |
| autoClose | false | The placeholder needs to be hidden manually by calling hidePlaceholder() on targetControl. The binding event dataReceived will be a good candidate to hide placeholder after relevant ui data has been loaded. |
json
{
"sap.ui5": {
"routing": {
"targets": {
"catalogDetail": {
"viewId": "catalogDetail",
"viewName": "catalog.Detail",
"title": "{{xtit.TargetCatalogDetail}}",
"level": 2,
"placeholder": {
"html": "namespace/view/catalog/Detail.view.html",
"autoClose": false
}
}
}
}
}
}Control placeholder closing inside View.controller.js
To be able to control the point-in-time, when the placeholder should be closed, you have add some custom codding to the relevant controller.
js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (UIController) {
"use strict";
return UIController.extend("namespace.controller.catalog.Detail", {
_oContainer: undefined,
onInit: function () {
var oComponent = this.getOwnerComponent(),
oRouter = oComponent.getRouter(),
oSelfRoute = oRouter.getRoute("catalogView");
// handle entering current route
oSelfRoute.attachMatched(this._onSelfRouteMatched, this);
// handle leaving current route
oSelfRoute.attachEvent("switched", function () {
this._unbindView();
}, this);
},
_onSelfRouteMatched: function (oEvent) {
this._oContainer = oEvent.getParameter("targetControl");
var oParameters = oEvent.getParameter("arguments"),
sPath = undefined;
// ... compute sPath depending on oParameters
this._bindView(sPath);
},
_bindView: function (sPath) {
var fnDataReceived = function() {
// now hide the placeholder view
this._hidePlaceholder();
};
this.getView().bindElement({
path: sPath,
events: { dataReceived: fnDataReceived }
});
},
_unbindView: function () {
// unbind old data to avoid issues on model refresh
this.getView().unbindElement();
// if leaving, make sure to finally hide placeholder overlay
this._hidePlaceholder();
},
_hidePlaceholder: function() {
if (this._oContainer) {
this._oContainer.hidePlaceholder();
}
}
});
});Experimental APIs
Even if the shown technics are used inside SAP Fiori Element and also migrated to the UI5 Core, they are still experimental from SAP point of view. It is not documented in the SDK and most of the topics have been figured out by reverse engineering.
Currently, you may not get support by SAP in case of issues.
What i guess
Since SAP FE is actively using the placeholder lib, i think the API is in a (nearly) final state.
I will update this blog, if there is a change or commit from SAP concerning this topic.
Extending for NonDraft
ObjectPageController
Fiori Elements does not support CRUD operations for Non-Draft OData v4 models.
For this reason, you have to implement your own EditFlowND (ND = Non-Draft).