UI5con HYBRID 2022: UI5 Community – Best of UI5 UI5 2022-08-09 | "Best of UI5" has been started as the new entry page for the ui5-community GitHub organization. Its purpose is to lookup any kind of #UI5 projects, be it applications, libraries, custom controls, tooling extensions, middlewares, tasks, Easy UI5 generators, … Everyone will be able to register his/her projects at #BestOfUI5. The projects will be ranked by various information and filterable by important criteria. This should help to find the best suited reuse project for your development needs! Join us to learn more about Best of UI5, how to contribute your projects and the benefits of the #ui5community GitHub organization. Let’s tackle it and help to shape the development experience of the UI5 community! Event: #UI5conHYBDIRD2022Speaker: Marian Zeis | Peter Muessig, SAP---00:00 Introduction00:23 The Origin of the Idea02:08 Demo: Characteristics of Best Of UI5 (bestofui5.org)08:15 Demo: Implementation of Best of UI5 - the Frontend (github.com/ui5-community/bestofui5-website)12:39 Demo: Implementation of Best of UI5 - the Backend (github.com/ui5-community/bestofui5-data)14:42 Next Steps17:58 Call to Action20:18 Questions & Answers21:28 When will Best of UI5 be added to Best of UI5?---ResourcesSlides: openui5.org/ui5con/germany2022/slides/2022-UI5con-1_8-Marian-Zeis-Best_of_UI5.pdf
UI5ers live #29: Bootstrap Evolution, TypeScript Support UI5 2023-09-03 | At the UI5con keynote it has been announced that the TypeScript support for UI5 is available for productive usage. Because there was only a limited time to show the topic, in this UI5ers live episode, Andreas and Peter will explain the new capabilities in more detail.Another interesting topic from the UI5con keynote is the Bootstrap Evolution as part of the Modular Core. Therefore, Jan will join this UI5ers live episode to provide some more insights into the changes of the UI5 core and the opportunities you have utilizing the lightweight bootstrap which is experimentally available in the latest snapshot of OpenUI5._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:10 New Bootstrapping for UI5 & Progress in the Modular Core01:57 Introducing GitHub Repo UI5 Evolution Apps (Reflecting the Old and New UI5 Bootstrap Behavior)03:11 Comparing the Differences Between Old and New Bootstrap11:03 Architectural Design of The New Core13:19 Comparing the Implementation of Configuration of the Old and the New Core16:35 Comparing the Implementation of The Old and The New Core18:36 The Structure of The New Boot23:47 Q/A: Will the Declarative API for Initial Components Continue to Work with The New Bootstrap?24:30 Latest News on TypeScript Support in UI5 (coming with V1.116)26:19 Recent Changes in the UI5 TypeScript Template30:47 Karma Test Handling for UI5 with TypeScript33:49 Writing OPA5 Tests with TypeScript38:07 Handling of UI5 Event Handlers with TypeScript39:32 Handing of Device Class with TypeScript41:00 Recent Changes in UI5 Control Library Development with TypeScript44:04 Q/A: Why Do We Need an _instance_ of the MainPage When Using OPA5 with TypeScript?44:52 Q/A: The „Given, When, Then“ Pattern Is More or Less Set In Stone in the SAP Fiori Elements TestLibrary v4 - What Does This Means for Testing SAP Fiori Elements Apps with TypeScript?46:44 Q/A: Do You Think It’s Possible to Move (In Future) The Tooling to Something Like Vite?47:37 Q/A: I Guess the New Bootstrap Will Improve Especially Apps With Not a Lot of Dependencies. This Will Help Less with SAP Fiori Elements?49:10 Q/A: If You Get Rid of the Core Facade, It Won't be Possible Anymore to Fiddle Around With Any UI5 App Live in the Developer Tools By Using sap.ui.getCore()? 50:27 Closing Words_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Sample apps for ongoing UI5 Evolution activities: github.com/SAP-samples/ui5-evolution-appsBlog Post TypeScript for UI5: “Yay, it’s official!” – and a round-up of recent changes by Andreas Kunz: blogs.sap.com/2023/07/27/typescript-for-ui5-yay-its-official-and-a-round-up-of-recent-changesWriting QUnit and OPA5 Test in TypeScript Tutorial: github.com/SAP-samples/ui5-typescript-tutorial/blob/main/exercises/ex6TypeScript UI5 Example App with Tests: github.com/SAP-samples/ui5-typescript-helloworld/tree/testingTypeScript Tutorial Video: youtube.com/watch?v=CRKNIiXZN6U_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5con 2023: Keynote UI5 2023-08-17 | Tune in and learn about the latest innovations in and around OpenUI5/SAPUI5!Speakers: Stefan BeckPeter Muessig, SAP_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Intro00:55 Key Topics: MDC Library04:06 Key Topics: UI5 Tooling05:22 Key Topics: Google Workspace Support06:15 Key Topics: Web Components07:42 Key Topics: Horizon Design Innovation09:10 Key Topics: TypeScript15:42 Key Topics: Modular Core - Bootstrap Evolution17:00 Demo: Lighthouse Score of the New Bootstrap22:38 Key Topics: UI5 Version 2.031:16 Key Takeaways_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Slides: slideshare.net/PeterMuessig1/ui5con-2023-keynoteMore infos on our website:openui5.org/ui5con/germany2023/index.html
UI5con 2023: UI5 goes Mixed Reality UI5 2023-08-11 | Mixed Reality (XR) is getting more and more drive, and it has a bearing on business software. Large companies even shift their focus in this direction. Such focus comes with a pressing question:- How do we work with software in such a setup?- Sure, you need a UI, but which UI is ready for business?- UI5 is an enterprise-ready UI framework for desktop and mobile apps, but XR is a different beast, with a different user experience, other capabilities, and different interaction patterns. Does that mean that we need a different UI framework – maybe even implement all existing applications anew?Join us on our journey to enhance UI5 with XR support out of the box:Applications don’t have to change anything. They just run on mobile, desktop AND XR devices – sticking true to UI5s promise to “build once, run everywhere” and still use the additional capabilities and experiences XR provides.We created a modular enhancement of existing UI5 controls, allowing each control to be rendered natively in the XR environment. You can use familiar controls in the XR world without any changes.A new way to enable UI5 controls for Mixed Realty has arrived!Speakers: Christian Voshage, SAPUlf Reinecke, SAP_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro00:47 UI5 goes Mixed Reality24:31 Open discussion + Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ More infos on our website:openui5.org/ui5con/germany2023/index.html
UI5con 2023: sap.ui.mdc - A New Library for Smart Controls? UI5 2023-08-11 | The library has been part of the OpenUI5 repository for a few years now. If you wonder what it is about and why we built it, join this talk. It will shed some light on the purpose of the library and why it might be helpful for you. Furthermore, we will describe the architectural approach supported by some examples. We will explain the difference between the smart controls and this library and give an outlook on possible future directions.Speakers: Thomas Gauguin Houghton-Larsen, SAP_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro00:54 sap.ui.mdc - A New Library for Smart Controls?17:00 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Slides: sap-my.sharepoint.com/:b:/p/benedikt_schoelch/EdcOiGauwfNBlRKz8R51M-UBFDMDrBr0p6czG06V3GrxGQ?e=N8BnRPMore infos on our website:openui5.org/ui5con/germany2023/index.html
UI5con 2023: UI5 in multi-framework environments UI5 2023-08-10 | The UI5 framework, although very comprehensive and powerful, especially in enterprise contexts related to SAP, is constantly challenged by, and compared to other popular UI-frameworks like Angular, React, you name it. According to ‘The State of JS 2022’ survey results, you can expect customers to use at least one or two of the top five UI-frameworks in addition to SAP.So, when it comes to (political) decisions which frameworks to use for a project we experienced that often the potentials of UI5 are not clear to everybody involved in the decision-making process.In our recent project history, we were faced with such discussions and challenges a couple of times. We will discuss a couple of those real-life examples to show the audience how we solved those situations in favor of UI5.- What do customers think of SAPUI5 in comparison to other frameworks- Short summary: pros and cons of sapui5 vs other frameworks – when to use what and why- Influence of Company’s Corporate Design- Data Binding is key- Custom controls – how far can you stretch UI5 controls- The Power of FLP Plugins- Fiori guidelines – when to break the chains- There’s more to UI5 than meets the eyeSpeakers:Filip Fahnert, advades GmbHChristoph Kinderknecht, advades GmbH_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 01:16 UI5 in multi-framework environments15:45 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ More infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: MockServer for OData v4 Applications UI5 2023-08-10 | Even though the official documentation still tells us there is no comparable mockserver for OData v4 as we have for OData v2, there is an Open-Source! and (in my opinion) even better mockserver available.In this talk, you will learn what the benefits of mock servers in general are, how to setup and use the mockserver v4 in your applications and how you can influence entity set behavior according to your needs.Speaker:Simon Coen, j&s-soft GmbH_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 01:38 MockServer for OData v4 Applications20:12 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:GitHub: github.com/Siolto/UI5Con2023-MockServerV4/tree/mainMore infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: Modern and Type-Safe OData Handling - odata2ts UI5 2023-08-10 | odata2ts was born in the context of a React and UI5-Webcomponents based application and the strong desire to handle OData queries in a type-safe way. As its name suggests odata2ts is first and foremost a generator. It uses the metadata description (EDMX) of V2 or V4 OData services to produce different kinds of TypeScript-based artefacts: From interfaces representing entities to a full-fledged domain-specific OData client.We show how odata2ts works, how to integrate it into your UI5 build process and explain its basic as well as some of the more advanced configuration options. We then turn to three main use cases for odata2ts within UI5:- using typed entity models- using the type-safe query builder- using the full-fledged clientFinally, we teaser the combination with ui5-mobx, which allows for preserving all type information when it comes down to managing state in UI5.Speaker:Hubert Drecker, Cpro Conlog GmbH_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 01:03 Modern and Type-Safe OData Handling - odata2ts17:50 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:GitHub: github.com/odata2ts/odata2tsDocumentation: odata2ts.github.ioSlides: cprogruppe-my.sharepoint.com/:b:/g/personal/hubert_drecker_cpro-conlog_com/EX7Z91jw5FZDissmuuk_854Be5LguvjIlbaJSvqJwETlmw?e=2B0t4IDemo: github.com/odata2ts/playgroundMore infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: Excel Upload in UI5 made easy with Open Source UI5 2023-08-09 | For many in the ERP sector, Excel is one of the most important tools.Therefore, integration into existing processes and UI5 is an important requirement.This can now be easily implemented with the Open Source component UI5 Excel Upload.The special thing about this is that the Excel file is not sent to the backend, but the data is extracted from the file and the data is sent to the backend via the standard UI5 APIs.During the implementation, special attention was paid to the developer experience, easy integration and the use of the latest tools and possibilities.Problems that occur in many UI5 developments were addressed and solved like:- Large shared libraries that are difficult to maintain (using version in namespaces for libraries and reuse components)- Compatibility with all maintenance UI5 versions- Integration in the different Fiori scenarios (Fiori Elements, Freestyle OData V2/V4, Draft/Non Draft)- Tests with wdi5- Deployment options- Integration of external controls and components via npm- Why open source and the ui5 community helped hereThis talk will go into detail on how these issues were addressed and solved as well as a live demo on how the component can be used.Speakers: Marian Zeis, Independent SAP developerPeter Muessig, SAP_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro01:24 Excel Upload in UI5 made easy with Open Source Talk40:25 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Slides: github.com/marianfoo/marianfoo/blob/main/2023_UI5con_excelupload_component.pdfLive Demo: livedemo.spreadsheet-importer.comGitHub Repo: github.com/marianfoo/ui5-cc-spreadsheetimporterDocumentation: spreadsheet-importer.comExample Apps: github.com/marianfoo/ui5-cc-spreadsheetimporter/tree/main/examples/packagesLanding Page: spreadsheet-importer.comMore infos on our website:openui5.org/ui5con/germany2023/index.html
UI5con 2023: Time Zone Support in OpenUI5 UI5 2023-08-09 | There are different use cases for the usage of time zones, from displaying a specific timestamp in a specific time zone up to using a user specified time zone for example for all applications running in Fiori Launchpad.Application developers have to differentiate between dates and times which are time zone independent and timestamps that can be displayed in different time zones.In this presentation we explain the differences between dates, times and timestamps and how to use them best in UI5 applications with the corresponding OData data types, data binding and the corresponding controls.Using a configured time zone that is different to the browser time zone may require an adjustment of the application code, if it uses JavaScript Date objects. We show how to prepare the application code to be ready for using a configured time zone.Speakers:Sven Bernhard, SAPViktor Sperling, SAP_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome and Intro01:35 Time Zone Support in OpenUI5 Talk 31:12 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:GitHub: github.com/viktorsperling/UI5conDemoSlides: github.com/viktorsperling/UI5conDemo/raw/main/2023_UI5con_Time%20Zone%20Support%20in%20OpenUI5_Sperling%2CBernhard.pptxMore infos on our website:openui5.org/ui5con/germany2023/index.html
UI5con 2023: Turning State Management Inside-Out – ui5-mobx UI5 2023-08-09 | Reviving work and ideas of early 2017, ui5-mobx brings the power of Mobx (back) into UI5. It provides a special model implementation which takes care of binding (two-way binding is also supported). This MobxModel acts as proxy, so you initialize it once and then never directly interact with it again. And here we get to the gist: With Mobx you control the state yourself. And since you control state directly, you preserve the types which are otherwise lost when using regular models, thus making it a perfect fit for TypeScript.In this short presentation we dive into reactive state management with Mobx, see a simple UI5 TypeScript-based app in action using this approach and discuss some patterns to organize your state. We highlight the benefit of derivations / computed values, which allow for complex calculations that are automatically recomputed when your state changes. Finally, we combine Mobx with odata2ts to load state from an OData service.Speaker:Hubert Drecker, Cpro Conlog GmbH_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 01:03 Turning State Management Inside-Out – ui5-mobx17:50 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:GitHub: github.com/cpro-js/ui5-mobxSlides: slideshare.net/PatricKsinsik/ui5con-odata-progress-regarding-createDemo: github.com/odata2ts/playgroundMore infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: UI5 Integration Cards in Action UI5 2023-08-08 | Integration Cards are reusable, technology-agnostic, and easily configurable UI Widgets, which makes them a perfect choice for the home page of different products. As of today we have many new handy features and Integration Cards are now productively adopted across SAP products like SAP Build Work Zone, SAP SuccessFactors, SAP S/4HANA Cloud all powered by SAP BTP._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome and Intro01:53 UI5 Integration Cards Session Talk36:52 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ More infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: Better sleep thru test automation with wdi5, BrowserStack & GitHub Actions UI5 2023-08-08 | We will show how we at Neptune Software set-up CI/CD pipelines with GitHub Actions which include automatic end-to-end tests e.g. for different browsers, operating systems and even mobile devices with the open source framework wdi5 and the cross-browser-testing-platform BrowserStack.We will show how this set-up helps us to test all our different authentication and SSO scenarios every night without human interaction. Caution: this presentation will contain live-demos ;-)Speakers: Thorsten Wolf, Neptune SoftwareMartin Fischer, Neptune Software_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro01:20 Better sleep thru automation with wdi5, BrowserStack & GitHub actions33:38 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Slides: portal.neptune-software.com/public/app/event_media?event=ui5con_2023&doc=e2e_test_talkMore infos on our website:openui5.org/ui5con/germany2023/index.html
UI5con 2023: OData V4 / V2 progress regarding create: Inline creation rows, deep create UI5 2023-08-08 | We present two major new features implemented both for OData V4 and OData V2:- Inline creation rows: Allow for a quick creation of new entries within a table without separate forms or popups.- Deep create: Allows to create one or more subentities for a navigation property of a newly created parent entity with a single OData request.This session is for OData V4 and OData V2 model; the APIs for these features are mostly identical.Speakers:Patric Ksinsik, SAPUwe Reeder, SAP_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 00:58 OData V4 / V2 progress regarding create: Inline creation rows, deep create20:00 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Slides: slideshare.net/PatricKsinsik/ui5con-odata-progress-regarding-createMore infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: Panel discussion - When to use which UI framework/tool in SAP-verse UI5 2023-08-07 | The UI landscape in the SAP-verse has expanded. This became even more evident while Marius and me were writing our book on the subject matter. There are (at the least)• OpenUI5• SAPUI5• the Fundamental library• Fiori Elements• UI5 WebComponents for $frameworkIn this panel discussion, getting together experts from each field and having them discuss the Unique Selling Points of each tool/framework should give the audience a better understanding “where we’re at” in terms of UI development in SAP-land.The agenda of this panel discussion should not only foster free talk amongst the participants, but we’d also like to relay questions from both the auditorium on-site an online and bring them to the panelists.We’d like to start the panel with giving each panelists 1 min to pitch their tool/framework - and which contender they see “closest” to them. Then moderate into a discussion with subsequent (prepped) questions (e.g. “why and when would you choose SAPUI5 over OpenUI5?”) and start the interaction with the audience.Panelists:Volker Buzek, j&s-soft GmbHWouter Lemaire, Independent ConsultantMarius Obert, TwiliioMarian Zeis, Independent SAP developerSimon Coen, j&s-soft GmbH_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 01:58 Panel discussion13:38 Q&AMore infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: How far can we push performance UI5 2023-08-07 | In this session we will take a look at a UI5 application that reaches a lighthouse performance score of 90+. The application is built with UI5 Web Components and uses DIY packages for data binding and i18n - paying tribute to core principles of UI5 while taking an "as lightweight as possible" approach.Speaker:Nicolai Schoenteich_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 01:00 How far can we push performance Talk15:45 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:GitHub Repo: github.com/SAP-samples/ui5-webcomponents-data-binding-exampleMore infos on our website: openui5.org/ui5con/germany2023
UI5con 2023: Apply your brand with UI theme designer UI5 2023-08-07 | Your brand is your direct connection to your customers. Why not bring it direct to them with all your applications?You think this will cost you a lot of time and effort?That’s wrong. With the UI theme designer you can easily customize your application within minutes.Join this session to get a quick overview of the UI theme designer and learn how you can setup your first custom theme.Speaker:David Klug, SAP_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters: 00:00 Welcome and Intro 00:36 Apply your brand with UI theme designer18:02 Q&A_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ More infos on our website: openui5.org/ui5con/germany2023
UI5ers live #28: ui5-test-runner and Integration Cards Updates UI5 2023-08-03 | In this episode we reunion with Arnaud Buchholz, an expert in UI5 and particularly in UI5 testing. He is a frequent speaker at conferences, including UI5con 2021 where he introduced a new test runner for UI5 applications that enables the parallel execution of tests. Since then, Arnaud has released two new versions of his ui5-test-runner, which have successfully addressed many initial challenges, such as integrating it with the UI5 Tooling. In this episode, Arnaud will demonstrate the new capabilities of the test runner and discuss his plans for future releases. In addition, Alexandar Mitsev provides updates on the development of integration cards. He will showcase how to create and embed an integration card into SAP Work Zone as a fully integrated end-to-end sample._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:25 Announcing availability of metadata-driven control library04:49 About Testing in UI507:21 Introduction to ui5-test-runner07:38 Demo: Installing and Using ui5-test-runner10:43 Demo: Monitoring, Coverage and Parallelism of ui5-test-runner12:22 New features of ui5-test-runner V215:24 Demo: Test Feedback of ui5-test-runner16:19 Demo: Remote Mode of ui5-test-runner17:55 Q/A: Since Karma is deprecated, what alternative is recommended?19:09 Q/A: Are there any plans to move UI5 from the QUnit/Sinon to something more modern (like jest)?21:33 Q/A: Do you have a example running the ui5-test-runner in github actions?24:03 Demo: Create A Table Card on BTP and Integrating It to SAP Work Zone28:30 Demo: Request Data in Table Card32:34 Demo: Format Data in Table Card34:54 Demo: Add Image to Row in Table Card35:42 Demo: Add Configuration Options to a Card36:45 Demo: Deploy Card to SAP Work Zone40:43 Closing Words_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Documentation for metadata-driven control library (sap.ui.mdc): sdk.openui5.org/topic/1dd2aa91115d43409452a271d11be95bui5-test-runner Presentation: arnaudbuchholz.github.io/decks/UI5%20Test%20Runner%20v3.html#Ui5-test-runner Sepo: github.com/ArnaudBuchholz/ui5-test-runnerIntegration Card Explorer: ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
Learn to use TypeScript with UI5 [Tutorial] UI5 2023-07-25 | If you know UI5 app development, but want to learn how to do it in TypeScript, this tutorial is for you. In 100 minutes, Andreas Kunz from the UI5 development team not only guides you through the UI5 TypeScript Tutorial, but also adds hints how to avoid pitfalls and provides some background information.You can follow along on your own machine, the only prerequisites are NodeJS (v18.0+) and a TypeScript-capable code editor like Visual Studio Code. The exercises can be found at github.com/SAP-samples/ui5-typescript-tutorial.Overall, the video tutorial covers the following aspects:- Short TypeScript Intro- Create TypeScript app+setup from Easy UI5 Template- Develop a weather app- Use third-party packages from NPM- Develop a Custom Control- Testing_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome and Intro01:49 TypeScript Overview06:28 Tutorial Start08:00 Exercise 0 – Get Prepared (Yeoman + Easy UI5)09:24 Exercise 1 – Create TypeScript Application from Template and run it12:12 Explanation of the Code (Exercise 2.1 handled early)17:35 Exercise 1.3 – Run the App20:00 Exercise 2 – Create the User Interface and Load Data22:50 Exercise 2.3 – Load Data27:09 Exercise 2.4 – Linting31:44 Exercise 2.5 – Extend the User Interface35:30 Exercise 3 – React on User Input37:39 Exercise 3.2 – Add Controller Code39:12 Using the new Event Types46:27 Exercise 4 – Use Third-Party NPM Packages50:37 Exercise 4.2 – Adding the Third-Party Package54:40 Exercise 4.3 Using the Third-Party Package1:03:22 Exercise 5 – Create and Use a Custom Control1:09:52 Exercise 5.2 – Use the New Control in the UI1:12:04 Exercise 5.3 – Generate Control Interface with the ts-interface-generator1:19:10 Exercise 6 – Testing1:23:03 Exercise 6.1 – Fixing the QUnit Test1:26:38 Exercise 6.2 – Fixing the OPA5 Journey1:35:07 Exercise 6.3 – Executing the Tests Using Karma; Code Coverage1:38:21 Final Words _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:The UI5 TypeScript Tutorial on GitHub: github.com/SAP-samples/ui5-typescript-tutorialThe exact version of the tutorial used in the Video: github.com/SAP-samples/ui5-typescript-tutorial/blob/4e15e4218adb9860e30944cefb36add5a7b61d45/README.mdRunnable version of the app after each exercise: sap-samples.github.io/ui5-typescript-tutorialAlternative for OPA tests when “Given”/”When”/”Then” should still be used (only a draft): - collect the pages: github.com/SAP-samples/ui5-typescript-helloworld/blob/559fb3198f2b61bc2bd9610edacc557065617d40/webapp/test/integration/pages/AllPages.ts- pass them to OPA: github.com/SAP-samples/ui5-typescript-helloworld/blob/559fb3198f2b61bc2bd9610edacc557065617d40/webapp/test/integration/OPA_Extension.ts- also note how Pages and Journeys are different UI5 TypeScript Central Entry Page: sap.github.io/ui5-typescriptUI5 TypeScript Support Release Notes: sap.github.io/ui5-typescript/releasenotes.htmlui5-tooling-transpile: npmjs.com/package/ui5-tooling-transpileui5-tooling-modules: npmjs.com/package/ui5-tooling-modules@ui5/ts-interface-generator: npmjs.com/package/@ui5/ts-interface-generator
UI5con 2023: Part 2 UI5 2023-07-06 | Follow UI5con 2023 live from the AUDIMAX in St. Leon-Rot/Germany!Agenda:00:00 Start04:29 Horizon Theme Adoption, Design Tokens & Theming Variables01:04 UI5 Rendering: The Next Big Step Towards a Better Performance 01:36 Next-Gen UI5 Control Development02:34 Making your UI5 applications work offline02:27 UI5(con) meets (re)CAP: Shaping the Next Gen App Development03:55 Closing WordsFind the detailed on our the UI5con web site: openui5.org/ui5con/germany2023/index.html#agenda Remark: The chat is enabled but questions will NOT be answered live from the conference.
UI5con 2023: Part 1 UI5 2023-07-06 | Follow UI5con 2023 live from the AUDIMAX in St. Leon-Rot/Germany!Agenda:00:00 Welcome and Opening07:34 Keynote01:01 Develop SAP Fiori apps in TypeScript using SAP Fiori tools02:01 Modern JavaScript and SAPUI503:02 How we replaced our legacy build infrastructure with UI5 Tooling03:32 wdi5 can do that?Find the detailed on our the UI5con web site: openui5.org/ui5con/germany2023/index.html#agenda Remark: The chat is enabled but questions will NOT be answered live from the conference.
UI5ers live #27: UI5 Field Report & Best Practices, TypeScript Support Update UI5 2023-06-14 | Let's continue our discussion about TypeScript, this time with the focus on UI5. Andreas and Peter have been quite busy in the last months and made considerable progress towards implementing TypeScript support in UI5. They want to share the latest state of affairs with you. In addition, we invited Mike Zaschka to talk about his ChatGPT-like chat app built with UI5 and to discuss the findings he gained from complex UI5 projects with regard to project structure, utility functions, event handlers, and more._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:16 Field report: A ChatGPT-like chat app03:46 Demo: ChatGPT-like chat app built with UI506:20 Basic principle for developing with UI507:28 Use of TypeScript with UI5 and cds2types10:43 Breaking out of MVC - Modularization of controller code12:25 Demo: Require formatters and classes in views15:43 Patterns for abstracting code in own classes17:00 Demo: Handling dialogs asynchronously 20:54 Panel: Apply type definitions to JSON models24:01 Key take-aways of the field report27:56 Update on TypeScript Support in UI5 (V1.115; V1.113)31:45 Testing with TypeScript sample32:55 Demo: OPA Testing with TypeScript35:39 Demo: Configure testing in TypeScript38:45 Demo: Configure Karma testing in TypeScript41:22 Q/A: Why was a transition from a babel build step to a custom task required?42:25 Final Words _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Blog post "A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 3/3" by Mike Zaschka: blogs.sap.com/2023/02/27/a-chatgpt-like-chat-app-built-with-modern-sap-technologies-cap-sapui5-part-3-3CAP-UI5-GPT-Chat repository: github.com/p36-io/cap-ui5-gpt-chatcds2types: npmjs.com/package/cds2typesBlog Post "UI5 and TypeScript: how to generate types for OData services" by Andreas Kunz: blogs.sap.com/2023/04/13/ui5-and-typescript-how-to-generate-types-for-odata-servicesUI5 TypeScript Central Entry Page: sap.github.io/ui5-typescriptUI5 TypeScript Support Release Notes: sap.github.io/ui5-typescript/releasenotes.htmlTypeScript UI5 Example App with Tests: github.com/SAP-samples/ui5-typescript-helloworld/tree/testingui5-tooling-transpile: npmjs.com/package/ui5-tooling-transpilekarma-ui5-transpile: npmjs.com/package/karma-ui5-transpile_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #26: odata2ts, UI5 Web Components and TypeScript UI5 2023-05-09 | Let's talk TypeScript! Hubert Drecker will introduce us to odata2ts, a tool that generates TypeScript type definitions from OData metadata but also functions as an OData client with a typed query API. He will also tell us about a joint hackathon experiment using odata2ts with a mobx-based state management in UI5. Furthermore, Ilhan Myumyun will talk about the conversion of the UI5 Web Components code base to TypeScript and the newly introduced TypeScript decorators for defining component metadata. He will also go into the tooling support for developing custom UI5 web components in TypeScript._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:14 The odata2ts story (odata2ts.github.io)05:17 Key facts on odata2ts05:53 Use cases for odata2ts07:22 Generation process of odata2ts08:56 Demo: Generate a TypeScript model interface using odata2ts12:53 Demo: Generate a query object using odata2ts 14:08 Demo: TypeScript setup for developing UI5 applications using odata2ts (github.com/odata2ts/playground)22:36 Demo: TypeScript setup for developing UI5 applications with MobX using odata2ts (github.com/odata2ts/playground)28:38 Q/A: Why didn't you use the UI5 OData V4 model in the first place?30:03 The beginning of TypeScript support in UI5 Web Components31:24 Demo: Create a web application with TypeScript Using the new UI5 Web Components APIs33:59 New practices developing UI5 Web Components in TypeScript36:49 Demo: Developing UI5 Web Components in TypeScript48:27 Closing words_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:odata2ts generator: github.com/odata2ts/odata2tsodata2ts documentation: odata2ts.github.ioodata2ts Playground: github.com/odata2ts/playgroundBlog Post on type definition generators for OData by Andreas Kunz: blogs.sap.com/2023/04/13/ui5-and-typescript-how-to-generate-types-for-odata-servicesGenerated type in the sample repo: github.com/SAP-samples/ui5-cap-event-app/blob/typescript-odata2ts/packages/ui-form/gen/EventRegistrationServiceModel.d.tsUI5 Web Component tooling: npmjs.com/package/@ui5/create-webcomponents-package_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
Waiting for UI5con 2023 UI5 2023-05-03 | Get ready to feel the excitement as the UI5con teamed up to to create an incredible in-person conference this year. After three long years of pandemic restrictions, we're beyond thrilled to finally be able to welcome you back to the live and energetic atmosphere of the UI5con conference at free of cost.openui5.org/ui5con/germany2023
UI5ers live #25: UI5-Tooling-Stringreplace, Personalization, TypeScript w/ custom libs UI5 2023-04-12 | In this episode we have Dominik Feininger as a guest. He recently reworked the string replacer tooling extensions and will explain his changes as well as the new features he introduced. Dominik will also talk about how he centralized the tooling extension into a common NPM package (ui5-tooling-stringreplace) and why this makes sense. We will also focus on some usability enhancements we recently published for the UI5 table personalization. For example, we have added a filter-bar-like functionality in the filter panel of the personalization dialog and a new column header personalization menu. Martin Häuser and Oliver Stoyanovski will introduce these enhancements to you. And finally, Peter has some tips and tricks for working with custom libraries in UI5 projects with and without TypeScript._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:34 Announcement: The babel transform-ui5 project moved to UI5 Community (github.com/ui5-community/babel-plugin-transform-modules-ui5)02:48 Motivation: Contributing to the ui5-tooling-stringreplace project (github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-stringreplace)03:59 Demo: Changes made on ui5-tooling-stringreplace08:20 Tipp: Order Execution of UI5 Ecosystem Showcase Tasks and Middlewares 10:59 Q/A: What's the difference between "ui5-tooling-transpile" and "babel-plugin-transform-modules-ui5"?12:45 Demo: Improvements in the table personalization content on the example of the smart table (ui5.sap.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sample.smarttable.smartMTableWithCriticality)16:17 Demo: How to implement personalization in a freestyle approach (ui5.sap.com/#/topic/a3c3c5eb54bc4cc38e6cfbd8e90c6a01)19:36 Demo: Introducing the Column Menu control for table personalization (SAPUI5 v1.110)20:48 Demo: Implementing column menu control with a responsive table22:27 Demo: Implementing column menu control with a grid table25:01 Demo: Column menu control with a smart table26:55 Q/A: When will the mdc library publicly available?27:53 Q/A: Why does personalization (sort, filter...) for mdc looks different than for smart controls29:38 Q/A: Can the ui5 build task be modified to ignore files that contain a space30:49 Tipp: How to build custom libraries in combination with application projects39:40 Final Words_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:babel transform-ui5: github.com/ui5-community/babel-plugin-transform-modules-ui5ui5-tooling-stringreplace project: github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-stringreplace/README.mdui5-tooling-stringreplace npm package: npmjs.com/package/ui5-tooling-stringreplaceGitHub Issue [ui5-tooling-transpile-middleware] not working in combination with [ui5-middleware-stringreplacer] : github.com/ui5-community/ui5-ecosystem-showcase/issues/665Sample Smart Responsive Table: ui5.sap.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sample.smarttable.smartMTableWithCriticalityPersonalization Documentation: ui5.sap.com/#/topic/a3c3c5eb54bc4cc38e6cfbd8e90c6a01API Reference for sap.m.p13n.Popup: ui5.sap.com/#/api/sap.m.p13n.PopupSample using sap.m.p13n.Popup: ui5.sap.com/#/entity/sap.m.p13n.Popup/sample/sap.m.sample.p13n.PopupRecording of UI5con HYBRID 2022: P13nify Everything - Personalization for Any Control (Workshop): youtu.be/LclKOae-ts0API Reference for sap.m.table.colummenu.Menu: ui5.sap.com/#/api/sap.m.table.columnmenu.MenuSample for view settings & menus: ui5.sap.com/#/entity/sap.m.Table/sample/sap.m.sample.TableViewSettingsDialogSample for table related menu: ui5.sap.com/#/entity/sap.ui.table.Table/sample/sap.ui.table.sample.MenusSample for smart table with responsive table: ui5.sap.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sample.smarttable.mtable_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #24: Best Practices, Deep Create for OData V2, Timezone Configuration UI5 2023-03-08 | In this episode we will focus mainly on some new features in the UI5 OData Model, so we added Lars Kissel and Sven Bernhard from the UI5 development team to the round of panelists. Lars will present the long-awaited Deep Create feature in the OData V2 model which lets you create an entity with its sub-entities via navigation properties with only one single OData request. And as a special goodie, Holger Schaefer from the community will showcase how he already benefits from this new feature in his UI5 projects. Furthermore, we will discuss the complexities of timezones with Sven and share specific recommendations on how you can circumvent them when providing a configurable timezone independent from the local browser timezone for UI5. In addition, Kateryna Sergieieva and Evgeny Reyzenkind from SAP Footprint Management will share three architectural approaches they developed for their UI5 projects that helped them to become more efficient and improved the readability of their code base._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome02:01 UI5 Experience Stories from SAP Sustainability02:47 Motivation for Introducing Project Approaches for Returning Patterns04:04 Project Approach for Internal Navigation05:58 Code Sample: Internal Navigation08:04 Project Approach for Dialog Manager09:20 Code Sample: Dialog Manager14:20 Project Approach for Task Manager15:20 Code Sample: Task Manager16:46 Summary and Benefits of the Shown Approaches17:39 Q/A21:04 About Deep Create21:51 Code Sample: Using Deep Create in the OData V2 Model24:33 Real-World Scenario for Deep Create25:39 Demo App with OData V2 and Deep Create Scenario30:12 Explained How - Implementing Deep Create with OData V2 (github.com/hschaefer123/sapui5-deep-create)36:43 Problems with Dates, Times, Timestamps, and Time Zone 38:48 Best Practises for Dates, Times, Timestamps, and Time Zone (sdk.openui5.org/topic/6c47b2b39db9404582994070ec3d57a2#loio4c4cd99af9b14e08bb72470cc7cabff4)43:40 Sample: JS Date versus UI5 Date - Parsing and Formatting Considering Configured Time zones46:20 Code Sample: How to Use UI5 Date47:01 Sample: Using Date Types for Date Configuration47:16 Sample: Relative Parsing Considering the Configured Time Zone47:49 Lessons learned from Analysing Problems with Timezones50:18 Final Words_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Deep Create Documentation: sdk.openui5.org/topic/6c47b2b39db9404582994070ec3d57a2#loio4c4cd99af9b14e08bb72470cc7cabff4Deep Create Demo: github.com/hschaefer123/sapui5-deep-createDates, Times, Timestamps, and Time Zone Documentation: sdk.openui5.org/topic/6c9e61dc157a40c19460660ece8368bc UI5 Date API Reference: sdk.openui5.org/api/module:sap/ui/core/date/UI5Date_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #23: Firebase Integration, UI5 Tooling 3.0, Defer Delete (OData V4) UI5 2023-02-06 | We start this episode with Merlin Beutlberger and Matthias Osswald, who will introduce you to the upcoming UI5 Tooling version 3 and explain some of their ideas for the next major enhancements. Adding to this topic, Christian Pfisterer will show a productive OpenUI5 application used at Home Shopping Europe (HSE) to demonstrate the magic of the UI5 Tooling when it’s used to develop an UI5 application with TypeScript as well as third-party npm packages and the OpenUI5 CDN. Lastly, there is something new from the OData V4 model: Uwe Reeder will showcase how to defer the deletion of an entity via an API group using the OData V4 model. This new feature enables a non-draft application to postpone the deletion until the user presses the Save button, just like it’s done with property changes. The deletion can also be canceled again._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome02:02 OpenUI5 at Home Shopping Europe (HSE)04:30 Demo: HSE See Freight Container Overview App05:48 Demo: How to Integrate Google Firebase to Your UI5 TypeScript App13:40 Project Experience Using OpenUI5 with TypeScript15:32 Preview of UI5 Tooling V3 (github.com/SAP/ui5-cli/releases/tag/v3.0.0-rc.0)18:36 Migration Guide for UI5 Tooling V3 (sap.github.io/ui5-tooling/v3/updates/migrate-v3)21:44 Upgrading Extension to the new UI5 Tooling V3 APIs23:41 Importing Modules using the new UI5 Tooling V3 APIs25:56 Demo: Custom Task with UI5 Tooling V331:54 Delete List Entities in OData V4 Model in Non-Draft Scenarios34:05 Demo: Deletion of Sales Order Item (OData V4 and Non-Draft Scenario)39:11 Final Words_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:UI5 TypeScript Tutorial: github.com/SAP-samples/ui5-typescript-helloworld/blob/main/step-by-step.mdSample App - OpenUI5-TS-Firebase: github.com/cpf-hse/openui5-ts-firebaseUI5 Tooling V3.0.0 RC: github.com/SAP/ui5-cli/releases/tag/v3.0.0-rc.0Migration Guide for UI5 Tooling V3: sap.github.io/ui5-tooling/v3/updates/migrate-v3Ui5 Tooling V3 Documentation: Dependencies to UI5 Tooling Modules: github.com/SAP/ui5-tooling/blob/rfc-ui5-tooling-extension-api-v3/rfcs/0012-UI5-Tooling-Extension-API-3.md#1-dependencies-to-ui5-tooling-modulesTask Util Helper API: sap.github.io/ui5-tooling/v3/api/@ui5_project_build_helpers_TaskUtil.htmlSAPUI5 Roadmap: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #22: UI5 Journey Recorder, UI5 Cache Buster Task for Standalone Apps UI5 2022-12-30 | Since the UI5 Journey Recorder has been already prominently featured during SAP TechEd 2022, it’s about time to get to know the author of this great testing tool! Adrian Marten will take us on a tour with his point-and-click adventure Chrome extension for UI5. He will explain to us the benefits of the UI5 Journey Recorder, how fast you can create tests in #OPA5 and #wdi5 for your UI5 apps with little to no upfront knowledge, and what else can do with the UI5 Journey Recorder. Hanna Olbert, our second guest, will present the ui5-task-cachebuster custom task she developed recently for the UI5 Ecosystem Showcase. This task enables cache busting for standalone apps running in the Cloud Foundry environment or on a web server other than the SAP Web Application Server._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:38 UI5 News in Brief03:57 The UI5 Journey Recorder Project (github.com/ui5-community/ui5-journey-recorder)07:35 Key Features of the UI5 Journey Recorder08:19 Demo: Using the UI5 Journey Recorder18:54 How to Contribute to the UI5 Journey Recorder22:08 The Concept Behind the UI5 Cache-Buster Task for Standalone Apps 25:50 Demo: Configure UI5 Cache-Buster Task for Standalone App on SAP Cloud Foundry (npmjs.com/package/ui5-task-cachebuster)32:27 How to Contribute to the UI5 Cache-Buster Task36:30 Outlook for UI5ers live EP 23 (Jan '23)_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:State of JavaScript: stateofjs.comUI5con@SAP 2019: UI5 Test-Recorder - A Point&Click Adventure for your UI5 Tests (Recording): youtu.be/hNQ6E6eX1DgUI5 Journey Recorder (Chrome Extension): chrome.google.com/webstore/detail/ui5-journey-recorder/clhcepeibbgcdmhalaaomdpofecmgimfUI5 Journey Recorder Project (GitHub): github.com/ui5-community/ui5-journey-recorderTesting UI5 Apps with wdi5 - Zero to Hero to Continuous Integration (Devtoberfest Recording): youtube.com/watch?v=f-0ztSnb2-cCan I take you to another Journey? (The UI5 Journey Recorder) (Blog Post): blogs.sap.com/2022/11/17/can-i-take-you-to-another-journey-the-ui5-journey-recorderUI5 Task Cache-Buster (npm): npmjs.com/package/ui5-task-cachebusterUI5 Task Cache-Buster Project (GitHub): github.com/ui5-community/ui5-ecosystem-showcase/tree/main/packages/ui5-task-cachebusterUI5 Tooling V3.0 Migration Guideline: sap.github.io/ui5-tooling/v3/updates/migrate-v3_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #21: UI5 1.108, UI5-Tooling-Transpile, TypeScript, UI5 Language Assistant UI5 2022-12-02 | We take the release of UI5 1.108 to talk about the benefits of upgrading to this new long term version by recapping what has been delivered since UI5 1.96. Then, we come to the fun part, starting with Jorge Martins who reworked and harmonized the transpiling tooling extensions of the UI5-ecosystem-showcase. The task and the middleware are now provided as part of the ui5-tooling-transpile package and can be used for e.g. in your #TypeScript projects to integrate the transpiling directly into the UI5 tooling lifecycle. This allows you to get rid of separate watch scripts and the source folder. When using the latest UI5-TS -App Generator your project already benefit from this out of the box. Next, Andreas Kunz demonstrates how you can apply TypeScript benefits to your #UI5 project without using TypeScript. Finally, Peter Muessig guides you through the Multi-Version Support coming with the UI5 Language Assistant v3.3.0._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:45 UI5 Topics at SAP Devtoberfest '22 (youtube.com/playlist?list=PLHUs_FUbq4dWdscjv7zFO0ZFJLYrkSkYu)04:03 Benefits of UI5 1.10813:01 Demo: Configuration of ui5-tooling-transpile18:30 Demo: Comparing Previous Set-Up with Set-up Using ui5-tooling-transpile21:31 Impact on modules ui5-middleware-livetranspile and ui5-task-transpile24:20 Demo: Implement TypeScript Support to your JavaScript Project36:36 Demo: Multi-Version Support in UI5 Language Assistant v3.3.042:10 Q/A: What Happens When An UI5 Version Is Used That Is not Available On The UI5 CDN43:04 Q/A: How To Figure Out When A UI5 Version Will Be Deleted From The UI5 CDN _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:SAP Devtober '22 Recommendations: youtube.com/playlist?list=PLHUs_FUbq4dWdscjv7zFO0ZFJLYrkSkYuWhat's New in SAPUI5 1.108: ui5.sap.com/#/topic/799291a4be7542c9a0a96ba425d0dec2Availability of SAP_UI 757: SP0002: support.sap.com/en/release-upgrade-maintenance/maintenance-information/schedules-for-maintenance-deliveries/SAP_UI-schedule.htmlSAPUI5 Road Map: roadmaps.sap.com/board?PRODUCT=73554900100800001361UI5 TS App Generator: github.com/ui5-community/generator-ui5-ts-app/tree/mainUI5 Tooling Transpile: npmjs.com/package/ui5-tooling-transpileJavaScript with TypeScript Support Sample: github.com/SAP-samples/ui5-cap-event-app/tree/js-with-typescript-supportUI5 Language Assistant: marketplace.visualstudio.com/items?itemName=SAPOSS.vscode-ui5-language-assistantSAPUI5 Version Overview: ui5.sap.com/versionoverview.html_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #20: Easy-UI5 3.5, Consuming Third-Party Dependencies UI5 2022-10-11 | Our summer break is just around the corner, but before there are some news to share. Firstly, there is a new version of Easy-UI5. Peter Muessig will demonstrate the new features of Easy-UI5 3.5 and also give an outlook on what is planned next. Then, we will have a look at the UI5 Tooling Modules. There was also an update, Peter had been involved. This is related to the feature that enables the option to put used NPM packages into the same namespace than the app. Peter will showcase how this new feature works and how to use it as well as discuss the benefits this provides._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome02:16 New Features Of Easy-UI5 3.5.002:38 Demo: Offline Support03:41 Demo: Forced Update Of Plug-In Generators04:42 Demo: Consume Arbitrary Generators From GitHub Repository09:35 Demo: Consume Plug-In Generators From Best Of UI512:32 Demo: Initialising Local GitHub Repository For An Application13:25 Q/A: Where Can I Find The Documentation For All All The Features Of Easy-UI5?15:45 Q/A: How To Contribute To Easy-UI5 Best?17:25 Demo: UI5 Tooling Extensions for NPM Package Consumption22:56 Demo: PrependPath Mapping For Third-Party Modules/Packages 28:57 Demo: Consume Third-Party Modules/Packages (in FLP Environment)34:21 Demo: Consume UI5 Custom Modules With Custom Control 3rd Party Modules (in FLP environment)_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:UI5con HYBRID 2022 Recordings: youtube.com/playlist?list=PLHUs_FUbq4dXiMBX7m9lRuqIdvX_SYGENBlog Post "Easy UI5 3.5.0 - Now Available": blogs.sap.com/2022/08/02/easy-ui5-3.5.0-now-availableUI5 TypeScript Tutorial: github.com/SAP-samples/ui5-typescript-tutorialBest Of UI5: bestofui5.orgVideo "Sort out your UI5 tooling extensions in a flash": youtu.be/Yvez_jAqkXcVideo "UI5con HYBRID 2022 Keynote: What's New in UI5": youtu.be/QYQxjgwVtCI?t=710UI5 Tooling Extensions for NPM Package Consumption: npmjs.com/package/ui5-tooling-modules_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #19: UI5-Bridge Web Component, Notification Management System UI5 2022-09-26 | In this first UI5ers live after UI5con 2022, we offer two very interesting sessions: First, Marcel Schork and Ruben Tuider from the community will talk about Core UI Design System, the Design System of Schwarz IT, its related Web Component library UI5-Bridge and, more specifically, the version-independent bridge into UI5 that wraps the components into custom controls at runtime. Afterwards, Kateryna Sergieieva and Evgeny Reyzenkind from the SAP Fiori app development will talk about their Notification Management System for UI5 freestyle apps that helps to achieve a modern user experience delivering constant feedback to the users - from any source and to any target!_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome02:18 About Core UI UI5 Bridge02:53 The History Of Origin Of UI5 Bridge06:48 About UI5-Bridge07:28 The Architecture Of UI5-Bridge11:24 The Lifecycle Of UI5-Bridge13:18 UI5-Bridge: Deployment Strategy15:24 UI5-Bridge: Testing Strategy18:01 UI5-Bridge: Upcoming Development Plans20:20 Q/A: UI5-Bridge20:57 Does UI5-Bridge Supports TypeScript?21:37 Does UI5-Bridge Provides Any Additional Assets For Working With UI5-Bridge?24:02 The History Of Origin Of The Notification Management System In SAP Product Footprint Management25:37 Calculate Footprints App: Notification Manager In Theory26:08 Calculate Footprints App: Notification Manager In Technical Terms28:15 Calculate Footprints App: Notification Manager Flow28:46 Calculate Footprints App: The Notification Manage API30:53 Demo: The Publish Notification API Implementation34:11 Q/A: Notification Manager34:15 How Can The Notification Manager of Calculate Footprints App Be Consumed?38:47 New Features In SAPUI5 Table Export (UI5 1.102)39:00 PDF Export Feature in SAPUI5 Smart Table39:42 Exporting Spreadsheets From UI5 Table To Google Workspace_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Blog Post "Product Deep Dive: Welcome to Product Footprint Management from SAP": blogs.sap.com/2021/09/02/product-deep-dive-welcome-to-product-footprint-management-from-sapBest Of UI5: bestofui5.orgNote On SAPUI5 Export Capabilities And Restrictions: launchpad.support.sap.com/#/notes/3198506 Further PDF Export Documentation: ui5.sap.com/#/topic/4bab6f2043814257974b52d4dafe1dcdGoogle Workspace Integration Documentation For Spreadsheet Export to Google: help.sap.com/docs/DOCUMENT_MANAGEMENT/f6e70dd4bffa4b65965b43feed4c9429/594bf95dbab64358aef97a73296b6054.html?locale=en-US&version=CloudBlog Post "SAP’s UI Technologies enabling Google Workspace": blogs.sap.com/2022/08/21/saps-ui-technologies-enabling-google-workspace_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #18: Best Of UI5, Data Synchronisation In OData V4, Inline Creation Rows UI5 2022-09-15 | This time, we welcome back Marian Zeis to our round of panelists. Over the last weeks, Marian worked on a web page that gathers the latest trends about #UI5community projects, be it applications, libraries, custom controls, tooling extensions, middlewares, tasks, or generators. We will talk with him about the source of this idea, the purpose of the page, and what remains to be done. We will also look at the specific features of the page and how they are implemented. As an additional topic, Mathias Uhlmann and Uwe Reeder will demonstrate how data in different controls can be kept in sync using the #OData V4 model with a sample application. They will also discuss important aspects of consuming a draft-enabled back-end service. Finally, they will present how to create inactive contexts in list binding to provide multiple empty table rows in edit mode._ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:25 UI5 News: SAP Horizon Theme01:52 UI5 Outlook: PDF Export02:08 UI5 Outlook: Export To Google Sheets02:23 UI5 News: Improvements In Timezone Handling03:28 UI5 Announcement: Outdated UI5 Patch Versions Also From UI5 Versions Still In Maintenance Are To Be Removed From CDN04:25 Updates On UI5con 202206:08 Best Of UI5 - How It Happened08:04 The Basic Idea Of Best Of UI5 - bestofjs (bestofjs.org)09:59 Demo: The Structure Of Best Of UI5 (bestofui5.org)11:12 Demo: Add New Project To Best Of UI512:17 Demo: Main Aspects and Characteristics Of Best Of UI516:27 Demo: Project Set-Up Of Best Of UI517:21 Q/A: Does UI5Lab Becomes Now Obsolete In Favor of Best Of UI5?18:28 Contributing To Best Of UI518:52 Q/A: What Is The Scope Of Best Of UI5?20:57 Introduction To Data Synchronisation In OData V4 Model22:11 Demo: Draft Handling and Data Synchronisation In OData V4 Model Sample (ui5.sap.com/#/entity/sap.ui.model.odata.v4.ODataModel/sample/sap.ui.core.sample.odata.v4.Draft)27:10 Code Demo: Data Synchronisation In OData V4 Using getKeepAliveContext30:03 When Do You Need To Destroy A KeepAlive Context31:10 Code Demo: Edit Active Entity32:31 Code Demo: Cancel Active Entity34:05 Introduction To Inline Creation Row (Add Empty Rows)36:29 Code Demo: Create Inactive Rows_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:Blog Post "Horizon theme of SAP Fiori: update on productive usage for web applications": blogs.sap.com/2022/05/24/horizon-theme-of-sap-fiori-update-on-productive-usage-for-web-applicationsSAP Note "Removing outdated UI5 versions from UI5 CDN": blogs.sap.com/2021/01/26/removing-outdated-ui5-versions-from-ui5-cdnUI5 Announcement Mailing List: listserv.sap.com/mailman/listinfo/ui5.announceBlog Post "Best of UI5 – The best place to find packages for the UI5 ecosystem": blogs.sap.com/2022/05/23/best-of-ui5-the-best-place-to-find-packages-for-the-ui5-ecosystemRecording "UI5con HYBRID 2022: UI5 Community – Best of UI5": youtu.be/pOE3NKO_gk4Sample "Draft Handling and Data Synchronisation": ui5.sap.com/#/entity/sap.ui.model.odata.v4.ODataModel/sample/sap.ui.core.sample.odata.v4.DraftAPI Reference sap.ui.model.odata.v4.ODataContextBinding#execute: ui5.sap.com/#/api/sap.ui.model.odata.v4.ODataContextBinding%23methods/executeDocumentation for Inline Creation Rows in Creating An Entity: ui5.sap.com/#/topic/c9723f8265f644af91c0ed941e114d46_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5ers live #17: OpenUI5 Error Collector, Open Sourcing Smart Controls UI5 2022-09-01 | In this episode, our special panelist is Mauricio Lauffer who is an experienced UI5 developer as well as a busy contributor to #OpenUI5. Mauricio will showcase a project he published recently: a UI5 library you can use to seamlessly collect all JavaScript and UI5 errors and send them to a back end if errors need to be logged and saved for further analysis. In addition, we plan to talk about an issue that reached us via different channels: open sourcing further parts of #SAPUI5, especially the smart controls. For this, Dirk Becker and Vladimir Velinov from the #smartcontrols team extend our round of panelists. They both have seriously considered to open source the smart controls. However, they need to better understand how the smart controls could be used outside the SAP ecosystem. So, if you are a supporter of open sourcing the smart controls, this is your unique chance to speak up and raise your concern with the creators directly! As you can see, there is a lot to talk about!_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Video Chapters:00:00 Welcome01:55 Update: UI5con 202202:53 Update: Samples for Controls Based On UI5 Web Components Available in OpenUI503:18 Update: Availability Of Evergreen URL for SAPUI504:51 Introducing The OpenUI5 Error Collector Project05:25 Purpose Of The OpenUI5 Error Collector07:30 Functional Scope Of The OpenUI5 Error Collector10:21 Use Cases Covered By The OpenUI5 Error Collector 11:05 Demo: The OpenUI5 Error Collection Log Structure12:33 Demo: Initializing The OpenUI5 Error Collection In Your App14:34 Demo: Sending The OpenUI5 Error Collection Log To A Server20:07 Q/A: Does The OpenUI5 Error Collector Has A Duplication Detection Inside?21:42 Demo: Saving The OpenUI5 Error Collection Log On SAP BTP, Cloud Foundry24:57 Demo: Saving The OpenUI5 Error Collection Log To AWSCloud Watch25:22 Demo: Saving The OpenUI5 Error Collection Log To An SAP NetWeaver AS for ABAP29:50 Backgrounds About The Smart Controls30:40 Introduction Into The Smart Controls 35:21 Should Parts Of The Smart Controls Be Open Sourced?37:37 Is The OData V2 Protocol Been Used And Disseminated Outside Of The SAP Ecosystem?38:37 Which Of The Smart Controls Are Particularly Valuable?39:54 Is OpenUI5 Been Used At All? What Are The Use Cases To Open Source The Smart Controls When Using Them With SAPUI5?42:36 How To Provide Further Feedback On Open Sourcing Smart Controls43:13 Final Words_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Resources:UI5con 2022 Homepage: openui5.org/ui5con/germany2022Blog Post - Patch-Level Independent Bootstrap: blogs.sap.com/2022/04/14/sapui5-patch-level-independent-bootstrapGitHub: github.com/mauriciolauffer/openui5-error-collectorBlog Post - Smart Controls and OpenUI5: blogs.sap.com/2022/05/19/smart-controls-and-openui5Discussion - Smart Controls and OpenUI5: groups.community.sap.com/t5/application-development/smart-controls-and-openui5/m-p/4723#M1124_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Music: klinik FX
UI5con HYBRID 2022: P13nify Everything - Personalization for Any Control (Workshop) UI5 2022-08-22 | Benedikt Schölch and Martin Häuser are showing you how you can add personalization to almost every #UI5 control. If you have a custom control that you would like to enhance with filtering, sorting, or other options this workshop is for you. The two are leading you through the enablement of a custom control using the assets provided by UI5 according to the latest SAP Fiori UX Guidelines. You should be able to apply your knowledge afterwards in your own application or control development. Prerequisites: Intermediate UI5 knowledge, current version of git, Node.js (incl. npm), and a code editor (during the workshop Visual Studio Code was used). Event: #UI5conHYBDIRD2022Speaker: Benedikt Schölch, SAP | Martin Häuser, SAP---00:00 Introduction01:04 The Meaning Of Personalization In UI502:39 Introduction To The P13N Engine in UI503:20 Capabilities Of The P13N Engine05:35 About The Workshop Format07:18 Getting Started With The Exercises (bendkt.github.io/ui5con2022-p13n-ws)09:10 Exercise 1 - Setup the Application10:16 Exercise 2 - Custom Table for P13n12:43 Exercise 3 - Engine Registration 20:09 Exercise 4 - Column Selection Controller and Popover25:13 Exercise 5 - Sorting and Grouping Capabilities30:07 Exercise 6 - Changing Control State 35:11 Q/A: Is It Possible To Use Different Kind Of Models With The P13N Engine?36:24 Recap: What We Learned So Far37:04 Exercise 7 - Grid Filter Control45:02 Exercise 8 - Filtering the Table via Selection Controller54:32 Exercise 9 - Info Toolbar for Table Filters57:47 Exercise 10 - Dialog Customization and Clear Filters 01:02:17 Exercise 11 - Variant Management 01:14:06 Q/A: When Will The P13N Engine Publicly Available?01:15:03 Q/A: How Are The Variants Saved?01:17:21 Q/A: Does This Variant Management Work Automatically When The App Is Deployed To SAP Fiori Launchpad?—Resources:Slides: sap-my.sharepoint.com/:b:/p/benedikt_schoelch/EZq60Q0q_PFHnWfEVgMKsGEBiWpdNc4qNFogwQhuDiVIRw?e=c4JFj3Exercises: bendkt.github.io/ui5con2022-p13n-wsReport Issue: github.com/bendkt/ui5con2022-p13n-ws/issuesAPI Reference: ui5.sap.com/1.105.0/#/api/sap.m.p13n.Engine
UI5con HYBRID 2022: Building SAP Fiori apps with flexible open-source modules UI5 2022-08-18 | The Open UX tools project aims to provide open-source modules that make developing SAP Fiori applications more efficient and flexible through community collaboration and transparency. Learn how these modules offer full flexibility for developers to create an app powered by SAP Fiori elements flexible programming model with the convenience of the SAP Fiori tools.Event: #UI5conHYBDIRD2022Speaker: Ashely Tung, SAP | Tobias Queck, SAP ---00:00 Introduction00:42 Prototyping The App01:35 Challenge Starting A New SAP Fiori App03:28 Sketching The App05:02 Building The App (github.com/tobiasqueck/ui5con2022)05:22 Demo: Create Application Using Easy-UI508:26 Demo: Show App In SAP Fiori Tools And Preview08:52 Demo: Show Flexible Programming Model Explorer And Add Filter Bar10:54 Demo: Add Chart Using Guided Development13;58 Demo: Add Object Page Using Page Map15:01 Demo: Implementing Navigation20:42 Demo: Enable Flexible Column Layout Using Page Map22:43 Open Source Strategy Of the SAP Fiori Tools24:57 Q/A: Developing New Features For The Open UX Tools With The UI5 Community Work In Mind26:33 Outlook: Test Templates In Open UX Tools27:06 Q/A: Which Developer Scenarios Are Planned To Be Supported By The SAP Fiori Elements?29:43 Q/A: Is There A Timeline To Open Source SAP Fiori Elements Completely?30:38 Q/A: Is The Demo Also Working For OData V2?31:36 Q/A: Does It Still Make Sense To Develop With The Freestyle Approach?33:55 Q/A: Is It Planned To Offer SAP Fiori Tools/Open UX Tools Also for Other IDEs?---Resources:Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-1_7-Ashley-Tung-Final.pdfDemo Script: github.com/tobiasqueck/ui5con2022Open UX Tools: github.com/SAP/open-ux-tools
UI5con HYBRID 2022: UI5 Community – Contributor Experiences (Panel Discussion) UI5 2022-08-17 | The #ui5community GitHub organization evolved to a central place to develop and share #UI5 projects. It has become a great place to find ideas, to pick-up and continue ideas and finally make them available for the whole UI5 community. Starting with the UI5 Ecosystem Showcase mono repository hosting several tooling extensions it now hosts more and more individual projects for different purposes: applications, libraries, custom controls, tooling extensions, middlewares, tasks, Easy-UI5 generators, … Many developers contributed over the last year and during the panel discussion the moderators will interview some of the very active contributors to the ui5-community GitHub organization to share their experiences. Event: #UI5conHYBDIRD2022Panelists: Peter Muessig, SAP | Volker Buzek, J&S-Soft GmbH | Marian Zeis, freelance | Marco Beier, Accenture | Nitish Mehta, INTEGRTR | Jacob Kjaer, SAP ---00:00 Introduction01:08 About Nitish Mehta02:02 About Jacob Kjaer03:18 About Marian Zeis04:06 About Marco Beier04:42 How Did UI5Lab Started06:35 Motivation To Contribute To The UI5 Community13:24 How Contributing On UI5 Community Can Influence Professional Development17:21 Forms Of Contributing To The UI5 Community---Resources:UI5 Community Project: github.com/ui5-communityUI5Lab: ui5lab.ioBestOfUI5: bestofui5.org
UI5con HYBRID 2022: Learn App Development in UI5 and TypeScript (Workshop) UI5 2022-08-16 | NOTE: some parts of this video are outdated, please check out the new video tutorial updated in summer 2023: youtube.com/watch?v=CRKNIiXZN6U--------------------------------------This workshop walks through a comprehensive tutorial to introduce developers to #UI5 application development in #TypeScript. It includes creating a basic application from the TypeScript template using the #EasyUI5 generator, TypeScript coding in regular UI controllers, as well as advanced topics like custom control development and using third-party libraries.The workshop basically follows github.com/SAP-samples/ui5-typescript-tutorial, with additional explanations by the authors. Prerequisites are: a current version of Node.js and a code editor supporting TypeScript development (preferably the free Microsoft Visual Studio Code). TypeScript knowledge is not required, but basic UI5 knowledge will help understand what you are doing.Event: #UI5conHYBDIRD2022Speaker: Andreas Kunz, SAP | Peter Muessig, SAP---00:00 Introduction10:15 Exercise 0 - Getting Started (github.com/SAP-samples/ui5-typescript-tutorial)15:06 Exercise 1 - Create And Run Your Application19:40 Exercise 2 - Create The Initial User Interface And Set Up Routing21:05 Exercise 2.1 - Understand how TypeScript and Modern JavaScript Syntax Influence the Code26:37 Exercise 2.2 - Load Data31:35 Exercise 2.3 - Extend the User Interface39:22 Exercise 3 - Add Translated UI Texts 42:02 Exercise 4 - Enhance the User Interface And Use Formatters42:14 Exercise 4.1 Add Formatter Functions to the Controller46:00 Exercise 4.2 Extend the View to Show Incidence Numbers per State and Colored Icons48:28 Q/A: Is It Planned To Reduce The Type Casts?52:29 Exercise 5 - Create A Second View01:02:30 Q/A: Is It Planned To Transfer The Module 'babel-plugin-transform-modules-ui5' To SAP?01:04:46 Q/A: How To Troubleshoot Error "Cannot find type definition file for 'node_modules'"?01:07:55 Exercise 6 Load Detailed History Data Into Another JSONModel01:14:40 Exercise 7 - Create and Use A Custom Control01:15:08 Exercise 7.1 Create A Custom Control01:20:58 Exercise 7.2 - Use The Custom Control In The Detail View01:22:53 Exercise 7.3 - Generate Control Interfaces to Resolve the TypeScript Errors01:32:00 Is It Planned to Automate The Generation Of Control Interfaces01:33:49 Q/A: What Needs To Be Done To Move An Existing Custom Library To TS?01:34:54 Exercise 8 - Using NPM Packages01:37:05 Exercise 8.1 - Install/Configure UI5 Tooling Extensions01:39:48 Exercise 8.2 - Adding Chart.js to the LineChart01:47:24 Q/A: Why Is The Import (From Chart.js) /auto?___Resources:Exercises: github.com/SAP-samples/ui5-typescript-tutorialEasy-UI5: github.com/SAP/generator-easy-ui5UI5 TypeScript Application Template: github.com/ui5-community/generator-ui5-ts-app(Custom) UI5 Controls in TypeScript: github.com/SAP-samples/ui5-typescript-helloworld/blob/custom-controls/README.mdBlog Post "Using Third-Party Libraries": blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shimsUI5 & TypeScript Documentation: sap.github.io/ui5-typescript
UI5con HYBRID 2022: SAP Graph + SAPUI5 UI5 2022-08-15 | #UI5 developers know the challenge of developing apps for complex business landscapes: their app should be simple to use while the data they need to work with is distributed across different systems. In addition, different authentication methods, data protocols and missing references are additional challenges originating in the complex landscape that developers have to solve in their app. With #SAPGraph - the new unified API for all business data - developers can use a single API with one authentication mechanism, one protocol and an interconnected data model to help them focus on building great apps.In this session, we want to show UI5 developers how to build an app across different SAP systems with #SAPUI5 and SAP Graph. Developers will learn what SAP Graph is, what is required to use it and how to consume it from SAPUI5.Event: #UI5conHYBDIRD2022Speaker: Florian Moritz, SAP | Evgeny Segeda, SAP---00:00 Introduction00:36 SAP Graph - Introduction And Background03:06 Business Data Graph05:45 Benefits for UI5 Developers06:41 How To Use SAP Graph In UI507:10 Prerequisite To Use SAP Graph in UI508:00 Demo: How To Use SAP Graph In UI516:42 Get Started With SAP Graph17:23 Questions & Answers17:27 From Where Does SAP Graph Gets Its Data?18:20 Does SAP Graph Also Works For Custom Entities?19:00 Couldn't Be The Same Be Done With SAP API Management?20:24 Is It Possible To Handle Partial Data?---Resources:Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_2-SAP_Graph.pdf
UI5con HYBRID 2022: Boost your UI5 skills for creating accessible apps UI5 2022-08-15 | Visit the session to find out the best places in UI5 Demo Kit and documentation to upgrade your accessibility skills. We will explore the latest news around accessibility in UI5 and share some new tips and tricks.Event: #UI5conHYBDIRD2022Speaker: Dobrin Dimchev, SAP---00:00 Introduction02:11 Improvements in the Accessibility Documentation05:53 Developing Accessible Apps07:17 Accessibility Best Practice Application11:54 Accessibility Mission in SAP Discovery Center13:26 Key Takeaways and Resources14:40 Is A Accessibility Best Practice Application also Planned for Web Components?---Resources:Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_5-Dobrin-Dimchev.pdfAccessibility Best Practice Application: sdk.openui5.org/test-resources/sap/m/demokit/accessibilityGuide/webapp/index.htmlAccessibility Mission: https://discovery-center.cloud.sap/missiondetail/3530/3571/Accessibility Documentation: sdk.openui5.org/#/topic/322f55d0cf1e4b459cc1911c899b7a5fui5.sap.com/#/topic/322f55d0cf1e4b459cc1911c899b7a5f
UI5con HYBRID 2022: My experience with TypeScript in UI5 UI5 2022-08-11 | We are going to take you on a journey through the entirety of the UI5 TypeScript jungle! Starting from the basics to more advanced concepts to get the most out of it:- Bootstrap a new UI5 TypeScript app- Project setup- Reusable helper functions- UI5 Libraries with UI5 Custom Controls- 3th party libraries- Testing of UI5 TypeScript appsWe will bring you everything you need to know to cover the full project scope with TypeScript!Event: #UI5conHYBDIRD2022Speaker: Wouter Lemaire, LemTech BV | Andreas Kunz, SAP | Peter Muessig, SAP | Volker Buzek, J&S-Soft GmbH---00:00 Introduction01:25 A Brief Introduction To TypeScript03:42 UI5 Support For TypeScript07:52 Benefits Of TypeScript09:14 Get Started With TypeScript (in UI5)11:02 Tooling for TypeScript12:32 Demo: Generator For UI5 TypeScript Application With Master-Detail/Flexible Column-Layout (github.com/ui5-community/generator-ui5-ts-app-fcl)16:16 Get The Most Out Of TypeScript17:09 Introducing The Hacking-Away-Sample App Showcasing18:22 Explaining The Project Structure Of The Hacking-Away-Sample App 20:08 Demo: The Project Structure of the Hacking-Away-Sample App 22:35 Explaining the UI Implementation Of The Hacking-Away-Sample App 23:21 Demo: The UI Implementation Of The Hacking-Away-Sample App UI25:57 Reusable Code26:54 Challenges27:59 Demo: Create UI5 Custom Libraries and Controls Using TypeScript32:23 Demo: Integrate UI5 & 3rd Party Libraries To The Hacking-Away-Sample App36:33 Demo: End2End Test Scripts For The Hacking-Away-Sample App Using wdi540:24 Q&A40:43 Are You Aware Of A Toll That Converts OData Metadata Into TypeScript Interfaces? 41:44 Can You Use TypeScript Also For Fiori Elements App?43:30 What Are The Drawbacks Using TypeScript - Is Documentation Improved Already?44:27 Which UI5 Version Is Actually 100% Compatible With TypeScript?46:02 Are There Any Plans to Support The UI5 Tooling Modules With On Premise SAP Fiori Launchpad As Well?---Resources:Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_6-Wouter-Lemaire.pdfLearning curve:udemy.com/share/1013yQ3@f94FYMaIwd5er1akskrQdHTYpQrDKdDpWvYqWvyqxTEk6SSnbyoxDXlYhBbxxMkIExample Eepo: github.com/SAP-samples/ui5-cap-event-app/tree/typescript/packages/ui-formBlog Post "Getting Started with TypeScript for UI5 Application Development": blogs.sap.com/2021/07/01/getting-started-with-typescript-for-ui5-application-developmentUI5 & TypeScript Homepage: sap.github.io/ui5-typescriptBlog Post "New UI5 TypeScript Generator – Flexible Column Layout": blogs.sap.com/2022/02/25/new-ui5-typescript-generator-flexible-column-layoutGitHub: github.com/ui5-community/hacking-away-sampleapp
UI5con HYBRID 2022: Sort out your UI5 tooling extensions in a flash UI5 2022-08-10 | Tired of always adding the same tooling extensions to your projects?This session will show you how to use a newly created yeoman generator to implement UI5 tooling extensions like middlewares and tasks. This is mean to speed up your initial setup and be able to quickly get cracking on the fun bits.Event: #UI5conHYBDIRD2022Speaker: Jakob Kjaer, SAP---00:00 Introduction00:31 Benefits of the ui5-add Generator01:42 Sources for the ui5-add Generator (bestofui5.org)02:43 Demo: Utilizing ui5-add to Set Up Your UI5 Project07:52 A Look Behind the Scenes - How the ui5-add Generator Works12:41 Where to Find the ui5-add Generator (github.com/ui5-community/generator-ui5-add-extension)---Resources:Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_7-Jakob-Kjaer-Sort_out_your_UI5_tooling_extensions_in_a_flash.pdf
UI5con HYBRID 2022: UI5 Web Components using React and Serverless first UI5 2022-08-09 | Live coding of a React web application using UI5 Web Components for React only, including react-router and CRUD forms using Shell, Analytical Table, Dialog and Form components.Bonus: I can demonstrate the usage of user authentication flow (register, verification, sign-in and sign-off) provided by Amazon Cognito as well.Event: #UI5conHYBDIRD2022Speaker: Thiago Sasai, Birlasoft---00:00 Introduction00:51 Introducing the Application03:02 About Serverless04:05 The Architecture of the Application06:16 The Frontend of the Application07:34 The Backend of the Application10:30 Adding Authentication11:09 Sharing the Code---Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-1_6-Thiago-Sasai.pdfGitHub: github.com/tsasai7/ui5con-crud
UI5con HYBRID 2022: Error logging in Fiori/UI5 apps UI5 2022-08-08 | Today, all JavaScript errors in a Fiori/UI5 app live and die in the browser. They are not logged in anywhere else. They mostly go unnoticed until a user complains that something is not working. A developer needs to ask users to provide screenshots from DevTools or jump in a screen share session.Services such as DataDog and LogRocket could help in this scenario, but pretty much nobody uses that in SAP. To close this gap, I have created a module that helps developers in capturing all frontend errors and sending them to a backend for proper logging. Having it in a logging system helps the Tech team to identify and fix issues earlier and faster.The module, openui5-error-collector, is a simple plug&play with no dependencies. It's backend agnostic, one can send data to anywhere: SAP Gateway, SAP Solution Manager, SAP BTP Alert Notification Service, AWS CloudWatch, etcEvent: #UI5conHYBDIRD2022Speaker: Mauricio Lauffer, SAP---00:00 Introduction03:19 Overview of the OpenUI5 Error Collector06:48 Capturing Errors Locally 11:24 Sending Capture Errors to the Backend20:09 Demo: Using OpenUI5 Error Collector in BTP Cockpit22:18 Is The Logger Always Active in Productive, Or Can It Be Activated On the Fly?23:40 Is the Error Logging Module Only Available for OpenUI5 or Also for SAPUI5?24:22 How Are the Errors Mapped to the Correct User?25:52 Do You Plan to Add this Module to Best of UI5? ---Resources:GitHub: github.com/mauriciolauffer/openui5-error-collector
UI5con HYBRID 2022: Unleash the power of SAP Fiori elements for SAPUI5 freestyle apps UI5 2022-08-08 | Many of you have been using smart controls when creating UI5 apps - either in an extension to an SAP Fiori elements apps or within your SAPUI5 freestyle apps. For OData V4 based apps, we now offer an evolution of the smart controls: the SAP Fiori elements building blocks. Learn about how you can leverage the SAP Fiori elements framework in your SAPUI5 freestyle apps based on a real-life productive implementation by our partner UNIORG.Event: #UI5conHYBDIRD2022Speaker: Holger Schäfer, UNIORG | Marius Freitag, SAP ---00:00 Introduction00:47 Value Proposition SAP Fiori Elements01:33 SAP Fiori Elements Overview02:28 Introduction into Flexible Programming Model04:15 Recommended Approach When a Fiori Element Floorplan Does Not Fit Your Use Case05:52 Demo: Flexible Programming Model12:34 Key Takeaways on SAP Fiori Elements14:04 Customer Project - Webshop 2.0 of the City of Zurich17:31 Demo: Webshop 2.0 of the City of Zurich20:19 Demo: Loading Placeholder in SAPUI524:42 Demo: Flexible Programming Model - Using Building Blocks and Side Effects32:50 Lessons Learned36:36 Q/A36:39 With Which UI5 Version Is the Flexible Programming Model Available?37:34 Are the Marcos/Building Blocks Available in OpenUI5 As Well?37:49 What's the Effort to Build Something Like the Webshop 2.0?39:16 Why Did You Choose the Blob Storage inside Azure Instead of the Document Service/Object Store in BTP?40:47 Was There Any Functionality Missing in OData V4 Model You Might Know from OData V2 Model?---ResourcesSlides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_3-Marius-Freitag-Unleash_the_power_of_SAP_Fiori_elements_for_SAPUI5_freestyle_apps.pdfUI5con HYBRID 2022 Session "Building SAP Fiori apps with flexible open-source modules": openui5.org/ui5con/germany2022/slides/2022-UI5con-1_7-Ashley-Tung-Final.pdfFlexible Programming Model Explorer: ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introductionWebshop 2.0 of the City of Zurich: https://btp.udina.de/service/consulting/stzh-webshop.htmlPlaceholder Loading: https://btp.udina.de/development/fe/freestyle.html#placeholder-loadingUI5ers live: Episode 10 (Aug '21): Placeholder Concept, UI5 Web Components Controls: youtube.com/watch?v=lUZ0A-OUJaY&t=88s
UI5con HYBRID 2022: Component reuse and micro-frontend concepts in a SPA - a report UI5 2022-08-05 | In the last few years we have seen significant improvements for #component-reuse in #UI5 since its emergence.Components from our recent development projects feature different modes of operation, varying places of use and configurable output designs.However, there are points to consider, wrong turns to come back from and tales of (un)expected behaviour to tell.In this talk, we'd like to share our experiences, refinements and pitfalls in (re)using components in a UI5 #SPA.Event: #UI5conHYBDIRD2022Speaker: Andreas Pflugrad, eXXcellent solutions GmbH---00:00 Introduction00:43 "Micro Frontend"-Concept02:30 Dimentions of UI5 Components03:29 The standard use case: Embedding a UI5 component05:13 Demo: The standard use case07:27 Different operation modes: Same component, different data06:40 Demo: Same component, different data13:43 Different output formats: Same componenent, different views15:15 Demo: Different output formats19:44 Questions & Answers---ResourcesSlides: openui5.org/ui5con/germany2022/slides/2022-UI5con-1_5-Pflugrad-Andreas.pdfGitHub project: github.com/exxcellent/UI5con2022-Demo
UI5con HYBRID 2022 Keynote: Whats New in SAP Fiori Elements and SAP Fiori Tools UI5 2022-08-05 | Katja and Sebastian the two co-Chief-Product-Owners for the SAP UX Engineering product portfolio are giving a quick tour of SAP Fiori elements and SAP Fiori tools as well as a glimpse of the exciting changes coming to the SAP S/4HANA user experience. #S4HANA #SAPFiori #SAPFioriElements #SAPFioriTools #sapui5 Event: #UI5conHYBDIRD2022Speaker: Katja Zoch, VP SAP UX Engineering | Sebastian Steinhauer, VP SAP UX Engineering---00:00 Introduction01:40 Open source strategy for SAP Fiori tools (github.com/SAP/open-ux-tools)04:18 Low Code Tools05:07 Demo: Extend FE V4 List Report on CAP Using Page Map in VS Code06:29 Demo: Populate New Fields to FE V4 List Report Column Using Page Map in VS Code07:28 Demo: Add Chart to FE V4 List Report Using Page Map in VS Code08:43 Future Strategy for SAP Fiori elements11:15 Demo: Create SAP Fiori elements app on SAP BTP, ABAP environment in SAP Business Application Studio12:06 Demo: Fixing Issues in SAP BAS Using Guided Answers15:29 Demo: Guided Development "Enable table to auto load data"16:22 Demo: Guided Development "Add a field group as a section to a page"18:11 Demo: Guided Development to Get ABAP CDS Annotation Snippets18:50 My Home tab for S/4HANA Cloud19:42 Demo: Personalize My Home Insights section20:46 Demo: Share Deep Link to an application into Microsoft Teams---Resources: Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_1-Keynote_Day_2.pdfUI5con HYBRID 2022 Session "Building SAP Fiori apps with flexible open-source modules": openui5.org/ui5con/germany2022/slides/2022-UI5con-1_7-Ashley-Tung-Final.pdfUI5con HYBRID 2022 Session "Unleash the power of SAP Fiori elements for SAPUI5 freestyle apps": openui5.org/ui5con/germany2022/slides/2022-UI5con-2_3-Marius-Freitag-Unleash_the_power_of_SAP_Fiori_elements_for_SAPUI5_freestyle_apps.pdfBlog post "Open UX Tools Journey": blogs.sap.com/2021/11/09/the-open-ux-tools-journeyopenSAP Course "Developing and Extending SAP Fiori Elements Apps": open.sap.com/courses/fiori-ea1
UI5con HYBRID 2022: UI5 Web Components - Version 1.0 is Here! UI5 2022-08-04 | This session shares cool insights from the #ui5webcomponents project, from basics to more advanced topics.Topics that are covered are:- the latest development with highlight on the 1.0 official stable release- many new components and themes- dedicated section for #accessibility of #webcomponents , or the way to provide full-fledge accessibility support in UI5 Web Components- our future plansNote: The session is suitable for application and component developers, with or without experience in UI5 Web Components.Event: #UI5conHYBDIRD2022Speaker: Ilhan Myumyun, SAP | Elena Stoyanova, SAP---00:00 Introduction01:03 UI5 Web Components Story04:23 UI5 Web Components 1.008:05 UI5 Web Components Enterprise Qualities08:44 Accessibility15:18 #theming 16:11 #globalization 18:20 UI5 Web Components in #react, #angular, #vue, #seltes19:23 Demo: Compare UI5 Web Components in React with UI5 Web Components in Vue20:32 UI5 Web Components in Production23:19 UI5 Web Components in UI528:54 UI5 Web Components Ecosystem32:30 UI5 Web Components Roadmap34:05 Q/A34:28 Are there templates ready for UI5 Web Components in Business Application Studio?35:20 Are there any special things to consider if you develop a custom theme and want to use it with Web Components?36:46 Why would someone need a layout UI like the flexible column layout as a web component, shouldn't this be done via pure CSS? Are you planning to replace or mimic all sap.m controls?38:07 Isn't enabling different kinds of programming models (React, Angular, Vue, ...) bringing a complexity to UI5 Web Components? Are those bundles separately or are they all in one?39:24 If you have already an existing Angular application is it easy to convert it to UI5 Web Components?40:58 What would be your best suggestion in order to build an Object Page layout?43:19 Would it be beneficial to mix Web Components with standard controls in UI5 for better performance?44:27 Does SAP provides support for Web Components in case of issues?45:36 Are the UI5 Web Components stable to be used in UI5?---ResourcesSlides: openui5.org/ui5con/germany2022/slides/2022-UI5con-1_4-UI5WebComponents_1.0.pdfUI5 Web Components Homepage: sap.github.io/ui5-webcomponentsGitHub Repository: github.com/ilhan007/ui5con-appBlog Post (UI5) Web Components enablement for OpenUI5/SAPUI5: blogs.sap.com/2022/03/10/ui5-web-components-enablement-for-openui5-sapui5UI5 Web Components in UI5: sdk.openui5.org/api/sap.ui.webc
UI5con HYBRID 2022: Uncovering the hidden gem - UI5 developer tools UI5 2022-08-02 | Although not talked about much, #OpenUI5 offers one of the best debugging tools out of the box for a UI framework. In this session, we revisit and provide a comprehensive guide to this hidden gem.In this lighting talk, you will be learning how to use the combination of #UI5diagnosis tool, #UI5inspector", browser developer tools effectively to upgrade your developer experience.Event: #UI5conHYBDIRD2022Speaker: Vivek Gowda, INTEGRTR | Nitish Mehta, INTEGRTR---00:00 Introduction01:17 The evolution of front-end developers05:08 Debugging basics with Chrome Developer Tools06:27 Debugging in UI507:28 UI5 Diagnostic Tools07:34 UI5 Inspector08:24 Overview: UI5 developer tools08:50 Demo: Debugging with UI5 Diagnostic12:21 Demo: Debugging with UI5 Inspector14:52 Recapping our learnings16:51 Questions & Answers---ResourcesSlides: openui5.org/ui5con/germany2022/slides/2022-UI5con-1_2-Nitish-Mehta-Uncovering_the_hidden_gem-UI5_developer_tools.pdfUI5 developer tools collection: ui5con2022.integrtr.comDebugging in UI5: sdk.openui5.org/topic/c9b0f8cca852443f9b8d3bf8ba5626ab#loioc9b0f8cca852443f9b8d3bf8ba5626abUI5 Diagnostics: sdk.openui5.org/topic/6ec18e80b0ce47f290bc2645b0cc86e6#loio6ec18e80b0ce47f290bc2645b0cc86e6UI5 Inspector Chrome Extension: chrome.google.com/webstore/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo?hl=en
UI5con HYBRID 2022: Developing with SAPUI5 smart controls - Time is money UI5 2022-08-02 | #SAPUI5 #smartcontrols are OData protocol driven controls. This means that their behavior and visuals will depend on OData EDM data type and provided annotations by the backend. Applications cut their development time when using smart controls by reducing the necessary code on processing the user interactions. This way application can focus on the development of the business logic. Especially when handling currencies, unit of measure, date and time data there can be many pitfalls where applications might fail to deliver expected user experience. This is even more obvious when having fleet of applications, to provide necessary alignment across the board. We want to show all the latest advancements for some of the #ODataV2 smart controls like, #smartfilterbar, #smartfield and #valuehelp. Specifically, what coding and configurations are needed when using date and time fields, when someone needs date/time semantics for single dates like today, tomorrow or ranges like next week, next quarter, etc. We’ll showcase, how currency and unit of measure can have customized definition by the backend using annotation. So that proper validation, scale and precision can be achieved on the UI side. Along these you’ll see number of other highlights that improve accessibility and user experience in general.Event: #UI5conHYBDIRD2022Speaker: Dobromira Boycheva, SAP | Evdokia Yordanova, SAP---00:00 Introduction01:22 Dynamic date range filter options05:32 Enable dynamic date range filter features06:54 Dynamic date range: DateTimeOffset09:40 Custom code list for currency and unit of measure14:45 Screen reader and keyboard handling: Value help dialog accessibility improvements17:06 Documentation references17:30 Questions & Answers---ResourcesSlides: openui5.org/ui5con/germany2022/slides/2022-UI5con-1_3-Evdokia-Yordanova-Time_Is_Money.pdfGitHub project: github.com/dobromiraboycheva/UI5Con2022DemoDeployed application: dobromiraboycheva.github.io/UI5Con2022DemoSmart filter bar samples: ui5.sap.com/#/entity/sap.ui.comp.smartfilterbar.SmartFilterBarBlog post UI5 Custom Currency and Unit of Measure for OData V2 smart controls: blogs.sap.com/2021/07/17/ui5ers-buzz-59-ui5-custom-currency-and-unit-of-measure-for-odata-v2-smart-controls
