Component Mapping: View-Based to Jetpack Compose¶
This page maps View-based components (cloud-fiori-android) to their Jetpack Compose equivalents (cloud-fiorijc-android). Use this as a reference when migrating user code.
Overview¶
The SAP Fiori Compose SDK introduces Jetpack Compose-based equivalents for most View-based Fiori components. The tables below provide a direct mapping between the two, organized by component category.
Direct Mappings¶
| View-Based Component | Compose Equivalent | Notes |
|---|---|---|
ObjectCell |
FioriObjectCell |
Use FioriObjectCellList when in a RecyclerView |
ContactCell |
FioriContactCell |
Use FioriContactCellList for list usage |
ObjectHeader |
FioriObjectHeader |
|
ProfileHeader |
FioriProfileHeader |
Also maps to FioriPageHeader for page-level header |
KeyValueCell |
FioriKeyValueCell |
See also ActionableKeyValueCell, ExpandableKeyValueCell |
CollectionView |
FioriCollectionViewGrid / FioriCollectionViewLine |
Choose by layout mode |
GridObjectCell |
FioriObjectCell / FioriDataTable |
Adaptive wrapper: renders as ObjectCell on phone, GridTableRow on tablet — use the appropriate Compose equivalent per form factor |
Banner |
FioriBanner |
|
SectionHeaderFooter |
FioriSectionHeader / FioriSectionFooter |
|
AttachmentFormCell |
FioriAttachment |
Use FioriAttachmentPicker for add/pick actions |
SignatureCaptureFormCell / SignatureFormCell |
FioriSignatureCapture |
Inline variant: FioriSignatureCaptureInline |
SignatureCaptureInline |
FioriSignatureCaptureInline |
|
ButtonFormCell |
FioriFilledButton |
See button variants below |
SwitchFormCell |
FioriSwitch |
|
SliderFormCell |
FioriSlider |
See also FioriEditableSlider, FioriIconSlider |
NoteFormCell |
FioriNoteTextField |
|
SimplePropertyFormCell |
FioriSimpleTextField |
|
ChoiceFormCell |
FioriChip |
|
FilterFormCell |
FioriChip |
|
FilterChipFormCell |
FioriChip |
|
ListPickerFormCell / GenericListPickerFormCell |
ListPicker / ListPickerDialog |
Compose version in listpicker package |
FilterDialogFragment / SortAndFilterDialogFragment |
FioriSortFilterDialog |
FilterDialogFragment is a subclass of SortAndFilterDialogFragment; both map to the same Compose equivalent |
MultiSortFormCell |
FioriMultiSort |
Also see FioriSortFilterDialog, FioriFilterFeedbackBar |
DateTimePickerFormCell |
DateTimePickerFormCell |
Compose version in datepicker package |
DurationPickerFormCell |
DateTimePickerFormCell |
Duration mode within the same composable |
SeparatorFormCell |
FioriDivider |
|
FioriAvatar |
FioriAvatarSystem |
Use FioriAvatar for lower-level single avatar |
FioriAvatarStack |
FioriAvatarSystem with FioriAvatarType.DOUBLE or GROUP |
|
FioriCircularProgressBar |
FioriCircularProgressIndicator |
|
FioriLinearProgressBar |
FioriLinearProgressIndicator |
|
FioriProgressBar |
FioriLinearProgressIndicator |
|
FioriCollapsingToolbar |
FioriTopAppBar + FioriScaffold |
Collapsing behavior via scroll state |
FioriExpandedToolbar |
FioriTopAppBar |
|
FioriToolbar |
FioriTopAppBar |
|
FioriSearchView |
FioriTopAppBar |
Search integrated into top bar |
FioriListPopupWindow / OverflowButton |
FioriDropdownMenu / FioriTopBarMenu |
View-based dropdown menu and its companion overflow trigger button |
KpiView |
FioriNumericKpi |
|
KpiHeader |
FioriNumericKpi |
|
DataTableView |
FioriDataTable |
|
GridTableRow |
FioriDataTable |
Rows are defined via data model |
PersistentFooter |
PersistentFooter |
Same name, different package |
Tag |
FioriTagsRow |
Compose renders tag collections |
PrivacyNoticeActivity / PrivacyNoticeDialogFragment |
FioriPrivacyNotice / FioriPrivacyNoticeDialog |
|
FastFilterView |
FioriFilterFeedbackBar |
|
NavigationBar |
FioriNavigationBar |
View-based bottom navigation bar extending BottomNavigationView |
QRCodeReaderFragment / QRCodeReaderDialogFragment |
FioriBarcodeScannerDialog / FioriBarcodeScannerBox |
|
MlKitTextDetectionView |
FioriOcrScannerBox / FioriOcrScannerDialog |
|
FioriCamera |
FioriDocScanner |
Document scanning use case |
HierarchyView |
No direct equivalent | Build with FioriObjectCellList + custom tree logic |
TimelineView |
No direct equivalent | Build with FioriObjectCellList + custom item layout |
ChartHeaderView |
FioriHeader |
Button Variants¶
| View-Based | Compose Equivalent |
|---|---|
ButtonFormCell (primary/filled) |
FioriFilledButton |
ButtonFormCell (text/borderless) |
FioriTextButton |
ButtonFormCell (tonal) |
FioriTonalButton |
| Icon-only button | FioriFilledIconButton / FioriStandardIconButton / FioriTonalIconButton |
| FAB | FioriFloatActionButton |
| Extended FAB | FioriExtendedFloatActionButton |
| Small FAB | FioriSmallFloatActionButton |
| Large FAB | FioriLargeFloatActionButton |
Navigation Components¶
| View-Based | Compose Equivalent |
|---|---|
| Bottom navigation bar | FioriNavigationBar |
| Navigation rail (tablet) | FioriNavigationRail |
| Navigation drawer (dismissible) | FioriDismissibleNavigationDrawer |
| Navigation drawer (modal) | FioriModalNavigationDrawer |
| Navigation drawer (permanent) | FioriPermanentNavigationDrawer |
| Tablet side drawer | FioriTabletDrawer |
Compose-Only Components (No View-Based Equivalent)¶
These components are new in the Compose SDK and have no View-based equivalent. No migration is needed, but they are useful when adding new features.
| Component | Description |
|---|---|
FioriPageHeader / FioriPageHeaderPager |
Rich page-level header with pager support |
FioriCardCell / FioriCardCellList |
Card-style object cell |
FioriCalendar |
Full calendar picker |
DatePicker |
Standalone date picker |
FioriRating |
Star rating input |
FioriStepper |
Numeric increment/decrement input |
FioriIllustratedMessage |
Empty-state illustration + message |
InlineNotice |
Inline notification/alert strip |
FioriAlertDialog |
Styled alert dialog |
FioriDropdownMenu |
Overflow dropdown menu |
ListPicker / ListPickerDialog |
Selection list with search |
FioriMarkdownText / FioriText |
Markdown rendering |
FioriNativeFileViewer / FioriMediaPlayer |
In-app file/media viewing |
FioriPDFViewer |
In-app PDF viewer |
StepperProgress |
Step-by-step progress indicator |
PersistentFooter / SingleActionFooter / RelatedActionsFooter |
Footer action bars |
FioriNumericKpi / FioriProgressViewKpi |
KPI display variants |
FioriStatusInfoLabel |
Rich status label with icons |
FioriScaffold |
Full-page scaffold wrapping toolbar + content |
Components with No Compose Equivalent (Yet)¶
The following View-based components do not yet have a Compose equivalent in the SDK.
| View-Based Component | Notes |
|---|---|
BarChartView / FioriBarChart |
No chart components in Compose SDK |
ColumnChartView |
No chart components in Compose SDK |
LineChartView / FioriLineChart |
No chart components in Compose SDK |
DonutChartView |
No chart components in Compose SDK |
ScatterChartView |
No chart components in Compose SDK |
ChartCardView |
No chart card component in Compose SDK; composite view combining chart plots with header/legend |
HierarchyView / HierarchyObjectCell |
No hierarchy component in Compose SDK |
TimelineView / TimelineCellView |
No timeline component in Compose SDK |
GoogleFioriMapView / EsriFioriMapView |
No map components in Compose SDK |
SectionedRecyclerViewAdapter |
Layout helper for sectioned RecyclerView; no direct equivalent — use LazyColumn with section grouping in Compose |
Onboarding screens (ActivationScreen, SetPasscodeScreen, etc.) |
Use Onboarding SDK separately |
Last update: August 24, 2026