SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
0 likes147 views
Explore how AI in SAP Fiori apps enhances productivity and collaboration. Learn best practices for SAPUI5, Fiori elements, and tools to build enterprise-grade apps efficiently. Discover practical tips to deploy apps quickly, leveraging AI, and bring your questions for a deep dive into innovative solutions.
SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
- 1. Enhancing User Experience with SAP Fiori and AI ERP1612 Peter Spielvogel Cloud ERP UX Foundation, SAP May 2025
- 2. My goal today is to help you accelerate your SAP Fiori journey Three things to remember about how SAP Fiori and AI are connected 1. SAP Fiori is a modern user experience with embedded AI 2. You have options on how to implement the SAP Fiori UX 3. We provide AI-assisted tools to simplify building SAP Fiori apps
- 3. SAP Fiori is a modern user experience with embedded AI
- 4. 4 SAP S/4HANA (on-prem) Use available SAP Fiori apps or build your own SAP Cloud ERP Private (SAP S/4HANA Cloud Private Edition) Implement SAP Fiori at your own pace SAP Cloud ERP (SAP S/4HANA Cloud Public Edition) Run SAP Fiori as the standard user experience SAP Fiori is available wherever you are
- 5. 5 SAP Fiori has multiple meanings SAP Fiori Design Guidelines SAP Fiori Design Guidelines My Home / SAP Start / SAP Build Work Zone SAP Fiori tools SAP Mobile Start SAP Mobile Development Kit Joule UX in Products Tools & Technologies Design System SAPUI5 SAP Fiori elements SAP Web Components SAP Screen Personas (for Classic UIs) SAP BTP SDK for iOS SAP BTP SDK for Android AI Foundation on SAP BTP SAP Build Code SAP Business Application Studio … Web Native Mobile Conversational UX Values, Principles & Practices Design Language, Foundations, Components, Patterns etc.
- 6. 6 Demo SAP Fiori in SAP Cloud ERP My Home o Situations and To-Dos o Recommended apps – add to list o Creating insights cards using embedded AI o Creating insights cards using Joule SAP Fiori apps o List report with embedded AI easy filter o Add card to My Home o Collaboration options o Object page with embedded AI smart summarization
- 7. You have options on how to implement the SAP Fiori UX
- 8. 8 Is a standard SAP Fiori app available? Usable without changes? SAP Fiori Use as is Is a classic transaction available? Tight SAP S/4HANA integration? Usable without changes? Are basic adjustments sufficient? SAP Fiori Adapt UI SAP Fiori SAPUI5 Adaptation Project Classic App SAPGUI for HTML Classic App Adapt UI SAP Fiori App SAP S/4HANA Cloud, ABAP environment SAP Fiori App with ABAP or CAP Side-by-side app in BTP Freestyle SAPUI5 with ABAP or CAP Use SAP Fiori apps out of the box, extend, and/or build your own Out of the box app No Key user extensibility Developer extensibility on-stack SAP Fiori layout? Developer extensibility side-by-side on BTP Yes No Yes Yes No Yes No No Yes Business requirement Yes On-stack app in SAP S/4HANA Yes No No Build a new custom app
- 9. 9 Create last-mile capabilities to: • Respond quickly to new market opportunities • Create differentiation through innovation • Complement SAP’s offerings for your specific industry • Drive operational excellence and efficiencies • Use AI to accelerate decisions Building SAP Fiori apps makes your business more agile
- 10. 10 Enables Enterprise Readiness Give your business users the enterprise-grade functionality they expect without having to develop it yourself. Drives UX Consistency Spend more time on the business logic to implement business needs and less time coding the UI since the framework provides the UI. Boosts Developer Productivity Build SAP Fiori apps faster and more easily than manually coding by using the same framework that SAP uses. SAP Fiori elements makes it faster and easier to build SAPUI5 apps
- 11. 11 Designer • Easy way to align with SAP Fiori design system • Includes flexibility to customize to satisfy different stakeholders • Facilitates communication between developers and business managers • Simplifies compliance with corporate requirements Developer • Development framework based on SAPUI5 • Uses industry-standard OData protocol to access data in SAP systems • Relies on annotations to define data relationships • Reduces UI coding significantly Business manager • Accelerator to build SAP Fiori apps using modular building blocks • Extensible to address unique customer business requirements • Creates apps that match appearance and functionality of apps that SAP ships • Fulfills enterprise requirements such as accessibility and security SAP Fiori elements benefits multiple roles in your organization
- 12. 12 SAP Fiori elements boosts developer productivity List report page | Display business objects Object page | Manage business objects Overview page | Review business relevant data Building blocks provide flexibility to create layouts that fit your business requirements Floorplans combine building blocks to provide common layouts
- 13. 13 13 PUBLIC SAP Fiori elements drives UX consistency UX Consistency includes • Look and feel colors, icons, fonts, dimensions, motion design • Controls and floorplans UI components, layout • Behaviors and interactions save, cancel, filtering, sorting, confirmation dialogs, etc.
- 14. 14 SAP Fiori elements enables enterprise-ready apps out of the box Personalization Export to Excel Object details Variant management Data lists Filtering Actions Sorting Search Enterprise readiness includes ✓Accessibility ✓Internationalization ✓Mobile compatibility ✓Responsiveness ✓Performance optimizations ✓Integration ✓Security checks ✓Lifecycle stability ✓Test automation support ✓And more Collaboration
- 15. 15 SAP Fiori is much more than a pretty interface SAP Fiori user experience Connection to back-end data Broad ecosystem
- 16. 16 We offer several ways to build SAPUI5 apps. These are AND not OR. FLOORPLANS Collections of building blocks into common patterns • Combine building blocks for more complex designs • Match look and feel of apps that SAP ships BUILDING BLOCKS Fast, easy, cost-effective way to build SAP Fiori apps • Speed development by using pre-built blocks • Reduce time, coding to develop and maintain apps SAPUI5 CONTROLS Full control of every item on the screen • Allow complete customization of your app • Shift more maintenance of the app to the development team Balance of Efficiency and Flexibility Full Flexibility SAP Fiori elements Freestyle SAPUI5
- 17. We provide AI-assisted tools to simplify building SAP Fiori apps
- 18. 18 SAP Build Code includes AI to make application development easier and faster Tailored for SAP development Supercharged with generative AI development Enhanced fusion development Generative AI-powered app development Turnkey development solution including SAP best practices Guided experiences, templates to quickly build full stack, back-end, and mobile apps Prebuilt integration with SAP and non-SAP systems Trusted security for authentication, authorization, and data protection Extensibility for SAP S/4HANA and other systems Secure collaboration between developers and business users App composability across SAP Build and ABAP solutions Unified governance and simplified application lifecycle management
- 19. 19 Generates the project environment for development Provides step-by-step development instructions and generates code snippets Allows editing of the app structure: pages, content, properties, and navigation Delivers code completion using a language server protocol for annotations Provides preview of web app in the browser either with mock data or live data ? Offers troubleshooting tips (open source) Pre-integrated into SAP Business Application Studio, the SAP Build Code development environment SAP Fiori tools simplifies building SAP Fiori elements and freestyle SAPUI5 apps Creates apps from business requirement documents or images using GenAI
- 20. 20 Upload your requirements and generate a new application without writing a single line of code • Generate SAP Fiori apps from business requirements in text, sketches, or mockups • Map patterns and requirements to SAP Fiori elements building blocks and floorplans with generative AI • Convert input into full SAP Fiori application with CAP project High-fidelity Figma screenshot Sketch on paper/whiteboard Business requirements in text SAP Fiori tools includes Project Accelerator AI to accelerate development Click here for a demo
- 21. 21 Demo Using AI to generate SAP Fiori apps SAP Build Code SAP Fiori tools AI
- 22. 22 • Identifies implementation details for the requested change based on natural language input • Follows up on user request if more details are needed to execute it or comes up with the proposal • Supports annotation and manifest-based enhancements for the existing SAP Fiori elements apps • Updates necessary services and schemas for apps generated with the Project Accelerator for CAP ChatAI lets you update SAP Fiori elements apps with a chat-like interface
- 23. We have many ways for you to learn more about SAP Fiori
- 24. 24 24 PUBLIC Topics pages on the SAP Community • SAPUI5 • SAP Fiori elements • SAP Fiori tools • SAP Build Code • Cloud Application Programming • ABAP (includes RAP) Other resources • Flexible Programming Model Explorer • SAP Fiori development newsletter • SAP Fiori design guidelines If you prefer to learn by reading
- 25. 25 25 PUBLIC SAP Learning: Developing and Extending SAP Fiori Elements Apps SAP Learning: Getting Started w/In-App Extensibility in SAP S/4HANA TechEd 2024: Enabling new, AI-driven interactions in SAP S/4HANA Cloud with SAP Fiori UI5con 2024: Adding AI to SAP Fiori elements apps at both design time and runtime TechEd 2023 lecture: Discover New Capabilities of SAPUI5 with Pro- Code Tools TechEd 2023 lecture: Develop SAPUI5 Applications with Pro-Code Tools and SAP Best Practices TechEd 2023 hands-on: Boost Your Productivity In Developing SAPUI5 apps With SAP Fiori Tools If you prefer to learn by watching recordings
- 26. 26 26 PUBLIC Develop Extensions Using SAP S/4HANA Cloud, ABAP Environment Develop an SAP Fiori Elements App based on a CAP OData V4 Service Create an SAP S/4HANA extension app in 60 minutes Create an SAP Fiori Elements-Based UI Create a Full-Stack SAP Fiori Application with Joule in SAP Build Code Work with SAPUI5 Adaptation Projects to Make Changes and Extend the Source Code of an Application Variant of an SAP Fiori Application in SAP S/4HANA Cloud Public Edition If you prefer to learn through hands-on exercises
- 27. 27 27 PUBLIC Join our monthly SAP Fiori development roundtable 2nd Wednesday of each month 8am Pacific, 11am Eastern, 17:00 CET More info: https://community.sap.com/t5/technology-blogs-by- sap/peer-to-peer-learning-at-the-sap-fiori-elements-and-sap-fiori- tools/ba-p/13513361 Sign up: https://tinyurl.com/elementsroundtable If you prefer to learn from your peers
- 28. Recap: three things to remember about how SAP Fiori and AI are connected 1. SAP Fiori is a modern user experience with embedded AI 2. You have options on how to implement the SAP Fiori UX 3. We provide AI-assisted tools to simplify building SAP Fiori apps
- 29. Thank you for attending this presentation ERP1612 Enhancing User Experience with SAP Fiori and AI