DEV160 - Scale Application Development with SAPUI5

Description

This repository contains the material for a beginner workshop about developing applications with SAPUI5, based on the the SAP TechEd 2021 session called DEV160 – Scale Application Development with SAPUI5.

Overview

In this session, you will learn about developing web applications with SAPUI5. You will use the SAP Business Application Studio as development environment and build a small application to get familiar with our latest developer tools and recommendations. The recording of the workshop can be found here.

Requirements

The requirements to follow the exercises in this repository are:

• Get a free trial account on SAP BTP; see this tutorial.
• Enable Cloud Foundry and create an organization e.g. ui5-cloud-foundry; see the help portal.
• Set Up SAP Business Application Studio for development; see this tutorial.
• Be excited about the power of SAP technologies to make your developer life easier.

Exercises

• Introduction
• Getting Started
• Exercise 1 - Project Setup Using Business Application Studio
  • Exercise 1.1 - Create a New UI5 Application
  • Exercise 1.2 - Try out the generated Application
• Exercise 2 - Basic UI5 Configuration and View Creation
  • Exercise 2.1 - Switch to SAP Fiori 3
  • Exercise 2.2 - Create Sensors.view.xml
  • Exercise 2.3 - Add Dependencies
  • Exercise 2.4 - Enable Routing for Sensors.view.xml
• Exercise 3 - Show Sensor Content
  • Exercise 3.1 - Import Sensor Data
  • Exercise 3.2 - Configure a Data Service
  • Exercise 3.3 - Add a GridList
  • Exercise 3.4 - Add Data Binding
• Exercise 4 - Introduce Localization
  • Exercise 4.1 - Replacing Hard Coded Text with i18n Variables
  • Exercise 4.2 - Add Additional Languages
  • Exercise 4.3 - Configure Supported Languages
• Exercise 5 - Improve Visualization
  • Exercise 5.1 - Enhance Sensors.view.xml
  • Exercise 5.2 - Create Sensors.controller.js
  • Exercise 5.3 - Assign Controller to View
  • Exercise 5.4 - Create your first Formatter
  • Exercise 5.5 - Add the Formatter in your View
• Exercise 6 - Filtering With the IconTabBar
  • Exercise 6.1 - Add new IconTabFilters to the Sensors.view.xml
  • Exercise 6.2 - Implement the Filtering
  • Exercise 6.3 - Assign the Filtering to the IconTabBar
  • Exercise 6.4 - Display the Total Number of Sensors in Every IconTabFilter
• Exercise 7 - Fragment Containing a SelectDialog
  • Exercise 7.1 - Create a new Fragment Definition
  • Exercise 7.2 - Implement the Dialog Opening Logic
  • Exercise 7.3 - Add a Dialog Opening Button
  • Exercise 7.4 - Implement the 'Filter Customer' Logic
  • Exercise 7.5 - Implement the 'Select Customer' Logic
  • Exercise 7.6 - Assign the 'Customer Change' and 'Customer Select' Logic to the Dialog
• Exercise 8 - Second View with Navigation
  • Exercise 8.1 - Create SensorStatus.view.xml
  • Exercise 8.2 - Configure the 'manifest.json' file
  • Exercise 8.3 - Implement the Navigation to the New View
  • Exercise 8.4 - Assign the Navigation Logic to the Sensor Items
  • Exercise 8.5 - Create SensorStatus.controller.js
  • Exercise 8.6 - Implement the Back-Navigation to Sensors.view.xml
• Exercise 9 - Card with NumericHeader
  • Exercise 9.1 - Add a Card to SensorStatus.view.xml
  • Exercise 9.2 - Enhance SensorStatus.controller.js
  • Exercise 9.3 - Add a NumericHeader to the Card
• Exercise 10 - Chart with DataBinding
  • Exercise 10.1 - Create the Chart
  • Exercise 10.2 - Master the Chart
• Exercise 11 - Deployment to SAP BTP, Cloud Foundry runtime
  • Exercise 11.1 - Create Space in Cloud Foundry
  • Exercise 11.2 - Login to Cloud Foundry
  • Exercise 11.3 - Set Organization and Space
  • Exercise 11.4 - Configure App Router for Redirect
  • Exercise 11.5 - Configure Your UI5 Application
  • Exercise 11.6 - Build Your Application
  • Exercise 11.7 - Deploy Your Application
• Exercise 12 - Develop your own Control
  • Exercise 12.1 - Create the custom control code
  • Exercise 12.2 - Beautify your Thermometer Control

Download and Installation

Follow these steps to get the code or do the exercises step by step.

Known Issues

No known issues.

Contributing

The content of this repository is meant for a UI5 course. Only course teachers will make contributions to this repository. If you want to enhance the content of this repository feel free to fork it. Bug fixes are welcome, though.

How to obtain support

Support for the content in this repository is available during the actual time of the online session for which this content has been designed. Otherwise, you may request support via the Issues tab.

Stay in touch

Stay in touch with the community by choosing your favourite channel.

UI5:

• Landing page: OpenUI5 Website
• Podcasts series: UI5 Newscast
• Blog posts: UI5ers Buzz
• 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
• Twitter: @sapopensource

License

Copyright (c) 2021 SAP SE or an SAP affiliate company. All rights reserved. This repository is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.