Subject: SAP-Fiori-Elements
Field: SAP UX / UI Design and Development
SAP Fiori Elements simplifies application development by providing pre-built templates that generate consistent, efficient, and role-based SAP Fiori apps using metadata-driven annotations. One of the key aspects for developers and end users alike is understanding how to navigate within these standardized apps effectively. This article provides a practical guide to navigating SAP Fiori Elements app templates, ensuring a smooth user experience while leveraging the framework's built-in functionalities.
SAP Fiori Elements supports several app templates optimized for common business scenarios:
- List Report: Displays a list of items with filtering and search capabilities.
- Object Page: Provides detailed information on a single item.
- Overview Page: Presents an aggregated dashboard view using cards.
- Analytical List Page: Combines analytical charts with lists for exploration.
- Worklist: Shows tasks or work items that need user action.
Understanding how to navigate these templates helps users access relevant information quickly and efficiently.
¶ 1. Global Navigation and App Header
At the top of each app, the App Header provides:
- The app title and branding
- Global actions (e.g., create, edit, delete)
- Search and filter triggers (depending on the app template)
- User menu for settings and help
Users start their journey here and can access general app-wide features.
¶ 2. Filter Bar and Search
In templates like List Report and Analytical List Page, the Filter Bar allows users to narrow down displayed data based on criteria such as date ranges, categories, or statuses.
- The Search Field enables keyword searches across relevant data.
- Saved filters and personalization options often allow quick reuse of common queries.
The primary area of data presentation is typically a smart table or list control:
- Columns can be sorted and grouped.
- Inline actions allow users to perform quick edits or launch dialogs.
- Pagination and infinite scroll ensure efficient handling of large datasets.
Clicking on a list item typically navigates the user to the Object Page for detailed information.
The Object Page is structured with multiple sections and subsections providing comprehensive details about the selected item:
- The Header summarizes key attributes.
- The Anchor Bar on top allows quick jumps to specific sections.
- Actions like edit, share, or delete are accessible via the page header.
- Related objects or linked items may be accessed through embedded navigation or tabs.
The Overview Page uses cards to represent different KPIs, lists, or charts:
- Clicking on a card usually drills down into detailed reports or transactional apps.
- Cards can be personalized or rearranged by users.
- Navigation between cards enables multi-faceted insights at a glance.
¶ 6. Breadcrumbs and Back Navigation
Consistent breadcrumbs and back buttons allow users to trace their navigation path and easily return to previous screens without losing context.
- Enables cross-app navigation based on annotations.
- For example, from a sales order list, users can jump directly to a related customer’s overview page.
¶ Facet and Tab Navigation
- Tabs within Object Pages group related information logically.
- Facets allow detailed data segmentation without cluttering the UI.
¶ Keyboard and Accessibility Support
- SAP Fiori Elements apps support keyboard shortcuts and are compliant with accessibility standards, ensuring smooth navigation for all users.
- Familiarize with App Structure: Understand template-specific layouts to locate information quickly.
- Use Filter and Search Efficiently: Leverage saved variants and smart filters for repeatable tasks.
- Utilize Smart Navigation: Follow links and related object navigation to explore connected data.
- Personalize Views: Where available, customize columns, filters, and card layouts for your workflow.
- Leverage Help and Documentation: Use embedded help features for guidance on complex functionalities.
Navigating SAP Fiori Elements app templates is intuitive once users and developers understand the standardized components and interaction patterns. These templates are designed to deliver consistent, efficient, and context-aware navigation experiences across SAP applications. Mastery of navigation within these apps leads to enhanced productivity and better decision-making in business processes.