Loading...
Loading...
SAP Fiori design guidelines for building enterprise applications. Use this skill when designing, building, or reviewing SAP Fiori applications, implementing SAPUI5 or UI5 Web Components, working with SAP enterprise UX patterns, or needing guidance on buttons, forms, tables, object pages, list reports, navigation, messaging, colors, typography, accessibility, AI/Joule integration, or any SAP Fiori UI element. Triggers on mentions of Fiori, SAPUI5, UI5, SAP UX, SAP design system, or enterprise application design following SAP standards.
npx skill4agent add sap/ai-skills-library sap-fiori-guidelines| Technology | Use Case |
|---|---|
| SAPUI5 | Full SAP Fiori applications, SAP BTP, S/4HANA |
| UI5 Web Components | Framework-agnostic, React/Vue/Angular integration |
| SAP Fiori Elements | Metadata-driven apps with OData services |
| Reference | Contents |
|---|---|
| Buttons, links, toggle buttons, menu buttons |
| Input fields, selects, checkboxes, radio buttons, sliders, date/time pickers, filter bar |
| Panels, cards, dialogs, popovers, toolbars, forms, shell bar, user menu, notification center |
| Avatars, progress indicators, busy indicators, illustrated messages |
| Responsive tables, grid tables, analytical tables, grid lists, lists |
| Icon tab bar, segmented button, side navigation, shell search |
| Message strips, message strip web component |
| AI button, AI notice, AI writing assistant, AI acknowledgment, guided prompts, quick prompts, regenerate, home page banner |
| Upload set with table plugin |
| Reference | Contents |
|---|---|
| Object page, list report, analytical list page, overview page, dynamic page layout, page header |
| Reference | Contents |
|---|---|
| Colors, typography, iconography, theming, content density |
| States, cursors, screen reader support |
| UX writing, UI text guidelines |
| Navigation, messaging, object handling, action placement |
| AI design patterns, Joule assistant, situation handling, AI guidelines |
| Fiori launchpad, integration patterns |
| Reference | Contents |
|---|---|
| Smart templates, list report, object page, table features, AI input assistance |
| S/4HANA specific design: navigation menu, product home page, AI error explanation |
| Type | Usage |
|---|---|
| Emphasized | Primary action - one per page/dialog |
| Default/Ghost | Secondary actions |
| Transparent | Toolbar actions, low emphasis |
| Accept (green) | Positive semantic actions (Approve, Accept) |
| Reject (red) | Negative semantic actions (Reject, Delete) |
| Color | Meaning | Usage |
|---|---|---|
| Neutral | Default state | Regular UI elements |
| Positive (Green) | Success, good status | Approval, completion |
| Critical (Orange) | Warning | Needs attention |
| Negative (Red) | Error, bad status | Rejection, errors |
| Information (Blue) | Informational highlight | Neutral information |
| Type | Usage |
|---|---|
| Error | Prevents task completion, requires user action |
| Warning | Potential issue, user can proceed |
| Success | Confirms completed action |
| Information | Neutral information |
| Pattern | When to Use |
|---|---|
| Drill-down | Navigate to object details with back navigation |
| Full-screen | Replace current view entirely |
| Flexible Column Layout | Master-detail views in columns |
| Dialog/Popover | Temporary overlay for quick tasks |
| Component | When to Use |
|---|---|
| AI Button | Trigger AI-powered actions |
| AI Acknowledgment | Show AI contribution transparency |
| Guided Prompts | Help users formulate AI requests |
| Quick Prompts | Provide predefined AI interaction shortcuts |
| Regenerate | Allow users to request new AI-generated content |
| AI Writing Assistant | Inline AI text assistance |
| Local AI Notice | Inform users about on-device AI processing |