Boost Your Productivity In Developing SAPUI5 apps With SAP Fiori Tools

Overview

SAP Fiori tools make it faster and easier to create SAPUI5 apps. Get hands-on experience on great efficiency features, such as the page editor to add and configure page content, guided answers to fast-track issue resolution, TypeScript support and more. SAP Fiori tools support not only SAP Fiori elements, but also offer features to scale the creation of SAPUI5 custom apps and to leverage the flexible programming model available for the floorplans provided by SAP Fiori elements for OData V4.

Target Application

Making a wire frame is a great way to visualize the app.

Requirements

There are no special requirements to follow the exercises in this repository.

Exercises

• Getting Started - Setting up your Development Environment
  • Setting Up SAP Business Application Studio
  • Accessing SAP Business Application Studio
  • Creating the Development Space
  • Getting the Sample Scenario
• Exercise 1 - Generating an SAP Fiori Elements App
  • Exercise 1.1 - Using the SAP Fiori Tools Application Generator
  • TypeScript Enablement
  • Exercise 1.2 - Starting the App
  • Usage of Guided Answers extension by SAP for Trouble Shooting
• Exercise 2 - Flexible Programming Model: Using Fiori Elements Building Blocks on a Custom Page
  • Exercise 2.1 Guided Development: Adding Filter Bar Building Block
  • Exercise 2.2 Adding Table Building Block
  • Exercise 2.3 Page Map: Add Object Page and Switch to Flexible Column Layout
• Exercise 3 - Improve Page Layout and add UI5 Freestyle Controls
  • Exercise 3.1 - Adopt Dynamic Page Layout to the Main Page
  • Exercise 3.2 - Add Controller Functions for Setting Filter Status
  • Exercise 3.3 - Add Generic Tile Slider
• Exercise 4 - Page Map: Configuring the Object Page Layout
  • Exercise 4.1 - Add Actions to Object Page Header
  • Exercise 4.2 - Adding Group and Form Sections
• Exercise 5 - Flexible Programming Model: Extending the Object Page with a Custom Section and a Building Block
  • Exercise 5.1 Add LineItem annotation via LSP Support
  • Exercise 5.2 Add Custom Section
  • Exercise 5.3 Use UI5 Language Assistant
  • Exercise 5.4 Testing the Table Building Block
• Exercise 6 - Page Map: Add Micro Chart Table Column
• Exercise 7 - Guided Development: Adding Building Block Chart
  • Exercise 7.1 - Use Guided Development to Add Building Block Chart
  • Exercise 7.3: Implementing the Chart's Selection Change Handler
  • Exercise 7.4 Testing the Chart's Event Handler
• Exercise 8 - Page Map: Adding a Controller Extension
  • Exercise 8.1 - Using the Page Map to Add a Controller Extension
  • Exercise 8.2 Move XML Fragment to App Folder
  • Exercise 8.3 Testing the Controller Extension

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) 2022 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.