Appearance
Flexible Programming Model
SAP Fiori elements for OData V4 offers multiple ways to extend applications according to your specific requirements. The flexible programming model provides a range of options for this, eliminating the need for a rigid choice between SAP Fiori elements and freestyle SAPUI5 development.

While you have the freedom to use any SAPUI5 coding or controls in extension points, you can also make use of our building blocks and controller extensions to enhance your application. You can even create a custom app that runs on the SAP Fiori elements framework, where all pages are treated like custom pages.
Flexible Programming Model Explorer
The Flexible Programming Model Explorer showcases the various ways you can extend Fiori elements applications and custom apps according to your specific needs. It covers the publicly available scope of the flexible programming model and offers live samples that you can experiment with in a sandbox setup.
Features
Feature | Description |
---|---|
Floorplans | The following Floorplans are supported: List Report Object Page, Worklist, Analytical List Page, Overview Page, Form entry object page |
Building Blocks | Building blocks are reusable artifacts that are consistently orchestrated by the framework, so you automatically benefit from SAP Fiori compliance and standard application behavior like draft handling and side effects. |
Extension Points | Predefined container that allows developers to add custom UI controls or extend existing functionality using standard SAPUI5 programming. |
Controller Extensions | Powerful mechanism that allows developers to extend the functionality of generated apps by adding custom JavaScript code. These extensions provide predefined "hooks" or methods that can be overridden to introduce custom logic, tailoring the user interface and behavior of the application to specific requirements. |
Building Blocks
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. |
Fiori Elements Evolution
Flexible Programming Model is only supported with Fiori Elements v4!
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.
From V2 Constraints to V4 Flexibility:
Category | FE V2 | FE V4 | Weaknesses V2 |
---|---|---|---|
Technology | Classic SAPUI5 architecture | Modern SAPUI5 with enhanced flexibility | Outdated architectural approach |
Extensibility | Limited, mainly via extension controllers | Flexible via Custom Sections and Building Blocks | High effort for custom extensions |
UI Customization | Limited customization via stable IDs and controller logic | Rich customization with Flexible Programming Model (FPM) | Minimal customization without code |
OData Support | Primarily OData V2 | Native OData V4 support, backward compatible with V2 | Less capable in handling complex data scenarios |
Annotations Handling | Static, less flexible interpretation | Dynamic, modular and more powerful interpretation | Hard to scale or reuse across apps |
Testing & Debugging | Limited tools, harder to isolate issues | Improved diagnostics, preview apps, better tooling | Debugging requires deeper technical knowledge |
Reusability | Reuse possible but limited | Promotes reuse via FPM and Component-based design | Code reuse requires manual effort |
Performance | Sufficient but not optimized | Better performance via lightweight rendering and V4 OData | Slower in complex UI scenarios |
Adaptation Projects | Requires developer knowledge | Better support via SAP Business Application Studio | Business users can't easily adapt apps |
UI State Binding & Metadata Changes | Uses ui>editable and custom logic for edit states | Introduces ui>isEditable and consistent FPM binding model | V2 requires custom logic and manual binding; not compatible with new FPM state model |
Transactional Support (Draft / Non-Draft) | Supports both Draft and Non-Draft models | Only supports Draft-enabled services | V2 is the only out-of-the-box option for Non-Draft CRUD (even CAP v4 needs v2 Adapter) |
Evolution/Future-Proof | Legacy; no major future enhancements planned | Actively developed and future-proof | Not aligned with SAP’s UX strategy going forward |
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 | - |
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.less
html
<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.macros
dependency 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).