teched2022-DT181 icon indicating copy to clipboard operation
teched2022-DT181 copied to clipboard

Boost Your Productivity in Developing SAP Fiori Apps

REUSE status

DT181 - Boost Your Productivity in Developing SAP Fiori Apps

Description

This repository contains the material for the SAP TechEd 2022 session called
DT181 - Boost Your Productivity in Developing SAP Fiori Apps.

Overview

Welcome to the workshop DT181 - Boost Your Productivity in Developing SAP Fiori Apps.
This workshop will guide you step-by-step through the process of creating a SAPUI5 custom app and blending it with the SAP Fiori Elements Flexible Programming Model which is available with SAP Fiori elements floorplans for OData V4.
Based on a SAP Cloud Application Programming Model service equipped with basic annotations, you will learn how to assemble your custom design from SAP Fiori Elements Building Blocks and leverage Controller Extensions with the help of SAP Fiori tools and the SAP Fiori Elements Flexible Programming Model.

Target Application

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

Trial Setup

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
    • 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 4.3 - Adding a Table Section
  • Exercise 5 - Page Map: Add Micro Chart Table Column
  • Exercise 6 - Flexible Programming Model: Extending the Object Page with a Custom Section and Building Blocks
    • Exercise 6.1 Remove existing Section via Page Map
    • Exercise 6.2 Adding a Custom Section via Page Map
    • Exercise 6.3 Replace Generated XML Fragment Content
    • Exercise 6.4 Testing the Table Building Block
  • 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.