IIS160 - Accelerate the Development of SAP Fiori Apps Using SAP Fiori Elements

Description

This repository contains the material for the SAP TechEd 2021 session
IIS160 - Accelerate the Development of SAP Fiori Apps Using SAP Fiori Elements.

Overview

The use of SAP Fiori elements with OData V4 and SAP Cloud Application Programming Model allows you to
improve the efficiency of developing SAP Fiori apps.
In this session you will get hands-on experience developing a standard list report or object page app
using SAP Fiori elements, and then extend it using the flexible programming model.
Learn how to use the new features provided with SAP Fiori tools to simplify how you add annotations
and to personalize the appearance of your 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 in an SAP BTP Trial Account
    • New Trial Users
    • Existing Trial Users
    • 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 Adding an App Preview Script
  • Exercise 1.3 Starting the App

• Exercise 2 Enhancing the UI by Using the SAP Fiori tools Page Map

  • Exercise 2.1 Enable Data Load During Start of the App
  • Exercise 2.2 Change Sequence of a Table Column in the List Report
  • Exercise 2.3 Adding Criticality to a Table Column
  • Exercise 2.4 Adding Text and Text Arrangement to a Field
  • Exercise 2.5 Change Form Field Order and Display Type
  • Exercise 2.6 Adding a new Field Group

• Exercise 3 - Fine-Tuning the UI

  • Exercise 3.1: Add Table Line Criticality
  • Exercise 3.2: Adding a side effect to the Trees-4-Tickets property
  • Exercise 3.3: Adding a Semantic Key

• Exercise 4 - Flexible Programming Model: Extending the App with Fiori Elements Building Blocks

  • Flexible Programming Model Overview
  • Exercise 4.1 Remove Existing Section via Page Map
  • Exercise 4.2 Adding a Custom Section via Page Map
  • Exercise 4.3 Replace Generated XML Fragment Content
  • Exercise 4.4 Testing the Building Block
  • Exercise 4.5 Adding a Side Effect

• Exercise 5 - Adding a Micro Chart to the Table Building Block

  • Exercise 5.1 Add Annotations UI.Chart and UI.DataPoint
  • Exercise 5.2 Enhance UI.LineItem Annotation via Code Completion
  • Exercise 5.3 Add Header Facet to Booking Supplements Page

• Exercise 6 - Flexible Programming Model: Using the Chart Building Block

  • Exercise 6.1 Extending the Service Definition
  • Exercise 6.2 Adding Aggregation Capabilities to the Entity Container
  • Exercise 6.3 Adding the @UI.Chart Annotation
  • Exercise 6.3 Adding the Chart Building Block to the Custom Section
  • Exercise 6.4 Implementing the Chart's Selection Change Handler
  • Exercise 6.5 Testing the Chart's Event Handler

• Exercise 7 - Flexible Programming Model: Changing the Edit Flow by Implementing a Controller Extension

  • Exercise 7.1 Move XML Fragment and Controller File to App Folder
  • Exercise 7.2 Adding a Controller Extension to the Manifest
  • Exercise 7.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) 2021 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.