teched2020-DEV164 icon indicating copy to clipboard operation
teched2020-DEV164 copied to clipboard

DEV164 - Developing Apps with SAPUI5

REUSE status

DEV164 - Developing Apps with SAPUI5

Description

This repository contains the material for the SAP TechEd 2020 session called DEV164 – Developing Apps with SAPUI5.

Overview

In this session, you will learn about developing web applications with SAPUI5. We 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.

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 - Create a Run Configuration
  • 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

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 targeting the session DEV164 - Developing Apps with SAPUI5 at SAP TechEd 2020. Only sesson speakers will make contributions to this repository. If you wanna enhance the content of this repository feel free to fork it.

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:

SAP Open Source:

License

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