DEV161 - Extend SAP S/4HANA with a Custom UI on SAP Business Technology Platform

Description

This repository contains the material for the SAP TechEd 2020 session called DEV161 - Extend SAP S/4HANA with a Custom UI on SAP Business Technology Platform.

Overview

This session introduces attendees to the end-to-end development flow of an SAP Fiori freestyle application.

Working in the IT department of your company, your mission, should you choose to accept it, is to develop an app that will help procurement identify the inventory levels of your company's products, and which orders will be impacted.

After a bit of thinking, you decided that the best approach would be to create an SAP Fiori freestyle app that follows the Worklist floorplan. Its main view will include a list of products, their inventory level, and the number of units per order. The Details View will include the supplier information, and a list of orders that include the product.

At the end of the session, your application will look like this:

Main View (Worklist)	Details View (Object)

Requirements

The requirements to follow the exercises in this repository are:

• Get a free trial account on SAP BTP Trial; see this tutorial. Choose Europe (Frankfurt) - AWS or US East (VA) - AWS regions.
• Create the Northwind destination within the Cloud Foundry environment; see this tutorial.
• Enable SAP Business Application Studio for development; see this tutorial.
• Be excited about the power of SAP technologies to make your developer life easier.

Exercises

• Exercise 1 - Create SAP Fiori Dev Space
  • Exercise 1.1 - Logon
  • Exercise 1.2 - Create Dev Space
  • Exercise 1.3 - Launch the Development Environment
  • Exercise 1.4 - Preparations for the next exercises
• Exercise 2 - BAS Tour (SAP Business Application Studio Product Tour)
  • Exercise 2.1 - Dev Space Manager
  • Exercise 2.2 - Integrated Development Environment (IDE) - The Big Picture
  • Exercise 2.3 - Customize Settings
• Exercise 3 - Create a New Application from Template
  • Exercise 3.0 - Preparation
  • Exercise 3.1 - Launch Yeoman UI Generator
  • Exercise 3.2 - Install SAP Fiori tools for SAP Fiori freestyle app development
  • Exercise 3.3 - Create Project Using SAP Fiori Worklist Application template
  • Exercise 3.4 - Open the Project's Workspace
• Exercise 4 - Test the Application with Mock Server
  • Exercise 4.1 - Run the Application with Auto-Generated Mock Data
  • Exercise 4.2 - Run the app with User Provided Mock Data
• Exercise 5 - Add Data Filters
  • Exercise 5.1 - UI Modifications
  • Exercise 5.2 - Logic Modifications (Controller)
  • Exercise 5.3 - Run the App Locally in the Dev Space
• Exercise 6 - Connect to Backend
  • Exercise 6.1 - Modify ui5.yaml
  • Exercise 6.2 - Modify package.json
  • Exercise 6.3 - Exercise 6.3 Modify webapp/manifest.json
  • Exercise 6.4 - Run the App Locally in the Dev Space
• Exercise 7 - Run the app on CF
  • Exercise 7.1 - Configure the App to Use the CF Runtime
  • Exercise 7.2 - Build for the CF Runtime
  • Exercise 7.3 - Log in to CF
  • Exercise 7.4 - Deploy to CF
  • Exercise 7.5 - Run the App on CF
• Exercise 8 - Apply CI/CD to SAP Fiori Development on SAP Business Technology Platform - GitHub Setup
  • Exercise 8.1 - Create a GitHub Project
  • Exercise 8.2 - Create Personal Access Token for GitHub
  • Exercise 8.3 - Add Git repository to Fiori project
• Exercise 9 - Apply CI/CD to SAP Fiori Development on SAP Business Technology Platform - CICD Setup
  • Exercise 9.0 - SAP Continuous Integration and Delivery
  • Exercise 9.1 - Enable SAP Continuous Integration and Delivery
  • Exercise 9.2 - Configure Credentials in SAP Continuous Integration and Delivery
  • Exercise 9.3 - Configure a job in SAP Continuous Integration and Delivery
  • Exercise 9.4 - Configure a GitHub Webhook
• Exercise 10 - Apply CI/CD to SAP Fiori Development on SAP Business Technology Platform - App Modification
  • Exercise 10.1 - Make a Change in the Project
  • Exercise 10.2 - Update the Project's Git Repository
• Exercise 11 - Apply CI/CD to SAP Fiori Development on SAP Business Technology Platform - CICD Monitoring
  • Exercise 11.1 - Verify Build Success in SAP Continuous Integration and Delivery
  • Exercise 11.2 - Access the Application
• Exercise 12 - Add Columns to Worklist
  • Exercise 12.1 - Add Columns to Worklist
  • Exercise 12.2 - Run the App Locally in the Dev Space
• Exercise 13 - Add Supplier Info to Details Page
  • Exercise 13.1 - UI Modifications
  • Exercise 13.2 - Run the App Locally in the Dev Space
  • Exercise 13.3 - Logic Modifications (Controller)
  • Exercise 13.4 - Run the App Locally in the Dev Space
• Exercise 14 - Add Breadcrumbs to the Details Page
  • Exercise 14.1 - UI Modifications - Breadcrumbs
  • Exercise 14.2 - Run the App Locally in the Dev Space
• Exercise 15 - Add Orders List to Details Page
  • Exercise 15.1 - UI Modifications - Orders List
  • Exercise 15.2 - Formatter Modifications
  • Exercise 15.3 - Run the App Locally in the Dev Space
• Exercise 16 - Useful CF Commands
  • Exercise 16.0 - Preparations
  • Exercise 16.1 - cf help
  • Exercise 16.2 - cf logout
  • Exercise 16.3 - cf html5-list
  • Exercise 16.4 - cf mtas
  • Exercise 16.5 - cf undeploy
  • Exercise 16.6 - cf deploy
  • Exercise 16.7 - Run the App on CF

Start the exercises here.

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.

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.