Developing Sap Ui5 Apps Using Fiori Elements

List Report App | Analytical List Report app | Worklist app | Overview page

What you'll learn

Create UI5 Fiori Elements apps

Create List Report and Worklist app

Create Analytical List page and Overview Page apps

Understand the Architecture of Fiori elements

Requirements

You should have a basic understanding of ABAP programming and CDS Views

Description

Hi, Welcome to the course on Developing SAP UI5 apps using Fiori Elements.In this course you will learn how to build SAP Fiori apps using the same technologies and tools that SAP uses for SAP Fiori app development for SAP S/4HANA: SAP Fiori elements, SAP Fiori tools, and SAPUI5. We will build an SAP Fiori elements app from the ground up and use Web IDE for creating the apps. We will generate the app to start the process, configure it without coding and enhance it with annotations.The course is divided into following sections:Introduction and Architecture of Fiori Elements appBuilding your First Fiori Elements app using List Report Floor PlanCreating an Analytical List Page appCreating a Worklist Page appCreating an Overview Page appCourse Structure:The Course is structured into Theory and Demos.This is a hands-on course for developers. We recommend you practice using the examples and perform the exercises to gain the maximum benefit from the course.Who is this course for?· All ABAP and UI5 Developers/Consultants/Architects who code in ABAP/UI5 and want to learn how develop applications in S/4HANA.· This course is recommended for all SAP Consultants or Architects who work in ABAP/UI5.Are there any course requirements or prerequisites?· Some experience in basics of SAP ABAP, CDS Views, OData.Who this course is for:· ABAP Developers, Development Architects, Team Leads, Solution Architects

Overview

Section 1: Developing SAP UI5 apps using Fiori Elements

Lecture 1 Introduction and Course Structure

Lecture 2 Benefits of Fiori Elements and Floor plans

Lecture 3 Fiori Elements v/s Free Style UI5 apps

Lecture 4 Architecture of Fiori Elements apps

Section 2: Building your first Fiori Elements app

Lecture 5 Building your first Fiori Elements app

Lecture 6 Create Basic views for Sales Order app

Lecture 7 Add Association in the Basic Views

Lecture 8 Create Consumption Views

Lecture 9 Create OData service using Gateway Service Builder (SEGW)

Lecture 10 Create UI5 List Report Fiori Elements app

Lecture 11 Add Columns to the List Report table

Lecture 12 Add Search fields to the List Report

Lecture 13 Add Header Info, Column Labels and hide fields from Settings

Lecture 14 Add Semantic Key and Value Help

Lecture 15 Adding UI annotations for Object Page

Lecture 16 Adding Header Facets in the Object Page

Lecture 17 Adding General Information Facet in the Object Page

Lecture 18 Adding annotations for Items table

Lecture 19 Displaying Item details in Object Page

Section 3: Create Analytical List Page App

Lecture 20 Analytical List Page Introduction

Lecture 21 Steps to Create ALP App

Lecture 22 Create ALP Consumption View and OData Service

Lecture 23 Create ALP Fiori Elements App

Lecture 24 Add Compact Filter fields to the ALP Page

Lecture 25 Adding Content Area Chart

Lecture 26 Add Visual Filter to the header area

Section 4: Create Worklist App

Lecture 27 Worklist App Introduction

Lecture 28 Create Worklist Consumption CDS view

Lecture 29 Create OData Service and UI Project

Lecture 30 Add Worklist Table and Header info

Lecture 31 Add Header Facets to Header Object Page

Section 5: Overview Page App

Lecture 32 Overview Page App Introduction

Lecture 33 Steps for Creating Overview page app and Creation of Consumption View

Lecture 34 Create Overview Page UI5 app

Lecture 35 Add a Table Card to Overview Page

Lecture 36 Create a List Card

Lecture 37 Add a Stack Card to the Overview Page

All ABAP and UI5 Consultants who want to learn how to create Fiori Elements UI5 apps