UI5Con 2025 - Get to Know Your UI5 Tooling
Download as PPTX, PDF•0 likes•57 views
Getting started with UI5 can be tricky with so many tooling options out there. This session will help you get a grip on the basics of UI5 tooling, including the different extensions available and which tasks and middleware to use for what. We’ll also compare open-source UI5 extensions with their counterparts in Fiori tooling. Plus, we’ll cover how to run your UI5 apps, use custom libraries locally, and configure deployments to environments like ABAP vs BTP. Whether you’re just starting out or need a clearer approach, this session will give you the foundation to confidently build, extend, and deploy your UI5 apps.
UI5Con 2025 - Get to Know Your UI5 Tooling
- 1. 8. July 2025 Get to Know Your Tooling Wouter Lemaire Independent Consultant
- 2. 2
- 3. 3 UI5 Tooling vs Fiori tooling UI5 Tooling UI5 Community Plugins Fiori Tooling
- 4. 4 Fiori tooling - @sap/ux-ui5-tooling UI5 Community plugins fiori-tools-appreload ui5-middleware-livereload fiori-tools-proxy ui5-middleware-simpleproxy fiori-tools-servestatic ui5-middleware-servestatic fiori-tools-preview deploy-to-abap ui5-task-nwabap-deployer nwabap-ui5uploader ui5-tooling-modules ui5-tooling-approuter https://www.npmjs.com/package/@sap/ux-ui 5-tooling https://github.com/ui5-community/ui5-ecosy stem-showcase/tree/main/packages
- 6. 6 Fiori tooling EasyUI5 Usability UI & CLI CLI only Change request Influence ticket GitHub Pull Request License SAP / OpenSource OpenSource Version Latest SAP released Latest UI5 TypeScript support Yes Yes Fiori Elements support Yes No Integration datasource ABAP system, BTP CF, … OData only Library support No Yes Controls support No Yes Deployment support BTP & ABAP Limited Bring Your Own Generator No UI5 Community
- 7. 7 Connecting a library Use the UI5 tooling
- 8. 8 • For TypeScript build dist required • Add config serve-static –Local or deployed library UI5/Fiori tooling without NPM
- 9. 9 • Out of the box (no plugin) • Add package as devdependency –"be.wl.tooling.ui5.library": "file:../be.wl.tooling.ui5.library“ • TypeScript –Change config to run on dist folder –! Build required –! Doesn’t handle live transpile UI5 tooling with NPM
- 11. 11 • For TypeScript build dist required • Add config serve-static –Local or deployed component UI5/Fiori tooling without NPM
- 12. 12 Install ui5-middleware-ui5 • npm install ui5-middleware-ui5 --save-dev Add dev dependency • "be.wl.tooling.fiori.component": "file:../component“ • Npm I • No Build required! UI5 tooling with NPM
- 13. 13 Use CDN
- 14. 14 • CDN url • Resourceroots –Default path /resources will always go to ui5.sap.com Use CDN
- 15. 15 • Disable ui5 in ui5.yaml Use CDN
- 16. 16 • Use new path in servestatic –Default path /resources will always go to ui5.sap.com Use CDN
- 17. 17 • Run from index-cdn.html Use CDN
- 18. 18 01 02 03 Summarized options to run and connect libraries and components Fiori tooling using Serve static UI5 Tooling using npm packages CDN using serve static Run options
- 20. 20 • Install ui5-tooling-modules –https://www.npmjs.com/package/ui5-tooling-modules –npm install ui5-tooling-modules --save-dev • Add ui5 tooling modules middleware • Install package –Eg: npm install decimal.js • Works only for npm setup!
- 21. 21 Deploy
- 22. 22 • Update manifest to remove odata / in manifest • Packages – @sap/ui5-builder-webide-extension not needed anymore – ui5-task-zipper add config relativePaths: true – Mbt • scripts – “build-cf": "ui5 build preload --clean-dest --config ui5-deploy-cf.yaml --include-task=generateCachebusterInfo", – "build-mta":"rimraf resources mta_archives && mbt build --mtar archive", • Additional files – Mta.yaml – Xs-app.json – Xs-security.json • Use cloudfoundry to deploy BTP CloudFoundry
- 23. 23 • / in manifest need to stay • "deploy-abap": "npm run build && fiori deploy --config ui5-deploy-abap.yaml && rimraf archive.zip", ABAP
- 24. 24 Wrap up
- 25. 25 • Don’t use CDN url in index.html npm is the closest to web standards • Fiori tooling is more complete community is more technologically advanced • Auto-reload can be irritating • BAS – “Fiori run” sometimes doesn’t work use ui5 serve –Runs same config different command • Some try to occupy Mars, let’s start understanding the UI5 and Fiori Tooling Tips & Tricks
- 26. Got feedback? Let’s hear it! Get to know your Tooling
- 28. 28 To help you create a clean, consistent, and professional presentation for the UI5con, we’ve developed a custom PowerPoint template. This short guide shows you how to use the template effectively – even if design isn’t your thing. How to Template PowerPoint Guide for UI5con 2025
- 29. 29 This template makes your work easier and your slides look better. You’ll get: • A consistent and modern design • Predefined layouts for common use cases (text, visuals, diagrams, etc.) • A set of icons, mockups and a small slide library • Easy-to-use color styles based on our conference branding 📌 Goal: Better-looking slides and easier slide creation – without extra design effort. Why use the template?
- 30. 30 Use built-in layouts or copy ready-made examples from the slide library. Option A – Copy a slide from the slide library 1. Scroll to the end of the presentation 2. Find the slide you want to reuse 3. Copy (Ctrl+C) and paste (Ctrl+V) it into your deck 4. Replace the sample content with your own Option B – Add a layout from the master 5. Go to Home New Slide 6. Select a layout that fits your content (e.g. Title + Content, Image + Text, Two Columns etc.) 7. Insert your content into the placeholders 1. Add new slides with correct layout ✅ This ensures alignment, font consistency, and visual clarity.
- 31. 31 Consistency matters – and PowerPoint helps you with that. Please activate: • View Guides • View Gridlines Use these to align all contents: • Text boxes and bullet points • Images and diagrams • Icons or shapes 📌Do not place elements “freestyle”. Stick to the guides – they keep your layout clean. 2. Use guides and gridlines
- 32. 32 The template includes a color palette aligned with our branding. These colors are already loaded into PowerPoint. Please follow these rules: • Use only the colors from the top row in the color picker (under “Design Colors”) • Colored backgrounds are allowed, but should be used strategically – not on every slide • Avoid making several slides in a row fully colored or overly “loud” 3. Use the right colors
- 33. 33 Colored background slides can be great for highlighting important messages – for example: • Key takeaways • Section transitions • A bold statement or a major insight ⚠️Use them sparingly! If everything is highlighted, nothing stands out. 📌 Best practice: One highlight slide per 10 content slides is a good rule of thumb. 4. Using color for impact
- 34. 34 The template uses predefined font styles to keep your slides visually consistent and easy to read. ✅ Do: • Use only the fonts and sizes defined in the template (they apply automatically when using placeholders). • Stick to the default text styles (e.g. headings, bullet points etc). ⚠️Avoid: • Changing font types manually • Using too many font sizes or weights • Writing long paragraphs – stick to short, scannable points 📌 Tip: If you paste text from somewhere else (e.g. a code editor or website), use “Paste Keep Text Only” to avoid importing unwanted styles. 5. Stay consistent with fonts and text styles
- 35. 35 All image layouts in the template come with placeholders. These help keep image size, position, and alignment consistent across slides. How to insert an image into a placeholder: 1. Click on the image placeholder (e.g. “Insert Image Here”) 2. Go to Insert Picture This Device 3. Choose your image file – PowerPoint will automatically scale and crop it to fit the placeholder shape Using slides with images from the Slide Library: • You can replace the existing image by inserting your image on top of the sample photo • Resize and position your image so it matches the format of the placeholder/example • Once the new image is in place, delete the original placeholder image underneath 6. Add images the right way
- 36. 36 Icons can help structure information visually. The template offers two ways to use them. Option A – Use the built-in icon library: 1. Scroll to the last slides (hidden slides, can be deleted after designing the presentation) 2. Find the icon you need 3. Copy and paste it onto your slide 4. Align it to the grid Option B – Insert icons from PowerPoint: 5. Go to Insert Icons 6. Search for a keyword (e.g. "data", “success", "warning") 7. Choose the icons with thin lines 7. Use icons from the Icon library or PowerPoint ✅ You can use a “Graphic fill” to add colors. All icons should have the same style and visual weight.
- 37. 37 Animations can help emphasize content. Use them very sparingly. Guidelines: • Only use simple transitions like “Fade” • Avoid flashy animations (e.g. Fly In, Bounce, Zoom) • For emphasis, use “Appear” or “Fade In” (never more than one animation per slide element) ✅ Clean and subtle > distracting and flashy 8. Using slide transitions and animations
- 38. 38 Even with the right design tools, content clarity is key. Practical tips: • One message per slide – keep it focused • Use bullet points wisely (no paragraphs) • Support your key ideas with visuals or diagrams • Avoid clutter – white space is your friend 9. Keep slides focused and structured
- 39. 39 📌 To check the design: Try presenting your slides once out loud – this helps spot inconsistencies and flow issues. ✅ Final Slide Checklist ☐ Title slide is filled out and matches the conference format ☐ Colors follow the top-row palette ☐ Layouts are clean and consistent ☐ Text is aligned to guides and gridlines ☐ Icons and images are styled consistently ☐ No “leftover” placeholder text ☐ No broken formatting from copy-paste ☐ Slides look good in full-screen mode ☐ Delete the “How to Template” and Libraby Slides 10. Do a final check
- 40. 40 If you're unsure how to apply any of the above, feel free to reach out to the 👉 UI5con Team: Contact UI5con Team: [email protected] We’re here to help – and we’re excited to see your presentation! Questions?
- 41. 8. July 2025
- 42. 8. July 2025
- 43. 8. July 2025
- 44. 8. July 2025
- 45. 45 Agenda This is slide content 01 This is slide content This is slide content This is slide content 04 03 02
- 50. 50 Headline goes here and here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 51. 51 Headline goes here and here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 52. 52 Headline goes here This is subline content. Subline goes here and here and here. •With bullets of information •And even more information •Keep it short and simple tho •With bullets of information •And even more information •Keep it short and simple tho •With bullets of information •And even more information •Keep it short and simple tho
- 53. 53 Headline goes here and here Headline goes here and here •With bullets of information •And even more information •Keep it short and simple tho •With bullets of information •And even more information •Keep it short and simple tho
- 54. 54 This is slide content •With bullets of information •And even more information •Keep it short and simple tho 01 02 Headline This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 55. 55 This is slide content •With bullets of information •And even more information •Keep it short and simple tho This is slide content •With bullets of information •And even more information •Keep it short and simple tho Headline
- 56. 56 01 02 03 This is subline content. Subline goes here and here and here and so on. This is slide content This is slide content This is slide content Headline
- 57. 57 01 02 03 Headline This is slide content •With bullets of information •And even more information •Keep it short and simple tho This is slide content •With bullets of information •And even more information •Keep it short and simple tho This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 58. 58 This is slide content •With bullets of information •And even more information •Keep it short and simple tho This is slide content •With bullets of information •And even more information •Keep it short and simple tho This is slide content •With bullets of information •And even more information •Keep it short and simple tho Headline
- 59. 59 This is slide content Headline This is slide content This is slide content This is slide content This is slide content 02 03 01 04 05
- 60. 60 This is slide content This is subline content. Subline goes here and here and here and so on. Headline goes here G A B C D E F This is slide content This is slide content This is slide content This is slide content This is slide content This is slide content
- 61. 61 Headline With bullets of information and even more information. With bullets of information and even more information. With bullets of information and even more information. With bullets of information and even more information. With bullets of information and even more information.
- 62. 62 Headline This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 63. 63 Headline goes here and here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 64. 64 Headline This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 65. 65 Headline This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 66. 66 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 67. 67 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 68. 68 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 69. 69 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 70. 70 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 71. 71 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 72. 72 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 73. 73 Headline goes here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 74. 74 Headline goes here Lorem ipsum dolor sit amet, consectetuer adipiscing elit. This is slide content •With bullets of information •And even more information •Keep it short and simple tho
- 75. 75 Headline goes here and here This is slide content •With bullets of information •And even more information •Keep it short and simple tho
Editor's Notes
- #1: Hello everyone and welcome to my session In this session I want to provide you an overview of the available tooling and focus on how to use the tooling in all possible ways for basic actions, from running locally to deployment I noticed over the years that many developers use the tooling without having a good understand how it works and without knowing what it’s capable of. And that some developers are not aware that doing the same thing, for example running an app locally, can be done in different ways.
- #3: Let’s start with the beginning, we have UI5 Tooling, Fiori tooling and UI5 commuityt plugins It is all based on the UI5 tooling and Fiori tooling is basically a set of plugins on top of the UI5 tooling. BUT for many of the plugins of the Fiori tooling we also have UI5 community plugins which do the same thing You can find an overview of all plugins here: https://github.com/ui5-community/ui5-ecosystem-showcase/tree/main/packages
- #4: https://www.npmjs.com/package/@sap/ux-ui5-tooling Just to give you an idea of Fiori plugins compared to the UI5 plugins overlopen van plugins Which one to use? By default, the official SAP generator will use the Fiori tooling but if you use the yeoman generator it will use the UI5 community plugins I would recommend to use the once from the Fiori tooling as this offers you SAP support but in the end they work the same, for community projects you can use the UI5 community plugins but they also have more plugins , like the tooling modules and approuter plugin Not compete but fill the gaps of SAP
- #5: As I mentioned, we have two generators available, the official Fiori generator and the yeoman generator, here I compared them with each other
- #6: Devs struggle, which generator, which tooling, what’s the difference, how to connect a library that works locally and deployed or working with multiple components, I’ll try to clear things out. It is important that you understand the tooling Fiori generator is more complete but easy ui5 is technically more advanced Typescript in beta only in easy ui5