SAP Fiori Elements Feature Map
You can search, filter, and sort content in the table below. Use your mouse to hover over the links in the Developer Documentation column to display a short description of the feature.
You can use extension points to extend your generated app during the creation process. For more information, see the following resources:
-
Cross-floorplan extension points and general information: Extending Generated Apps Using App Extensions
-
Extending List Reports and Object Pages Using App Extensions
Filter Usage for Supported Floorplans Column in Table
-
Features available for both OData versions are given without parentheses, as in List report and Object page.
-
To search for features available only in SAP Fiori elements for OData V2, choose List report (OData V2).
-
To search for features available only in SAP Fiori elements for OData V4, choose List report (OData V4).
| Controls, UI Elements, Features | Supported Floorplans | Developer Documentation | SAP Fiori Design Guidelines | Thumbnail | Tags for Keyword Search |
|---|---|---|---|---|---|
| Analytical card |
|
Analytical Card |
 |
KPI DataPoint analytics cards |
|
| Add column to a table |
|
Table Overview |
 |
showDataFieldsLabel Tables Columns UI.LineItem width column Fieldgroups UI.FieldGroup |
|
| Add card to insights |
|
 |
add cards add cards to insights insights cards My Home cards insight cards enableAddCardToInsights |
||
| Add custom column |
|
Table Overview |
 |
FMP Flexible Programming Model extensions breakout column width |
|
|
Adaptation |
|
Adaptation project |
|||
| Analytical table |
|
Analytical Table (ALV) |
 |
analytics |
|
| Area micro chart |
|
Area Micro Chart |
 |
Embedded chart micro charts micro-chart showMicroChartLabel microChartSize Area Microchart |
|
| Avatar |
|
Using Images, Initials, and Icons | Avatar |
 |
ImageUrl Image Images |
| Breadcrumb |
|
Object Page Classic Header | Breadcrumb |
 |
|
| Building blocks |
|
The FormElement Building Block The FilterField Building Block The FlexibleColumnLayoutActions Building Blocks |
buildable blocks macro free style app free style application free-style application freestyle application FMP Flexible Programming Model |
||
| Bullet chart |
|
Bullet Chart |
 |
charts |
|
| Bullet micro chart |
|
Bullet Micro Chart |
 |
Embedded chart micro charts micro-chart showMicroChartLabel microChartSize |
|
| Busy indicator |
|
Busy Indicator |
 |
||
| Button/Action |
|
Button |
 |
DefaultValuesFunction ParameterDefaultValue create operationAvailable DataFieldForAction menu action MenuActions Placement anchor Action parameters annotation actions unbound action static action action bound to object action bound to collection singleton action dialog parameter dialog |
|
| Canvas page |
|
Extending Apps Using a Canvas Page |
 |
||
| Card filter | Overview page (OData V2) | Configuring Card Filters |
cards |
||
Chart building block |
|
building blocks buildable blocks macro free style application free style app free-style application freestyle application |
|||
| Chart/Smart chart |
|
 |
defaultPath | ||
| Checkbox |
|
Checkbox |
 |
multi-selection multi selection multiselection multiple selection selectionMode |
|
| Coloring cards based on threshold values | Overview page | Coloring Cards Based on Threshold Values |
 |
||
| Column chart |
|
Column Chart |
 |
charts defaultPath columns |
|
| Column popin | Object page | Tables | |||
| Combine buttons/actions in toolbar |
|
Actions |
MenuAction menu action Menu button |
||
| Combo box |
|
Combo Box |
 |
Common.ValueListWithFixedValue ValueListWithFixedValues DDL Dropdown List pro-down |
|
| Contact quick view |
|
Adding a Contact Quick View to a Table |
 |
Contact card Communication.Contact communication contact |
|
| Context-dependent value help |
|
Field Help | Value Help Dialog |
context dependent fields context-dependent values |
|
| Context-dependent actions |
|
Actions |
contect dependent actions |
||
| Context Menu |
|
Tables |
 |
context menu |
|
| Copying and Pasting from Spreadsheet Applications to Tables | Object page | Copying and Pasting from External Applications to Tables |
 |
microsoft excel copy from range copy Paste to range |
|
| Cumulation (Waterfall chart) |
|
Cumulation (Waterfall Chart) |
 |
defaultPath |
|
| Currency |
|
Currency |
 |
UoM Unit of Measure isCurrency currencies |
|
| Custom card | Overview page | Custom Cards |
 |
||
| Custom code | Overview page | Using Custom Code Before Standard Operations |
Extension Extension API on before onbefore hook before save |
||
| Custom filter field | List report | Adding Custom Fields to the Filter Bar | Filter Bar |
 |
fields FPM Flexible Programming Model extensions breakout custom filters |
| Custom action |
|
Adding Custom Actions Using Extension Points | Action Placement |
 |
FPM Flexible Programming Model extensions breakout Placement anchor |
| Custom header facet | Object page | Extension Points for Object Page Header Facets | Object Page Floorplan |
 |
FPM Flexible Programming Model extensions breakout |
| Custom form | Object page | Extension Points for Forms on the Object Page | Form / Simple Form |
 |
FPM Flexible Programming Model extensions breakout |
| Custom section | Object page | Extension Points for Sections on the Object Page | Object Page Floorplan |
 |
FPM Flexible Programming Model extensions breakout |
| Custom subsection | Object page | Extension Points for Subsections on the Object Page | Object Page Floorplan |
 |
FPM Flexible Programming Model extensions breakout |
| Custom dynamic side content | Object page | Adding Dynamic Side Content to Object Page Sections | Dynamic Side Content |
FPM Flexible Programming Model extensions breakout |
|
| Date/time picker |
|
Smart Field Field Help | Date/Time Picker |
 |
date-time selection selecting date picking date selecting time picking time date picker date selection |
| Date picker |
|
Date Picker |
 |
date selection picking date selecting date |
|
| Date range selection |
|
Enabling Semantic Operators in the Filter Bar | Date Range Selection |
 |
date interval interval selection useSemanticDateRange default value for semantic date field parameterized default value exclude semantic date operator additional date range operators semantic dates |
| Default sort order in a table |
|
Configuring Default Settings (Visualizations, Sort Order, Filter Values) |
tables sorting annotationPath defaultTemplateAnnotationPath |
||
| Default values for action parameter dialog |
|
Default Values for Action Parameters section in Actions |
Dialog |
 |
prefill pre-fill |
| Defining the order of standard actions |
|
Adding Actions to Tables | Action Placement | ||
| Dialog box |
|
Adapting Texts in the Delete Dialog Box Using Extensions (List Report) Adapting Texts in the Delete Dialog Box (Object Page Header) Adapting Texts in the Delete Dialog Box (Object Page with Nested Smart Table) Adapting Texts for Confirmation Dialog Box When Deleting Lines in a Table Enabling Object Creation Using the Dialog in the List Report |
Dialog |
 |
critical actions user confirmation Action Parameter Dialog NewAction i18n resource bundle custom text enhanceI18n |
| Direct edit |
|
 |
Edit Direct Edit Navigation |
||
| Draft handling |
|
Draft Handling | Draft Handling |
 |
Collaborative Draft Hidden Draft Hidden Draft Features Hiding Draft Features Hiding Draft Simplified Draft |
| Dynamic page layout |
|
Descriptor Configuration for the Overview Page | Dynamic Page Layout |
 |
|
| Editing status |
|
 |
|||
| Empty row mode for table entries |
|
Enabling Inline Creation Mode or Empty Row Mode for Table Entries |
 |
empty rows emptyrow emptyrows row mode |
|
| Export to spreadsheet |
|
enableExport excel |
|||
Field building block |
|
building blocks buildable blocks macro free style application free style app free-style application freestyle application |
|||
| Filter bar |
|
Enhancing ValueList Annotations for Visual Filters Disabling the Editing Status Filter Adding Custom Fields to the Filter Bar Enabling Semantic Operators in the Filter Bar Configuring Default Filter Values Configuring Default Settings (Visualizations, Sort Order, Filter Values) |
Filter Bar |
 |
semantic date prefill pre-filling customization customisation FilterRestrictions SelectionVariant hideFilterBar contextPath useSemanticDateRange parameters parameterized entity entity container parameter support FilterDefaultValue SelectionVariant visual filter |
FilterBar building block |
|
building blocks buildable blocks macros free style application free-style application freestyle application filter bar building block trigger filter search programatically trigger go button programatically selection variant SelectionVariant filter bar getter method filter bar setter method |
|||
| Flexible column layout |
|
Enabling the Flexible Column Layout | Flexible Column Layout (Layout + SAP Fiori Elements) |
 |
FCL |
FlexibleColumnLayoutActions building block |
|
building blocks buildable blocks macros free style application free-style application freestyle application FCL building block flexible column layout building block |
|||
| Flexible Programming Model |
|
 |
FPM |
||
| Footer toolbar |
|
Footer Toolbar |
 |
flexible programming model FPM |
|
| Form |
|
Form |
 |
Facets dataField ReferenceFacet CollectionFacet Subsection FieldGroup ConnectedFields semantically connected sectionLayout editableHeaderContent showDataFieldsLabel |
|
| Formatting numeric values | Overview page | Formatting Numeric Values |
 |
||
FormElement building block |
|
building blocks buildable blocks macros free style application free-style application freestyle application |
|||
| Freeze the first column in a table |
|
Tables | Table Overview |
freeze table columns freezing columns |
|
| Generative AI Features |
|
Generative AI Features | Designing for Generative AI |
 |
|
| Generic tag |
Analytical list page (OData V2) |
Creating Key Performance Indicator Tags | Generic Tag |
 |
tags cards |
| Grid table |
|
Grid Table |
 |
||
| Header toolbar |
|
Enabling Actions in the Object Page Header |
Header Toolbar |
 |
actions application actions annotation actions annotation-based actions annotation based actions manifest-based actions manifest based actions manifest actions |
| Highlighting line items based on criticality |
|
Highlighting Line Items Based on Criticality |
 |
||
| History of recently entered values |
|
Enabling the History of Recently Entered Values |
recently entered values history of recent values |
||
| Icon tab bar |
|
Defining and Adapting Sections |
Icon Tab Bar |
 |
|
| Image |
|
Image |  |
IsImageUrl ImageUrl Stream HeaderInfo |
|
| Inline creation mode for table entries | Object page | Enabling Inline Creation Mode or Empty Row Mode for Table Entries |
 |
||
| Input field |
|
Input Field |
 |
||
| Interactive chart |
Analytical list page |
Visual Filters | Interactive Chart |
 |
charts bars |
| Internal navigation |
|
Example: Enable Internal Navigation to Different Detail Page | |||
| Keep alive |
|
Refresh Data Set for Back Navigation When sap-keep-alive Is Set to True |
sap-keep-alive view cache |
||
| Keyboard shortcuts |
|
Keyboard Shortcuts |
defining custom shortcuts custom keyboard shortcuts custom shortcuts keyboard shortcuts for application actions command |
||
| Label |
|
Label |
 |
fields | |
| Launch object page in edit mode |
Object page |
Handling of the preferredMode Parameter |
preferred mode preferredmode |
||
| Line chart |
|
Line Chart |
 |
charts | |
| Line micro chart |
|
Line Micro Chart |
 |
microchart micro chart micro-chart |
|
| Link |
|
Link |
 |
URL |
|
| Link list card | Overview page | Link List Card |
 |
cards |
|
| Add multiple fields to one column |
|
Adding Multiple Fields to One Column in Responsive Tables |
 |
FieldGroup |
|
| Display text and ID for value help |
|
Displaying Text and ID for Value Help Input Fields |
 |
Text TextArrangement |
|
| Semantic date range on filter bar |
|
Enabling Semantic Operators in the Filter Bar |
 |
semantic dates dynamic dates |
|
| List card | Overview page | List Cards | List Cards |
 |
cards |
| Manage cards | Overview page | Customizing Overview Pages Using Runtime Capabilities |
 |
||
| Mass edit |
|
Enabling Editing Using a Dialog (Mass Edit) Enabling Editing Using a Dialog (Mass Edit) in the List Report |
Enabling Editing Using a Dialog in the List Report |
 |
multi edit multi-edit simultaneous multiple record records enableMassEdit dialog |
| Menu button |
|
Menu Button |
 |
||
| Message box |
|
Message Box |
 |
critical actions confirmation actions keep draft discard draft popup on away navigation 412 handling precondition failed strict handling Prefer:handling=strict |
|
| Message page |
|
Maintaining Standard Texts for Tables | Messaging |
 |
|
| Message popover |
|
Using Messages | Message Popover |
 |
message dialog error handling message handling backend messages validation messages 412 messages precondition failed 503 messages service unavailable message strip |
| Message toast |
|
Using Messages | Message Toast |
 |
success message |
MicroChart building block |
|
building blocks buildable blocks macros free style application freestyle application free-style application micro-chart |
|||
| Micro chart/Smart micro chart |
|
Micro Chart |
 |
microchart micro-chart |
|
| Multi-combo box |
|
Value Help as a Dropdown List | Multi-Combo Box |
 |
|
| Multi-input field |
|
Using the Multi-Input Field on the Object Page |
 |
multiinput fields multi-input fields multi intput fields multivalue fields multi-value fields multi value fields |
|
| Multiple selection of lines in tables |
|
 |
multiselect multi select singleselect single select |
||
| Multiple views on list report tables | List report | Multiple Views on List Report Tables |
 |
multiview multi view |
|
| Navigation |
|
Example: Enable Internal Navigation to Different Detail Page |
Navigation |
 |
external navigation internal navigation changing navigation to object page link URL |
| Navigation extension |
|
Example: Replacing Standard Navigation in a Responsive Table in the List Report Example: Replacing Standard Navigation in a Responsive Table on the Object Page Creating an Extension to Modify Properties in the Navigation Context Example: Enable Internal Navigation to Different Detail Page |
extensions modify context context modification modifying route |
||
| P13n dialog |
|
P13n Dialog |
 |
personalization personalisation |
|
Paginator building block |
|
up/down arrow keys next/previous navigation keys building blocks buildable blocks macros free style application free-style application freestyle application |
|||
| Popover |
|
Value Help as a Dropdown List | Popover |
 |
Value help VH Dropdown List DDL |
| Prefilling fields when creating a new entity |
|
Prefilling Fields When Creating a New Entity |
entities pre-fill prefill |
||
| Progress indicator |
|
Progress Indicator |
 |
progress bar |
|
| Quick view |
Overview page (OData V2) |
Quick View Cards | Quick View |
 |
Quick views quickview |
| Quick views for smart link navigation |
|
Enabling Quick Views for Link Navigation |
 |
view quickview |
|
| Radial micro chart |
|
Radial Micro Chart |
 |
radial microchart radial micro-chart |
|
| Rating indicator |
|
Adding a Rating Indicator to a Table | Rating Indicator |
 |
|
| Related apps button | Object page | Enabling the Related Apps Button |
 |
associated apps linked apps showRelatedApps |
|
| Resizing cards | Overview page | Customizing Overview Pages Using Runtime Capabilities | |||
| Responsive table |
|
Responsive Table |
 |
||
| sap-keep-alive mode |
|
Refresh Entity Sets in sap-keep-alive Mode | |||
| Reuse components | Object page | Including Reuse Components on an Object Page |
 |
||
|
|
|
building blocks buildable blocks macro free style application freestyle application free-style application |
|||
|
|
|
building blocks buildable blocks macro free style application freestyle application free-style application variantmanagement variant management |
|||
| Save |
|
Adapting Logic Before Save Operation Save and Navigation Options on the Object Page Toggling Between Draft and Saved Values Extending the Bookmark Function to Save Static Tiles to the SAP Fiori Launchpad |
onBeforeSave on before save |
||
| Search |
|
Enabling the Search Function | Search |
 |
|
| Segmented buttons | Object page | Adding Segmented Buttons to a Table Toolbar | Segmented Buttons |
 |
|
| "Share" functionality |
|
 |
Save as Tile Send email iAppState appState app-state app state collaborate Share to MS Teams Share via MS Teams Share as card hiding share hide share hiding specific Share menu options hide specific Share menu options semantic bookmarking sharing draft share draft flex change key user changes |
||
| Side effects |
|
Side Effects | |||
|
|
|
building blocks buildable blocks macros free style application free-style application freestyle application Email share share as email share via MS Teams share to MS teams save as tile |
|||
| Share to Microsoft Teams |
|
The Share Functionality | Header Toolbar |
 |
MS Teams Share as chat Share as tab Sharing |
| Smart link |
|
Smart Link |
 |
semantic links navigation links link-based navigation Contact card Communication.Contact |
|
| Smart table |
|
Smart Table |
 |
||
| Sorting on cards | Overview page | Configuring Sort Properties | |||
| Stack card | Overview page (OData V2) | Stack Cards | Stack Card |
 |
|
| Stacked bar micro chart |
|
Stacked Bar Micro Chart |
 |
Stacked bar micro-chart Stacked bar microchart |
|
| Status colors and icons |
|
Status Colors and Icons |
 |
colours criticality |
|
| Stream support | Object page | Enabling Stream Support |
 |
Edm.Stream Upload Download File MediaType form Attachment |
|
Table building block |
|
table macro tables building blocks buildable blocks macros free style application free-style application freestyle application |
|||
| Table card | Overview page | Table Cards |
 |
tables |
|
| Table personalization |
|
Table Personalization (Overview) |
 |
Vm Variant Management Filtering Sorting Grouping |
|
| Tables |
|
Tree Table |
 |
||
| Table toolbar |
|
Adding Segmented Buttons to a Table Toolbar Adaptation Extension Example: Adding a Button to the Table Toolbar in the List Report |
Table Toolbar |
 |
Adaptation project Quick filter quickVariantSelection |
| Text |
|
Plain Text Facet |
 |
Header Facet |
|
| Text area |
|
Different Representations of a Field | Text Area |
 |
Multiline Text UI.MultiLineText MultiLineText Expandable Text |
| Title |
|
Adding Titles to Object Page Tables Adapting the Object Page Header Title and Description |
Title |
 |
header title header description page title page description object title object description record title record description no title remove title blank title |
| Token |
|
Token |
 |
||
| Tree table |
|
Tree Table |
 |
hierarchy |
|
| Tree table hierarchy |
|
Setting the Table Type | Tree Table |
TreeTable |
|
|
|
building blocks buildable blocks macro free style application freestyle application free-style application TreeTable |
|||
| Unit of measure on cards | Overview page | Setting Units of Measure | |||
| Value help |
|
Value Help Dialog |
 |
VH ValueList ValueListWithFixedValues DDL PresentationVariantQualifier |
|
| Variant management |
|
Descriptor Configuration for the Analytical List Page |
Variant Management |
 |
VM personalisation personalization |
| Visual filter bar |
Analytical list page |
Visual Filter Bar |
 |
VisualFilter measure based filter measure-based filter filter on measure |
|
| Worklist |
|
Worklist | Worklist |
 |