Last year, SAP launched SAP Build to empower business experts to construct applications, implement automations and compose business sites. This year, the Build family is being expanded to offer a powerful shortcut for cloud application development with the introduction of SAP Build Code.
SAP Build Code unifies essential application development tools such as SAP Business Application Studio, SAP Cloud Application Programming Model (CAP), SAPUI5, SAP Mobile Services, and SAP Document Management Services. It is powered by the generative AI copilot, Joule, and enables interoperability with ABAP Cloud. Additionally, it facilitates seamless collaboration with SAP Build's low-code solutions and provides robust governance and lifecycle management features.
This hands-on exercise will assist you in learning how to build SAPUI5 applications using SAP Build Code.
Learn how to develop an SAPUI5 freestyle application using SAP Build Code, TypeScript, and the latest tools and best practices from SAP. In general, when using SAPUI5, you can decide whether you would like to implement applications using TypeScript or JavaScript. This tutorial, however, is exclusively using TypeScript. Don't be afraid, the difference is very small and not hard to understand.
Completing the following exercises will guide you through developing web applications using the SAPUI5 framework and TypeScript.
Exercise 0 - Getting Started
Exercise 1 - Project Setup Using Business Application Studio (browse sources)
Exercise 2 - Add First Content (browse sources)
Exercise 3 - Show Sensor Content (browse sources)
Exercise 4 - Introduce Localization (browse sources)
Exercise 5 - Improve Visualization (browse sources)
Exercise 6 - Filtering With the IconTabBar (browse sources)
Exercise 7 - Fragment Containing a Dialog (browse sources)
Exercise 8 - Second View with Navigation (browse sources)
Exercise 9 - Card with Sensor Details (browse sources)
You can not only access the resulting code after each exercise by following the links above, but also import it to SAP Business Application Studio. Instructions how to do this can be found here.
Start with exercise 0 here.
Please read CONTRIBUTING.md to understand the contribution guidelines.
Please read the SAP Open Source Code of Conduct.
Support for the content in this repository is available during the actual time of the online session on November 2nd for which this content has been designed. Otherwise, you may ask for support via the Issues tab.
Stay in touch with the community by choosing your favourite channel.
UI5:
- Landing page: OpenUI5 Website
- Podcasts series: UI5 Newscast
- Blog posts: UI5ers Buzz
- X / Twitter: @openui5
- Slack: Get Access to OpenUI5 Slack Workspace
SAP Open Source:
- Landing page: Run better together with open source
- Podcasts series: The Open Source Way
- Blog posts: open source on SAP Community
- X / Twitter: @sapopensource
In case you're interested in advanced topics after completing all the above exercises, here are some additional tutorials to deepen your knowledge in application development leveraging UI5:
SAP Blog about the Flexible Programming Model
CAP & UI5 development in an example application
UI5 and TypeScript
Copyright (c) 2023 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.