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

Feature	Description
Floorplans	The following Floorplans are supported: List Report Object Page, Worklist, Analytical List Page, Overview Page, Form entry object page.
Building Blocks	Building blocks are reusable artifacts that are consistently orchestrated by the framework, so you automatically benefit from SAP Fiori compliance and standard application behavior like draft handling and side effects.
Extension Points	Predefined container that allows developers to add custom UI controls or extend existing functionality using standard SAPUI5 programming.
Controller Extensions	Powerful mechanism that allows developers to extend the functionality of generated apps by adding custom JavaScript code. These extensions provide predefined "hooks" or methods that can be overridden to introduce custom logic, tailoring the user interface and behavior of the application to specific requirements.

Building Blocks

Benefit	Description
Annotation Driven Design	You can control many data relevant aspects on service layer.
Field Control	Easily use Field Control annotations that will be taken into account.
Mix & Match	Just use the the things you need and chosse the level of granularity by yourself.
Side Effects	Side effects are evaluated automatically by the building blocks.
Value Helps	Using Field- or FormElement Building Blocks allow annotation driven value helps.

Why Freestyle Doesn’t Make Sense in OData v4

From our perspective, the Fiori Elements Building Blocks, much like the v2 Smart Controls, ideally belong in the SAPUI5 Core. Since they are not part of the Core, it no longer makes sense in an OData v4–centric development to build completely freestyle applications; the FE v4 Core should be used by default, especially for applications running in the Fiori Launchpad, unless there are compelling reasons—such as performance or overhead considerations—to deviate.

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.

Services

Service	Description
Flexibility	You can use SAPUI5 flexibility to extend your SAP Fiori apps supporting Key User Adaption and Developer Adaption.
Intelligent Prompt	Uses machine learning and predictive analytics to offer context-sensitive suggestions and guide users through tasks and decision-making processes.
Routing	Ensures smooth navigation by intelligently managing the flow between different pages and views, enhancing user experience and simplifying task completion.
Collaboration	Facilitates seamless communication and collaboration between users by providing features like task management, comments, and notifications within the application (currently RAP only).
Telemetry	Captures and sends real-time data on application usage and performance, helping organizations monitor user interactions and optimize application behavior.

Fiori Elements Evolution

SAP Fiori Elements V4 offers significant advantages in terms of flexibility, performance, and scalability, enabling seamless UI customization, better OData support, and improved extensibility through a modern architecture. It is essential for staying aligned with SAP's UX strategy, ensuring future-proof applications that are easier to adapt, debug, and scale.

From V2 Constraints to V4 Flexibility:

Category	FE V2	FE V4	Weaknesses V2
Technology	Classic SAPUI5 architecture sap.suite.ui. generic.template	Modern SAPUI5 with enhanced flexibility sap.fe	Outdated architectural approach
Extensibility	Limited, mainly via extension controllers	Flexible via Custom Sections and Building Blocks	High effort for custom extensions
UI Customization	Limited customization via stable IDs and controller logic	Rich customization with Flexible Programming Model (FPM)	Minimal customization without code
OData Support	Primarily OData V2	Native OData V4 support, backward compatible with V2	Less capable in handling complex data scenarios
Annotations Handling	Static, less flexible interpretation	Dynamic, modular and more powerful interpretation	Hard to scale or reuse across apps
Testing & Debugging	Limited tools, harder to isolate issues	Improved diagnostics, preview apps, better tooling	Debugging requires deeper technical knowledge
Reusability	Reuse possible but limited	Promotes reuse via FPM and Component-based design	Code reuse requires manual effort
Performance	Sufficient but not optimized	Better performance via lightweight rendering and V4 OData	Slower in complex UI scenarios
Adaptation Projects	Requires developer knowledge	Better support via SAP Business Application Studio	Business users can't easily adapt apps
UI State Binding & Metadata Changes	Uses ui>editable and custom logic for edit states	Introduces ui>isEditable and consistent FPM binding model	V2 requires custom logic and manual binding; not compatible with new FPM state model
Transactional Support (Draft / Non-Draft)	Supports both Draft and Non-Draft models	Only supports Draft-enabled services	V2 is the only out-of-the-box option for Non-Draft CRUD => CAP fallback to v2 Adapter
Evolution/Future-Proof	Legacy; no major future enhance-ments planned	Actively developed and future-proof	Not aligned with SAP’s UX strategy going forward

Simplified Draft Handling by Hiding Draft Features

In applications that have only a limited number of editable fields, draft handling adds unnecessary overhead for users. For such applications, all features related to draft handling can be hidden from the UI (≥ SAPUI5 1.134) while the draft functionality remains active in the background:

"sap.fe": {
  "app": {
    "hideDraft": {
      // Simplified Draft Handling
      "enabled": true, 
      // Consistent return to ListReport after Save/Cancel
      "stayOnCurrentPageAfterSave": false,
      "stayOnCurrentPageAfterCancel": false
    }
  }
}

Integrating Non-Draft CRUD Support in FE V4

Supporting Non-Draft CRUD would A Key Step Towards Enhanced Flexibility and Future-Readiness.

It is crucial for SAP to integrate Non-Draft CRUD support into Fiori Elements V4, as it would simplify transaction handling without the draft mode and ease the transition for existing applications to V4. This would enable seamless CRUD operations without relying on the limitations of version 2, further enhancing the flexibility and future-readiness of applications.

Backend Complexity Remains

Even if draft-related features are hidden from the user interface, the backend must still handle all the complexities of draft management. This includes maintaining draft versions, conflict resolution, and ensuring data consistency, which means that simplifying the UI does not eliminate the underlying technical challenges.

SAP CAP Lean Draft can simplify working with drafts, but the complexity of reading and merging data from two different sources remains high.

Community Poll

Would you benefit from Non-Draft CRUD support in FE v4?

Option	Votes
✅ Yes – we need that	72%
🤷 Maybe / nice to have	15%
❌ No – only use Draft	5%
🧩 Not sure / need examples	8%

Original Linkedin Poll

Cheat Sheet

Core Functionality

AppComponent	Main class for components (extends UIComponent)
RootView	NavContainer or Fcl (in FCL use case)
BaseController	Internal base controller
PageController	Base controller for Freestyle Page (extends BaseController)
ExtensionAPI	For all pages API to Controller Extensions

UI Models

ui	Properties: editMode, isEditable, draftStatus, busy, pages OneWay
internal	Internally used TwoWay
view	UDINA 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
Wizard	UDINA SAP Fiori Wizard Floorplan implementation
Illustrated Message Page	UDINA Floorplan to visually confirm a former action
Freestyle Page	UDINA Freestyle Floorplan for everything else

Controller Extensions

EditFlow	Edit flow of the application
IntentBasedNavigation	Intent-based navigation
MessageHandler	Message Handling
Paginator	Navigation using paginators
Routing	Routing flow of the application
Share	Share functionality
ViewState	State Handling

Building Blocks (Part I)

Table	PresentationVariantType, SelectionPresentation­VariantType, LineItem
FilterBar	SelectionFields, Capabilities.SearchRestrictions
FilterField	Common.ResultContext
Form	Facets, CollectionFacet, ReferenceFacet, FieldGroup
FormElement	Common.Label
Field	DataField, DataPointType, DataFieldWithNavigationPath, DataFieldWithUrl, DataFieldWith­IntentBasedNavigation, DataFieldWithAction

Building Blocks (Part II)

Chart	PresentationVariantType, Chart
MicroChart	Chart, ChartDefinitionType, ChartType, ChartMeasureAttributeType, DataPoint, DataPointType
FlexibleColumn LayoutActions	-
Paginator	-
Share	-

Placeholder Loading

This is our first implementation and usage of Skeleton Screens, which are defined in the UDINA UX/UI Design Guidelines.

Concerning this, SAP Fiori Elements implemented the Placeholder Loading general pattern.

INFO

Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.

A skeleton page shows the frame of the final content without the content being fully loaded. Visually, skeleton pages are grey boxes with animations to indicate loading activity.

Skeleton pages are used to create an impression of speed and reliability when an app encounters performance barriers. They provide a generic preview of the layout, which makes the app seem to load faster. This improves the overall user experience.

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.

Intro

# 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

List Report

<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>

Object Page

<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>

Overview Page

<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>

Analytic List Page

<div class="sapFePlaceholderContainer">
	<!-- P A G E  H E A D E R -->
	<div class="sapFeHeader sapFeResponsivePadding sapFeALPHeader">
		<div class="sapFeHeaderTitle sapFeHeaderTitleWithSubtitle">
			<div class="sapFeHeaderTitleTextContainer">
				<div class="sapFeHeaderTitleText sapFeText sapFeTextWeightL sapFeTextWidthL"></div>
				<div class="sapFeHeaderSubTitleText sapFeText sapFeTextWeightS sapFeTextWidthS"></div>
			</div>
			<div class="sapFeHeaderTitleActions sapFeSmallestVisibleSizeM">
				<div class="sapFeText sapFeTextWeightS sapFeTextWidthS sapFeHeaderTitleAction"></div>
			</div>
		</div>
		<div class="sapFeHeaderContent">
			<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
				<div class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop">
					<div class="sapFeDonutChart sapFeALPHeaderDonut">
						<div class="sapFeDonutChartCutOut"></div>
						<div class="sapFeDonutChartInnerCircle"></div>
					</div>
					<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
						<div class="sapFeBarChart">
							<div class="sapFeVerticalAlignInherit">
								<div
									class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeALPHeaderChart sapFeVAlignInline sapFeSmallestVisibleSizeM sapFeChartHorMeasure sapFeChartVertMeasure sapFeHorizontalBarChart">
									<div class="sapFeText sapFeTextWeightL sapFeTextWidth160 sapFeVerticalRepeaterItem">
									</div>
									<div class="sapFeText sapFeTextWeightL sapFeTextWidthM sapFeVerticalRepeaterItem">
									</div>
									<div class="sapFeText sapFeTextWeightL sapFeTextWidth140 sapFeVerticalRepeaterItem">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
						<div class="sapFeBarChart">
							<div class="sapFeVerticalAlignInherit">
								<div
									class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeVerticalRepeater sapFeALPHeaderChart sapFeVAlignInline sapFeSmallestVisibleSizeM sapFeChartHorMeasure sapFeChartVertMeasure sapFeHorizontalBarChart">
									<div class="sapFeText sapFeTextWeightS sapFeTextWidth160 sapFeVerticalRepeaterItem">
									</div>
									<div class="sapFeText sapFeTextWeightS sapFeTextWidth140 sapFeVerticalRepeaterItem">
									</div>
									<div class="sapFeText sapFeTextHeight20 sapFeTextWidth0 sapFeVerticalRepeaterItem">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- P A G E  C O N T E N T -->
	<div
		class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeContent sapFeResponsivePadding">
		<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeALPHeaderText"></div>
		<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop">
			<div class="sapFeBarChart">
				<div class="sapFeTextAlignInherit">
					<div
						class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeHorizontalRepeater sapFeALPHeaderChart sapFeChartHorMeasure sapFeChartVertMeasure sapFeVerticalBarChart">
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight100 sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight30 sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight60 sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight40 sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight30 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight20 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight100 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight80 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeM sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight80 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight60 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight0 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight70 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
						</div>
						<div
							class="sapFeVerticalBar sapFeVerticalBarWeight15 sapFeVerticalBarHeight60 sapFeSmallestVisibleSizeL sapFeHorizontalRepeaterItem">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTable">
			<div class="sapFeText sapFeTextWeightL sapFeTextWidthXL sapFeTableTitle"></div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableColmnHeaderCell sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableColmnHeaderText sapFeTableText">
					</div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
			<div
				class="sapFeHorizontalLayout sapFeHorizontalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableRow">
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeM">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
				<div
					class="sapFeVerticalLayout sapFeVerticalContent sapFeTextAlignStart sapFeVerticalAlignTop sapFeTableCell sapFeSmallestVisibleSizeXXL">
					<div class="sapFeText sapFeTextWeightM sapFeTextWidthM sapFeTableText"></div>
				</div>
			</div>
		</div>
	</div>
</div>

LESS

/* START "Placeholder.less" */
.sapFePlaceholderContainer {
  background-color: @sapUiBaseColor;
  position: absolute;
  width: 100%;
  height: 100%;
}
.sapFeResponsivePadding {
  width: calc(~"100% - 6rem");
  padding-left: 3rem;
  padding-right: 3rem;
}
.sapFeCols4 > * {
  width: calc(~"25% - 2rem");
}
.sapFePaddingTop {
  padding-top: 1rem;
}
.sapFeTextAlignStart {
  text-align: start;
}
.sapFeTextAlignCenter {
  text-align: center;
}
.sapFeTextAlignEnd {
  text-align: end;
}
.sapFeTextAlignInherit {
  text-align: inherit;
}
.sapFeVerticalAlignTop {
  vertical-align: top;
}
.sapFeVerticalAlignInherit {
  vertical-align: inherit;
}
.sapFeVerticalAlignMiddle {
  vertical-align: middle;
}
.sapFeVerticalAlignBottom {
  vertical-align: bottom;
}
.sapFeVerticalRepeater {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  align-content: flex-start;
  width: fit-content;
}
.sapFeVerticalRepeater.sapFeTextAlignCenter {
  align-items: center;
}
.sapFeVerticalRepeater.sapFeTextAlignEnd {
  align-items: flex-end;
}
.sapFeVerticalRepeater.sapFeVerticalAlignMiddle {
  align-content: center;
}
.sapFeVerticalRepeater.sapFeVerticalAlignBottom {
  align-content: flex-end;
}
.sapFeHorizontalContent > * {
  display: inline-block;
}
.sapFeHorizontalContent > .sapFeVerticalRepeater,
.sapFeHorizontalContent > .sapFeHorizontalRepeater {
  display: flex;
}
.sapFeHorizontalContent > *:not(:last-child) {
  margin-left: 0;
}
.sapFeHorizontalContent > *:not(:last-child) {
  margin-right: 2rem;
}
.sapFeHorizontalContent.sapFeTextAlignEnd > *:not(:last-child) {
  margin-right: 0;
}
.sapFeHorizontalContent.sapFeTextAlignEnd > *:not(:first-child) {
  margin-left: 2rem;
}
.sapFeVerticalContent > * {
  display: block;
}
.sapFeVerticalContent > *:not(:last-child) {
  margin-bottom: 1rem;
}
.sapFeVerticalContent.sapFeVerticalAlignBottom > *:not(:first-child) {
  margin-top: 1rem;
}
.sapFeText {
  border-radius: 0.25rem;
}
.sapFeTextWeightS {
  height: 0.5rem;
}
.sapFeTextWeightM {
  height: 0.75rem;
}
.sapFeTextWeightL {
  height: 0.875rem;
}
.sapFeTextWidthS {
  width: 75px;
}
.sapFeTextWidthM {
  width: 120px;
}
.sapFeTextWidthL {
  width: 225px;
}
.sapFeTextWidthXL {
  width: 275px;
}
.sapFeTextWidth30PX {
  width: 30px;
}
.sapFeTextWidth50perct {
  width: 50%;
}

.sapFeTextWidth50PX {
  width: 50px;
}
.sapFeTextWidth80PX {
  width: 80px;
}
.sapFeTextWidth90PX {
  width: 90px;
}
.sapFeTextWidth100PX {
  width: 100px;
}
.sapFeTextWidth120PX {
  width: 120px !important;
}
.sapFeTextWidth160PX {
  width: 160px;
}

.sapFeTextHeight20 {
  height: 20px;
}
.sapFeTextHeight90PX {
  height: 90px !important;
}

.sapFeTextWidth0 {
  width: 0px;
}
.sapFeTextWidth140 {
  width: 140px;
}
.sapFeTextWidth160 {
  width: 160px;
}
.sapFeAction {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
.sapFeAvatarSizeS {
  width: 2rem;
  height: 2rem;
}
.sapFeAvatarSizeM {
  width: 5rem;
  height: 5rem;
}
.sapFeOVPCardHeaderAvatar {
  width: 40px;
  height: 40px;
  background-size: 900px 900px;
}
.sapFeAvatarShapeCircle {
  border-radius: 50%;
}
.sapFeBarChart {
  display: inline-block;
}
.sapFeVerticalBarChart,
.sapFeHorizontalBarChart {
  padding-right: 1rem;
  white-space: nowrap;
}
.sapFeBarChartWithMeasure .sapFeVerticalBarChart,
.sapFeBarChartWithMeasure .sapFeHorizontalBarChart {
  padding-right: 3rem;
}
.sapFeBarChart .sapFeHorizontalRepeaterItem,
.sapFeHorizontalBarChart .sapFeVerticalRepeaterItem {
  border-radius: 0.25rem;
}
.sapFeHorizontalContent > .sapFeVerticalBar {
  margin: 0 0.55rem;
}
.sapFeVerticalBarWeightS {
  width: 0.5rem;
}
.sapFeVerticalBarWeightM {
  width: 0.75rem;
}
.sapFeVerticalBarWeight15 {
  width: 1.5rem;
}
.sapFeVerticalBarWeightL {
  width: 0.875rem;
}
.sapFeVerticalBarHeightS {
  height: 75px;
}
.sapFeVerticalBarHeight0 {
  height: 0px;
}
.sapFeVerticalBarHeight20 {
  height: 20px;
}
.sapFeVerticalBarHeight30 {
  height: 30px;
}
.sapFeVerticalBarHeight40 {
  height: 40px;
}
.sapFeVerticalBarHeight60 {
  height: 60px;
}
.sapFeVerticalBarHeight70 {
  height: 60px;
}
.sapFeVerticalBarHeight80 {
  height: 80px;
}
.sapFeVerticalBarHeight100 {
  height: 100px;
}

.sapFeVerticalBarHeightM {
  height: 120px;
}
.sapFeVerticalBarHeightL {
  height: 225px;
}
.sapFeVerticalBarHeightXL {
  height: 275px;
}
.sapFeBarChartLegendContainer {
  padding-bottom: 2rem;
}
.sapFeBarChartLegendItem:not(:last-child) {
  margin-bottom: 0.25rem;
}
.sapFeChartSum {
  line-height: 0.125rem;
}
.sapFeChartHorMeasure,
sapFeChartVertMeasure {
  position: relative;
}
.sapFeChartVertMeasure:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 2px;
  left: 0;
  width: 2px;
}
.sapFeChartHorMeasure:after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 0.5rem;
  left: 0;
  height: 2px;
}
.sapFeBarChartWithMeasure .sapFeChartHorMeasure:after {
  right: 2.5rem;
}
.sapFeVerticalBarChart.sapFeChartVertMeasure {
  margin-top: 0.5rem;
}
.sapFeBarChartWithMeasure .sapFeVerticalBarChart.sapFeChartVertMeasure {
  margin-right: 1rem;
}
.sapFeVerticalBarChart.sapFeVAlignInline.sapFeChartHorMeasure {
  margin-top: 0;
}
.sapFeVerticalBarChart.sapFeChartVertMeasure:before {
  top: -0.5rem;
}
.sapFeHorizontalBarChart.sapFeChartHorMeasure {
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}
.sapFeHorizontalBarChart.sapFeVAlignInline.sapFeChartHorMeasure {
  margin-top: 0;
}
.sapFeHorizontalBarChart.sapFeChartVertMeasure {
  padding-left: 0.5rem;
  margin-right: 1rem;
}
.sapFeHorizontalBarChart.sapFeChartVertMeasure:before {
  top: -0.5rem;
}
.sapFeHorizontalBarChart.sapFeChartHorMeasure:after {
  right: 0;
}
.sapFeBarChartWithMeasure .sapFeHorizontalBarChart.sapFeChartHorMeasure:after {
  right: 2rem;
}
.sapFeChartSum .sapFeHorizontalRepeaterItem {
  height: 5px !important;
}
.sapFeDonutChart {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: relative;
}
.sapFeDonutChartInnerCircle {
  width: 2rem;
  height: 2rem;
  margin: 1rem;
  border-radius: 50%;
  background: @sapUiBaseColor;
  position: absolute;
  top: 0;
  left: 0;
}
.sapFeDonutChartCutOut {
  width: 2rem;
  height: 2rem;
  border-radius: 50% 0 0 0;
  background: @sapUiBaseColor;
  position: absolute;
  top: 0;
  left: 0;
}
.sapFeOVPCardContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.sapFeOVPCard {
  width: calc(~"20rem - 2rem");
  margin: 0 2rem 2rem 0;
  border: 1px solid @sapUiContentPlaceholderloadingBackground;
}
.sapFeOVPCardVersion2 {
  width: calc(~"20rem - 2rem + 20rem");
}
.sapFeOVPCardHeader {
  padding: 1rem;
  border-bottom: 1px solid @sapUiContentPlaceholderloadingBackground;
}
.sapFeOVPCardHeader .sapFeHorizontalContent > *:not(:last-child) {
  margin-right: 1rem;
}
.sapFeOVPCardContent {
  padding: 1rem;
}
.sapFeOVPCardContentContainer {
  width: 100%;
}
.sapFeOVPCardVersion2 .sapFeOVPCardContent > .sapFeHorizontalLayout > * {
  width: calc(~"50% - 1rem");
}
.sapFeHeader {
  padding-top: 1rem;
  padding-bottom: 2rem;
  background: @sapUiBaseColor;
}
.sapFeHeaderTitle {
  height: 3rem;
  line-height: 2.825rem;
  display: flex;
  justify-content: space-between;
}
.sapFeHeaderTitle > * > * {
  display: inline-block;
  vertical-align: middle;
}
.sapFeHeaderTitleWithSubtitle {
  height: 4.25rem;
}
.sapFeHeaderSubTitleText {
  display: block;
}
.sapFeHeaderContent {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.sapFeAnchorBar {
  padding-top: 1rem;
  padding-bottom: 1px;
}
.sapFeContent {
  background: @sapUiBaseColor;
}
.sapFeObjectPageSection {
  padding-top: 1rem;
  position: relative;
}
.sapFeVerticalContent > *:not(:last-child).sapFeObjectPageSectionTitle {
  margin-bottom: 3rem;
}
.sapFeObjectPageSectionTitle:after {
  content: ".";
  color: transparent;
  position: absolute;
  top: 3rem;
  left: -1rem;
  right: -1rem;
  height: 2px;
  background: @sapUiListHeaderBackground;
}
.sapFeTable {
  padding: 2rem 0;
}
.sapFeTableTitle {
  background: @sapUiContentPlaceholderloadingBackground;
  opacity: 0.66;
}
.sapFeTableColmnHeaderRow {
  background: @sapUiListHeaderBackground;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.sapFeTableCell {
  height: 2rem;
  line-height: 2rem;
  width: calc(~"100% / 8");
}
.sapFeTableColmnHeaderCell {
  height: 2.5rem;
  line-height: 2.5rem;
  width: calc(~"100% / 8");
}
.sapFeTableText {
  display: inline-block;
}
.sapFeHorizontalContent > *:not(:last-child).sapFeTableColmnHeaderCell,
.sapFeHorizontalContent > *:not(:last-child).sapFeTableCell {
  margin: 0;
}
.sapFeText,
.sapFeAction,
.sapFeVerticalBar,
.sapFeChartVertMeasure:before,
.sapFeChartHorMeasure:after,
.sapFeAvatar,
.sapFeDonutChart {
  background: @sapUiContentPlaceholderloadingBackground;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  background-image: @sapUiContentPlaceholderloadingGradient;
  background-repeat: no-repeat;
  background-size: 900px 104px;
}
.sapFeChartVertMeasure:before {
  background-size: 104px 900px;
}
.sapFeVerticalBar {
  background-size: 104px 900px;
}
@keyframes placeHolderShimmer {
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 0%;
  }
}
@media (min-width: 2560px) and (max-width: 3839px) {
  .sapFeSmallestVisibleSizeXXL {
    display: none;
  }
  .sapFeCols4 > * {
    width: calc(~"(100% / 3) - 2rem");
  }
  .sapFeTableColmnHeaderCell,
  .sapFeTableCell {
    width: calc(~"100% / 6");
  }
}
.sapUiContainer-Wide .sapFeSmallestVisibleSizeXXL,
.sapUiContainer-Wide .sapFeSmallestVisibleSizeXL {
  display: none;
}
.sapUiContainer-Wide .sapFeCols4 > * {
  width: calc(~"(100% / 2) - 2rem");
}
.sapUiContainer-Wide .sapFeTableColmnHeaderCell,
.sapUiContainer-Wide .sapFeTableCell {
  width: calc(~"100% / 4");
}
@media (min-width: 1024px) and (max-width: 2559px) {
  .sapFeSmallestVisibleSizeXXL,
  .sapFeSmallestVisibleSizeXL {
    display: none;
  }
  .sapFeCols4 > * {
    width: calc(~"(100% / 2) - 2rem");
  }
  .sapFeTableColmnHeaderCell,
  .sapFeTableCell {
    width: calc(~"100% / 4");
  }
}
.sapUiContainer-Medium .sapFeSmallestVisibleSizeXXL,
.sapUiContainer-Medium .sapFeSmallestVisibleSizeXL,
.sapUiContainer-Medium .sapFeSmallestVisibleSizeL {
  display: none;
}
.sapUiContainer-Medium .sapFeResponsivePadding {
  width: calc(~"100% - 4rem~");
  padding-left: 2rem;
  padding-right: 2rem;
}
.sapUiContainer-Medium .sapFeCols4 > * {
  width: calc(~"(100% / 2) - 2rem");
}
.sapUiContainer-Medium .sapFeTableColmnHeaderCell,
.sapUiContainer-Medium .sapFeTableCell {
  width: calc(~"100% / 3");
}
@media (min-width: 600px) and (max-width: 1023px) {
  .sapFeSmallestVisibleSizeXXL,
  .sapFeSmallestVisibleSizeXL,
  .sapFeSmallestVisibleSizeL {
    display: none;
  }
  .sapFeResponsivePadding {
    width: calc(~"100% - 4rem");
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sapFeCols4 > * {
    width: calc(~"(100% / 2) - 2rem");
  }
  .sapFeTableColmnHeaderCell,
  .sapFeTableCell {
    width: calc(~"100% / 3");
  }
}
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeXXL,
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeXL,
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeL,
.sapUiContainer-Narrow .sapFeSmallestVisibleSizeM {
  display: none;
}
.sapUiContainer-Narrow .sapFeResponsivePadding {
  width: calc(~"100% - 2rem");
  padding-left: 1rem;
  padding-right: 1rem;
}
.sapUiContainer-Narrow .sapFeCols4 > * {
  width: calc(~"100% - 1rem");
}
.sapUiContainer-Narrow .sapFeTableColmnHeaderCell,
.sapUiContainer-Narrow .sapFeTableCell {
  width: 100%;
}
@media (max-width: 599px) {
  .sapFeSmallestVisibleSizeXXL,
  .sapFeSmallestVisibleSizeXL,
  .sapFeSmallestVisibleSizeL,
  .sapFeSmallestVisibleSizeM {
    display: none;
  }
  .sapFeResponsivePadding {
    width: calc(~"100% - 2rem");
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sapFeCols4 > * {
    width: calc(~"100% - 1rem");
  }
  .sapFeTableColmnHeaderCell,
  .sapFeTableCell {
    width: 100%;
  }
}

sap.fe.placeholder library

The whole functionality is bundled in the sap.fe.placeholder library. If you are using the Building Blocks and the sap.fe.macrosdependency inside your project, the placeholder library will be automatically loaded as a dependency.

What we got

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

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

Using custom placeholder views

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

Use Case: Product Detail Page

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

Define placeholder views inside manifest.json

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

Property	Value	Description
html	HTMLView	For performance reason, the path to a plain HTML view.
autoClose	true	The placeholder will be hidden automatically, after a short delay.
autoClose	false	The placeholder needs to be hidden manually by calling hidePlaceholder() on targetControl. The binding event dataReceived will be a good candidate to hide placeholder after relevant ui data has been loaded.

{
    "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.

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).