Sap UI5 and Fiori Training

https://www.anubhavtrainings.com

Duration: 40+ Hours – A promise of no copy paste

SAP UI5 AND FIORI TRAINING WITH ODATA ON

WEBIDE WITH XML VIEWS – NO PRE-REQUISITE
(Complementary OOPS ABAP will also be provided) – Video/LIVE mode training

Target Audience: You are working in SAP domain or fresh start your career in
SAP as a frontend Developer / Full Stack Developer. May be already working
in SAP technologies like ABAP, BO, BI, BSP, Webdynpro technology. You
seeing a shift in industry to new UX and wants to adapt yourself to new
technologies.

Course Roadmap

https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
Sap UI5 and Fiori Training
https://www.anubhavtrainings.com

Phase 1: Foundation for SAP UI5

Getting Started

· What is SAP UI5 framework?

· Development tools and introduction
· Introduction to SAP WebIDE personal edition and WebIDE Full Stack Edition
· WebIDE Setup and installation
· Configuration from local computer for WebIDE
· Connect WebIDE to gateway
· Destination configuration

HTML5
· Creating our first web page
· Line breaks, paragraphs and headers
· Bold, italics and comments
· Lists
· Linking to another page
· images
· directory structures
· New audio tag, New video tag
· Table
· Forms, Get/Post method, action
· Document Object Model (DOM)
· Relating HTML Elements

Cascading Style Sheet (CSS)

· External style sheet

· Font properties
· CSS comments
· Box model, padding, border, margin, padding
· Classes
· Div and Span
· Working with colors
· Background images
· ID's, child selectors, pseudo classes
· Styling links, styling lists
· Rounded corners
· Linear gradient

https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
 Sap UI5 and Fiori Training
https://www.anubhavtrainings.com
· Float and clear
· New tags for the layout

Java Script (JS)

· Introduction to JavaScript
· Statements and Comments
· Finding Errors
· Variables, Data Types
· Operators
· Strings
· Events
· Functions, Functions with Parameters
· Functional with Multiple Parameters
· Variable scope
· Arrays
· Statements if, else, nesting if, Complex Conditions, switch
· While loop, for loop
· Objects, properties and methods
· Referencing elements in JavaScript
· Changing an image source
· Forms, form values
· Form validation text boxes, and passwords
· Radio buttons, Check Boxes
· Creating HTML Element
· Modifying HTML Elements
· Appending HTML Elements
· Deleting HTML Elements
· Regular Expressions
· Object oriented Javascript
· Prototype in Javascript
· Javascript Literals
· Javascript Objects, properties, and functions

jQuery (jq)

· How to refer external JS libraries like jQuery

· Write less do more
· jQuery functions, actions and methods
· Selectors
· Events
https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
Sap UI5 and Fiori Training
https://www.anubhavtrainings.com
· DOM Manipulation

Phase 2: SAP UI5 framework and Controls

· Installing SAPUI5
o SAPUI5 Tools
o Versioning of SAPUI5
o Upgrading jQuery for SAPUI5
o Documentation
· Before you Start
· Naming Conventions for Control and Application Development
· Browser and Platform Matrixes
· Compatibility Rules
· Experimental Flag
· Security Information for SAPUI5
· Getting Started with SAPUI5
o Create Your First SAPUI5 Application
o Create Your First Mobile SAPUI5 Application
o Develop Your First Application using SAPUI5 Tools
o Testing SAPUI5 Applications
· Concepts
o Model View Controller (MVC)
o Resource Handling
o Libraries
o SAPUI5 Components
o Fragments
· Application Best Practice
o Preparing
o Building
· Initializing and Loading SAPUI5
o Bootstrapping: Loading and Initializing SAPUI5 in HTML Pages
o Initialization Process
o Configuration of the SAPUI5 Runtime
· Models and Data Binding
o Data Binding: Getting Started
o Models and Data Binding in Applications
o Binding Types
o Using the Data Binding Type System
o Calculated Fields for Data Binding
o Using Data Binding for Data Export
o Property Metadata Binding
· Building the UI

https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
Sap UI5 and Fiori Training
https://www.anubhavtrainings.com
o Instantiating Views
o Implementing XML Views
o Handling Events in JSON Views
o Typed Views and Controllers
o File Names and Locations (View and Controller)
o View Cloning
o Support for Unique IDs
o Fragments
o HTML Templating in SAPUI5
o Navigation
o Working with Controls in SAPUI5
o Declarative Support
· Structuring SAPUI5 Applications
o Modularization and Resource Handling
o SAPUI5 Components
· Translating SAPUI5 Applications
o Identifying the Language Code / Locale
o Resource Bundles
o Use of Localized Texts in Applications
o Support Translation
· Component.js
o Example: Component Configuration
o Controller Extension
o Controller Replacement
o I18n Resource Text Customization
o Limitations
o Caveats Regarding Stability Across Application Upgrades
o Supportability
· Building Mobile Applications with SAPUI5
o Handling Navigation and Lifecycle Events
o Adapting to Platform and Form Factors
o Working with Lists and Tables
o Triggering Phone, SMS and E-Mail
o Scrolling in SAPUI5 Mobile
o Running SAPUI5 Mobile Apps in Hybrid Web Containers
o Using Images in Mobile Applications
o Message Handling
o Mobile Events
o Performance Behavior
o Building Charts with SAP VIZ
· Troubleshooting
o Debugging
o Logging and Tracing
https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
Sap UI5 and Fiori Training
https://www.anubhavtrainings.com
o Troubleshooting: Common Issues
o Browser Debugging for ABAP Developers
o SAPUI5 Diagnostics
o SAPUI5 Mobile Diagnostics
· Testing in SAPUI5
· Developing Content for SAPUI5
o Development Conventions and Guidelines
· WEB-IDE
o Create a new SAPUI5 application
o Development process overview
o Development environment overview
o Building SAP Fiori-like UIs with SAPUI5
o Deploy to SAPUI5 ABAP Repository

Phase 3: SAP Fiori UX

· Difference between UX and UI

· SAP Fiori Trial to experience UX
· Creating Container based Fiori App
o Worklist app
o Master details app
· UI Controls
o List
§ Object List Item
§ Display list items
§ Action list item
§ Standard list item
§ Feed list item
§ Action list item
§ Column list item
o List operation
§ Sorting
§ Searching
§ Filtering
§ Grouping
o List Modes
§ Single Select
§ Multi select
§ Master select
§ Delete

https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
Sap UI5 and Fiori Training
https://www.anubhavtrainings.com

o Input fields
§ Normal one
§ Validations
§ Value help
§ Tokenizer
o Dropdowns
§ Select
§ Combo box
§ Multi Combo box
o Tables
§ Column
§ Responsive table
§ Grid Table
§ Flex table
o Icon tab filters
o Message API
· Scaffolding template
· Dependency management
· Custom controls
· Search field and LIVE search
· Master details- Split app
· Router
· Routing configuration
· Manifest.json
· Neo-app.json
· Component.js
· Versioning
· Google map integration
· Using Fiori WebIDE templates to create apps

Phase 4: OData in SAP NetWeaver Gateway

· Introduction NetWeaver Gateway
· NetWeaver Gateway Usage
· Gateway Architecture overview
· Technical Components Involved
· Introduction to REST
· Introduction to OData
· OData advantages
https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
Sap UI5 and Fiori Training
https://www.anubhavtrainings.com
· Introduction to OData formats JSON and XML
· Overview of Structure of an OData Service
· Overview of Service Document
· Overview of Service Metadata Document
· Perform CRUD with OData
· Service generation technique
· Create
· Read
· Update
· Delete
· OData Query Options
· Filtering and Projecting ($filter and $select)
· Sorting ($orderby)
· Client-Side Paging ($top, $skip, and $inlinecount)
· Counting ($count)
· Inlining ($expand)
· Formatting ($format)

Complementary OOPS ABAP Classes

· OOPS ABAP Complementary Sessions

o What is Object and class?
o Why to define a class?
o Components of class
o Attributes - Instance, static, constant
o Methods- instance, static
o Role of Attributes & Methods in OOPs programming
o Defining class in class builder
o Accessing Attributes in a method
o Instantiation of object in report program
o Visibility - Public, Private, Protected
o Method parameters - importing, exporting, changing, returning
o Relationship between objects
o Association
o Aggregation
o Composition
o Realization
o Generalization
o Interface
o Abstract class
o Type casting
https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code
Sap UI5 and Fiori Training
https://www.anubhavtrainings.com
o Widening Casting
o Narrow Casting

· Anubhav’s learning series access to build apps end to end on S/4 HANA

https://www.anubhavtrainings.com/sap-ui5-and-fiori-training
Say no to trainer who only teach copy-paste of code