Skip to content

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.

Flexible Programming Model

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

FeatureDescription
FloorplansThe following Floorplans are supported:
List Report Object Page, Worklist, Analytical List Page, Overview Page, Form entry object page
Building BlocksBuilding 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 PointsPredefined container that allows developers to add custom UI controls or extend existing functionality using standard SAPUI5 programming.
Controller ExtensionsPowerful 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

BenefitDescription
Annotation Driven DesignYou can control many data relevant aspects on service layer.
Field ControlEasily use Field Control annotations that will be taken into account.
Mix & MatchJust use the the things you need and chosse the level of granularity by yourself.
Side EffectsSide effects are evaluated automatically by the building blocks.
Value HelpsUsing 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:

CategoryFE V2FE V4Weaknesses V2
TechnologyClassic SAPUI5 architectureModern SAPUI5 with enhanced flexibilityOutdated architectural approach
ExtensibilityLimited, mainly via extension controllersFlexible via Custom Sections and Building BlocksHigh effort for custom extensions
UI CustomizationLimited customization via stable IDs and controller logicRich customization with Flexible Programming Model (FPM)Minimal customization without code
OData SupportPrimarily OData V2Native OData V4 support, backward compatible with V2Less capable in handling complex data scenarios
Annotations HandlingStatic, less flexible interpretationDynamic, modular and more powerful interpretationHard to scale or reuse across apps
Testing & DebuggingLimited tools, harder to isolate issuesImproved diagnostics, preview apps, better toolingDebugging requires deeper technical knowledge
ReusabilityReuse possible but limitedPromotes reuse via FPM and Component-based designCode reuse requires manual effort
PerformanceSufficient but not optimizedBetter performance via lightweight rendering and V4 ODataSlower in complex UI scenarios
Adaptation ProjectsRequires developer knowledgeBetter support via SAP Business Application StudioBusiness users can't easily adapt apps
UI State Binding & Metadata ChangesUses ui>editable and custom logic for edit statesIntroduces ui>isEditable and consistent FPM binding modelV2 requires custom logic and manual binding; not compatible with new FPM state model
Transactional Support
(Draft / Non-Draft)
Supports both Draft and Non-Draft modelsOnly supports Draft-enabled servicesV2 is the only out-of-the-box option for Non-Draft CRUD (even CAP v4 needs v2 Adapter)
Evolution/Future-ProofLegacy; no major future enhancements plannedActively developed and future-proofNot aligned with SAP’s UX strategy going forward

Cheat Sheet

Core Functionality
AppComponentMain class for components
(extends UIComponent)
RootViewNavContainer or Fcl
(in FCL use case)
BaseControllerInternal base controller
PageControllerBase controller for Freestyle Page
(extends BaseController)
ExtensionAPIFor all pages
API to Controller Extensions
UI Models
uiProperties:
editMode, isEditable, draftStatus, busy, pages
OneWay
internalInternally used
TwoWay
viewUDINA namespace for custom freestyle page UX bindings
TwoWay
Templates (Floorplans)
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
WizardUDINA SAP Fiori Wizard Floorplan implementation
Illustrated Message PageUDINA Floorplan to visually confirm a former action
Freestyle PageUDINA Freestyle Floorplan for everything else
Controller Extensions
EditFlowEdit flow of the application
IntentBasedNavigationIntent-based navigation
MessageHandlerMessage Handling
PaginatorNavigation using paginators
RoutingRouting flow of the application
ShareShare functionality
ViewStateState Handling
Building Blocks (Part I)
TablePresentationVariantType, SelectionPresentation­VariantType, LineItem
FilterBarSelectionFields, Capabilities.SearchRestrictions
FilterFieldCommon.ResultContext
FormFacets, CollectionFacet, ReferenceFacet, FieldGroup
FormElementCommon.Label
FieldDataField, DataPointType, DataFieldWithNavigationPath, DataFieldWithUrl, DataFieldWith­IntentBasedNavigation, DataFieldWithAction
Building Blocks (Part II)
ChartPresentationVariantType, Chart
MicroChartChart, 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.

SAP Fiori Design Guidelines

The following animation shows the skeleton for the object page floorplan to feel the impression of speed:

Placeholder Loading animation of the Object Page

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.macrosdependency inside your project, the placeholder library will be automatically loaded as a dependency.

What we got

Now we have a nice toolset to create placeholder view that mimic the underlying UI5 layout, just using vanilla html and css. The used styles also define @media queries, so the layout will even be responsive and the background animation just used plain css animations.

The result is a As-Fast-As-Possible UX representation, that can be used as a loading indicator.

Using custom placeholder views

To be able to use the placeholder concept inside a Freestyle UI5 Application, parts of the Fiori development found their way into the UI5 core. You can watch the UI5ers live: Episode 10 (Aug '21) episode concerning the Placeholder Concept.

Use Case: Product Detail Page

The detail page of the product catalog is using a RAP service, that collects relevant data from multiple systems and has an average runtime of ~300ms. To avoid an unbound empty view with busy loading indicator while loading data (ugly), the Placeholder Loading Concept should be used instead to have a better UX while waiting for data.

Define placeholder views inside manifest.json

You can define the placeholder views on the targets section (or also on the route/target section), by adding a Placeholder Config with the following properties:

PropertyValueDescription
htmlHTMLViewFor performance reason, the path to a plain HTML view.
autoClosetrueThe placeholder will be hidden automatically, after a short delay.
autoClosefalseThe 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).

uml diagram