SAP UI5/ODATA/CDS/Fiori/Fiori- Elements/CAP-M

Real Time Training

Highlights of the Training

 We cover Exception Real Time scenarios, issues
 Very Passionate to Teaching
 Everyday class video, soft copy of code, notes
 24/7 support during the practice
 2 Months server access free
 Maintain SAP standard coding guidelines, naming conventions
 We develop all concepts practically with complete real time standards more
over we develop a Project as part of this training with complete real time
standards. (Employee Management Application)

Exceptional Real Time Scenarios that We Cover

 Upload XL/CSV data from local machine into UI5 Application and in turn to
backend Table
 Batch Operations for CRUD
 Customizing the Smart table
 Cross App Navigation between the Apps in Fiori launch pad
 Cross App Navigation along with Parameters
 Fiori Launch pad customization
 Transporting Fiori Tiles, Catalogs, Groups to other systems
 Creating Your Own Theme and transporting to other systems
 Ordering of Groups in the launch pad
 Translating Fiori Tiles, Groups into Multiple languages
 Export Table data to XL/CSV
 Integrating third part library into SAPUI5 (export to PDF)
 List Report application extension
 Solving the system upgrade issues, cache issues
 Clearing cache to avoid the cache issues
 Performance Improvement techniques in data loading.
 Debugging, changing code in debug mode
  Checking the network calls for debugging complex apps

Summary of Course Content

• Complete SAPUI5/ODATA/Fiori/Fiori elements/CDS All Topics with BAS
and WEBIDE
• End to end Real time project development and go live to Fiori launch pad
on premise and cloud as part of our Training (Highlight of our Training)
• Extending Standard Fiori Apps
• Fiori Template based apps like (Master Detail, worklist)
• All Fiori elements applications (List report, ALP, OVP) with local and CDS
annotations and guided development
• All Smart controls & list report app using smart controls)
• Batch Operations for CRUD
• Charts application and dynamically changing charts
• Deploying Applications to server (cloud and on premise) using BAS
• Standard Fiori app configuration into Launch pad
• Custom Fiori Apps configuration into Launch pad (cloud and on premise)
• Cross Application Navigation between the Applications in FLP
• CAPM Application development (DB, Service and UI) (Bonus Topic)

Detailed Course Content

Pre Requisite Training:

 Basics of HTML, Java script, CSS

 Basics of ABAP

SAP UI5/OData/Fiori Overview:

 What is SAPUI5?
 Previous technologies before SAPUI5.
 Disadvantages of previous technologies.
  Advantages of Sapui5 and how it overcomes the disadvantages of previous
technologies.
 Architecture of SAP UI5 (MVC).
 Understanding each layer of MVC model. 
 Landscape of SAPUI5 Fiori applications. 
 Clear understanding on End to End Data flow in SAPUi5/Fiori apps.
 What is SAP Fiori 
 Difference between Ui5 and Fiori Applications.

Introduction to SAP WEBIDE/Business Application Studio(BAS) and /Business

Technology Platform(BTP)
 Overview of SAP Cloud platform/BTP
 Advantages of SAP WEBIDE/BAS 
 Creating an Account in BTP.
 Accessing the WEBIDE/BAS from Hana cloud platform/BTP.
 Creating a Sample project using WEBIDE/BAS
 Detail explanation on each file and folder in the project

Initial flow of execution in SAPUI5 Application

 Creating the Project
 Understanding index.html,bootstrap,shell, Component.js and manifest.json files
in depth.
 Understanding the App Base view and View container.

Routing and Navigation:

 Detail explanation on Routing 
 Creating Two views for the navigation
 Configuring the Routes and Targets for the views in manifest.json
 Navigate from one page to other using URL Pattern 
 Navigation from one view to other view using buttons.
 Exercise on Creating a sample views and understanding the complete flow with
navigation between the pages.

Introduction to View & Controllers

 Creating a view 
 Understanding the view’s Controller
 Understanding the Controller’s Hook methods 
  Exercise on Creating a sample view and Implementing controller methods

Basis UI elements in SAPUI5

 Working with different properties of basic UI elements like Text, Label, Input,
Button etc.
 Clear explanation on various properties and their purpose as per real time
projects.
Dynamically changing UI element properties.
 Changing the UI element behavior at runtime 
 Exercise for enable disable input fields at runtime 
 Exercise for show hide UI elements at runtime.
 Exercise for setting dynamic text etc.
Introduction to Different Layouts for Screen designing
 What is a Layout 
 Various Layouts in SAP UI5
 Working with Simple form layout , Matrix layout , Grid Layouts
 Working with HBOX, VBOX, Flexbox 
 Working with Panel , Icon tab bar 
 Working with Object Header 
 Working with Object Page Layout 
 Displaying the form using 2 column and 4 columns design.
 Exercise on Creating a Form Using various layouts

Validating the User Input  

 Types of Validation
 Exercise on Mandatory data validation
 Exercise on valid data validation (like.. email, phone number, pin code)
 Exercise on Showing red color input field and error messages.
Message Handling 
 Various types of Messages in SAP UI5
 Showing ERROR, SUCCESS, WARNING, CONFIRM, INFORMATION Messages
 Exercise on Showing various messages in SAP UI5 
Different Kinds of Models
  JSON Model 
 OData Model 
 Resource Model
 Working with all Models and understand when to use which model. 
Binding 
 Understanding the Binding Concept
 Various types of Binding
 Property Binding
 Aggregation Binding
 Element Binding
 Expression Binding
 Exercise on Binding the UI elements with both JSON and OData Models

Passing data from one view to other

 Different ways of passing data from one view to other 
 Passing the data using json Model
 Passing data using Model + binding concept
 Passing data using Router with parameter
 Passing data using element binding concept
 Exercise on Passing data from one view to other in all these ways

Playing with Complex UI Elements with JSON DATA

 Overview on different Categories of UI elements like (simple, value holders,
complex, layouts, dialog etc ..)
 Working with drop downs, combo box, multi combo box
 Working with radio buttons, check box and value help (F4 help)
 Working with Tables and List UI elements 
 Practical Exercise on all these UI elements 
Working with Popup Dialogs and Fragments
 Introduction to Fragments for reusable scenarios
 Using Fragments for Popup dialogs using dialog UI element
 Implementing F4 help functionality using Fragments 
 Exercise on Popup Dialogs 
Working with Popover
  Introduction to Popover for reusable scenarios
 Using Fragments for Popover using Popover UI element
 Implementing PopOver functionality using Fragments 

Working with Formatters

 Introduction to formatter
 Creating formatter.js and Implementing logic for various data formatting
 Practical examples with date formatter, currency formatter etc…
 Calling the formatter logic from view

HANA Cloud Connector(HCC) for front end to back end connectivity 

 Installing HANA cloud connector to connect WEBIDE to SAP gateway system
 Configuration of HCC to point to gateway system
 Creating Hana cloud platform destination
 Establishing connection from WEBIDE to SAP Gateway system.
Working with Complex UI elements with ODATA Model 
 Creating ODATA Model to connect to ODATA service created in the back end 
 Repeating all the UI elements with real back end data using ODATA Model like
dropdown, combobox, multicombobox, radiobuttons, List , Table etc.
 Property binding, Aggregation binding and Element binding using ODATA Model
 Implementing F4 help functionality using real back end data using ODATA Model 
 Exercise on all these concepts practically with real time examples.
Working with ODATA Model for CRUD operations
 Creating ODATA Model to connect to ODATA service created in the back end 
 Consuming ODATA service to get the real back end data and perform CRUD
operations from SAPUI5 Application.
 Creating records from UI5 application
 Updating records from UI5 application
 Deleting records from UI5 application
 Reading records from UI5 application

Working with Create Deep entity and Expanded entity

 Creating Header data along with multiple line item.
 Creating deep structure in MPC EXT class
  Implementing logic for Create deep entity method in DPC EXT class.
 Using expand parameter to get both header and line item in a single request.

File Upload Download Functionality 

 Uploading the file using Upload collection UI element from sapui5 
 Downloading the file using ODATA service.
Developing Graphs / Charts
 Column chart
 Bar chart
 Pie chart
 line chart
 Dynamically changing the chart Type
 Practical exercise on all the above charts
Internationalization in SAPUI5/Fiori
 Creating i18n folder 
 Maintaining property bundles for various languages
 Binding the text values using the i18n resource model
 Creating a separate property for to maintain text of each language
 Making the application to support for multiple languages 
SAP UI5 end to end Project (With complete real time standards Employee
Management)
 Creating a SAPUI5 application
 Creating 6 views for performing CRUD operations and others
 Navigation between the views 
 Reading the back-end data into the Table in SAPUI5
 Export table data to XL
 Filter Sort Group the data in the table
 Navigation to line item data
 Implementing all CRUD operations in the project 
 Creating deep entities
 Handling File Upload download
 Adding charts
 Adding Batch Create Operations
 Deploying the application to Gateway server.
  Configuring this application to Fiori launch pad.
Batch operations from SAPUI5
 Creating a batch group id for collecting various requests into a single batch
 Performing bulk create, update, delete batch operations from SAPUI5
 Practical exercise on the same
Deploying Apps to On Premise server with WE bide
 Deploying the above created application using deployment wizard in webide
 Providing application name, TR, selecting package details
 Complete the deployment and test apps from server
Deploying Apps to On Premise server with BAS
 Deploying the above created application with commands in terminal
 Providing application name, TR, selecting package details
 Complete the deployment and test apps from server

Deploying Apps to Cloud foundry

 Deploying the above created application with deployment Commands using BAS
 Providing application name, TR, selecting package details
 Complete the deployment and test apps from cloud foundry
Configuring the Tiles in Fiori launch pad (on Premise)
 Creating semantic object
 Open fiori designer to create a Catalog and add tile and target mapping
 Create a Group and add the above tile
 Create Fiori Role in PFCG and add above Group and catalog
 Assign the fiori role to end user
Configuring the Tiles in Fiori launch pad (on Cloud)
  Subscribe to SAP Launchpad service in cloud
 Update the content manager and the html5 content to content manager
 Create a Catalog and add the above tile
 Create a Group and the application
 Create Fiori Role and the application
 Assign the fiori role to end user in Role collection and site settings

SAP FIORI Course Content

Introduction to SAP Fiori
 What is SAP Fiori Application?
 Difference between SAPui5 application and SAP Fiori Application
 Overview on SAP Fiori design guidelines 
 Introduction to custom Fiori application and standard Fiori application.
Creating SAP Fiori Master Detail Application(BAS and webide)
 Create new Fiori master detail application using template
 Select the fields for master page and detail page
 Editing the master and details page code as per our client requirement

Creating SAP Work List Application (BAS and webide)

 Create new Fiori Work List application using template
 Select the fields for the list page
  Select the fields for the object page
 Editing the list page and object page as per client’s requirements

Creating SAP Fiori List Report Application (BAS and webide)

 Create a CDS using eclipse or HANA studio
 Adding annotation to suite list report application
 Use Fiori List report template to create the application
Creating SAP Fiori List Report Application Without Template using Smart Controls
 Create a CDS using eclipse or HANA studio
 Adding annotation to suite list report application
 Use UI5 application with smart controls to generate a Custom List report
application.
Creating SAP Fiori List Report Application Using Local Annotations (Guided
development)
 Create a List report application using the template
 Adding local annotations using annotation modeler
 Run the List report app

SAP Fiori Analytical List Page Application with CDS annotations

 Creating CDS for ALP
 Adding annotations to suit our ALP Application
 Use the Analytical List Page Template to create the ALP Application

SAP Fiori Analytical List Page Application with local annotations (guided development)
 Creating ALP application using BAS
 Adding local annotations to suit our ALP Application
 Use the Analytical List Page Template to create the ALP Application

SAP Fiori Overview Page Application

 Creating Local annotation for OVP
 Adding multiple cards to the OVP Application
 Use Fiori OVP Template to create the OVP Application
SAP Fiori Elements (Smart controls)
 Creating CDS in the back end with annotations
 Creating smart filter
 Creating smart Table/Extension
 Creating smart form
 Creating smart field

Extending a Standard Fiori Application

 Creating Extension project for a standard Fiori Application using SAP WEBIDE
 Using View Modification to hide or show an element
 Using View Extension to extend the UI
 Using View replacement to replace the original code and inject our custom logic
 Controller Extension to extend the functionality
 Controller Replacement to replace the original code and inject our custom logic 
 i18n Extension to maintain custom texts translations

Introduction to SAP Fiori and Architecture

 Embedded architecture 
 Central HUB architecture

SAP Ui5 custom apps configuration in Fiori Launchpad (Cloud and on Premise)
 Creating the semantic object
 Creating Catalog, Tile and group, target mappings
 Creating a PFCG role and adding the catalog and group and assigning it to user.

SAP Fiori standard apps configuration in Fiori Launchpad

 Checking fiori apps library for the prerequisites
 Creating Catalog, create a reference for Tile and target mappings
 Creating a PFCG role and adding the catalog and group and assigning it to user.
Theme Builder 
 Creating a Custom theme using theme builder and applying to launch pad
 Changing the logo, back ground colors as per the client requirements
 Transporting themes to other systems

Others 
 How to solve the cache issues?
 Performance improvement 
 General issues and resolutions.

SAP ODATA Couse Content

Introduction to ODATA and gateway system

 SAP Gate way system and its architecture 
 Components installed in the gateway system to support ODATA 
 Two types of architectures Central HUB and Embedded and its pros & cons  
Gateway service builder to develop ODATA service 
 Creating a project in SEGW t code 
 Creating a custom table in the back end (SE11)
 Creating Entity types, Entity sets and Associations 
DPC & MPC classes and their methods 
 Generating runtime artifacts DPC MPC classes 
 Registering the service in Gateway system.
 Opening the ODATA service in the browser.
Implementing logic for CRUD operations 
 Understanding the DPC and MPC classes and their methods 
 Implementing logic for Create, update, delete, query, and read operations 
 Performing various filters on query operation.
Gateway client to test ODATA services 
 Intro to gateway client 
 Testing all the CRUD operations using gateway client.
 Testing various query options 
Associations and navigations
 Creating Association between the entities.
 Creating navigation property to read the line item data of a corresponding header
item.
 Implementing the logic for header and line item scenario 
Create Deep Insert on entities
 Implementing the logic for Create deep insert 
 Defining the structure for header and internal table for line items 
 Implanting logic for reading both header and line item at a time and storing it in
the table.
GET expanded entity
 Defining the structure for header and internal table for line items 
 Implanting logic for reading both header and line item at a time and storing it in
the deep structure
 Reading both header and line items in a single request.

Media Attachments 
 Implementing the logic for file upload in create stream method of DPC_EXT class
 Implementing the logic for file download in get stream method of DPC_EXT class

Handling Batch request from UI5

  Redefining change set begin, change set end to support batch operations from
sapui5 application

Standard ODATA Service Extension (By Redefining Service -Approach 1)

 Identifying the standard odata service
 Creating a ZODATA service
 Redefine the model using the standard odata service
 Adding new fields to the appropriate entities
 Populating values for the newly added fields

CDS development with annotations and exposing it as ODATA service

 CDS development using Eclipse/HANA studio for EKKO and EKPO tables
 Add various Annotations to it
 Expose the CDS as OData service
 Creating Association b/w the CDS

CDS Annotations for List Report Application

 @UI. LineItem
 @UI. Searchable
 @UI. SelectionField
 @ui.facets
 @UI. DataPoint
 @UI. Identifier
 @UI. Chart
 @UI. End User Text
CDS Annotations for Analytical List Page Application

 @UI. LineItem
 @UI. Searchable
 @UI. SelectionField
 @UI. DataPoint
 @UI. Identifier
 @UI. Chart
 @UI. End User Text
 @chart
 @presentationvarient
  @ui.facets
SEGW OData service by Referring the above CDS created
 Create data model referring the above CDS created
 Generating run time objects
 Implementing Crud operations on the CDS entities

Configuration and Maintenance of Gateway 

 IWFND maint service to add the service
 SICF related configurations 
Creating SAPUI5/Fiori Applications using BAS (Business Application Studio)

 Creating account in SAP cloud platform

 Creating DEV space
 Creating Destination to consume ODATA service
 Creating end to UI5 application in BAS
 Running SAPUI5 application from BAS

Bonus Course (Cloud Application Programming Model)

 Creating CAPM Project
 Creating DB layer in cloud
 Creating service Layer
 Creating UI layer
 Connecting UI layer to service layer
 End to end App development in the Cloud
Duration: 2 Months, Monday –Friday Time: 8-9 AM
Note: The best part of our training is, we develop all concepts practically with
complete real time standards more over we develop a Project as part of this training
with complete real time standards. (Employee Management Application)
Best feedback we got: After attending your training, we can able to work on Real-time
projects easily. 
Looking forward to meet you …