SAP UI5 Fiori

Reading Time: 8 minutes

SAP Ui5 (User Interface 5)/oData/Fiori

    SAP Ui5 (User Interface 5)
      Module 1: 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.

      Module 2: Introduction to SAP WEBIDE and Hana cloud platform

      • Overview of SAP Cloud platform
      • Advantages of SAP WEBIDE
      • Creating an Account in HANA cloud.
      • Accessing the WEBIDE from Hana cloud platform.
      • Creating a Sample project using WEBIDE
      • Detail explanation on each file and folder in the project

      Module 3: 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 Base view and View container.

      Module 4: Routing:

      • 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.

      Module 5: 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

      Module 6: 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.

      Module 7: 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.

      Module 8: Introduction to Different Layouts

      • 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
      • Displaying the form using 2 column and 4 columns design.
      • Exercise on Creating a Form Using various layouts

      Module 9: 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.

      Module 10: Message Handling

      • Various types of Messages in SAP UI5
      • Showing ERROR, SUCCESS, WARNING Messages
      • Exercise on Showing various messages in SPA UI5

      Module 11: Different Kinds of Models

      • JSON Model
      • OData Model
      • Resource Model
      • Working with all Models and understand when to use which model.

      Module 12: Binding

      • Understanding the Binding Concept
      • Various types of Binding
      • Property Binding
      • Aggregation Binding
      • Element Binding
      • Exercise on Binding the UI elements with bothJSON and ODataModels

      Module 13: 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

      Module 14: 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

      Module 15: 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 PopupDialogs

      Module 16: 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.

      Module 17: Working with ODATA Model

      • 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 .
      • 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.

      Module 18: File Upload download Functionality

      • Uploading the file using File uploader UI element from sapui5
      • Downloading the file using ODATA service.

      Module 19: Developing Graphs / Charts

      • Column chart
      • Bar chart
      • Pie chart
      • line chart
      • Practical exercise on all the charts

      Module 20: 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

      Module 21: SAP UI5 end to end Project (With complete real time standards)

      • Creating a SAPUI5 application
      • Creating 4 views for performing CRUD operations
      • Navigation between the views
      • Reading the back-end data into the Table in SAPUI5
      • Implementing all CRUD operations in the project
      • Deploying the application to Gateway server.
      • Configuring this application to fiori launch pad.

      SAP ODATA Couse Syllabus

        Module 1: 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

        Module 2: 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

        Module 3: 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.

        Module 4: 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.

        Module 5: Gateway client to test ODATA services

        • Intro to gateway client
        • Testing all the CRUD operations using gateway client.
        • Testing various query options

        Module 6: 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

        Module 7: 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.

        Module 8: Media Attachments

        • Implementing the logic for file upload in create stream method of DPC_EXT class
        • Implementing the logic for file downloadin get stream method of DPC_EXT class

        Module 9: Configuration and Maintenance of Gateway

        • SPRO related configurations
        • SICF related configurations

        SAP FIORI

          Module 1: 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.

          Module 2: Developing an end to end Custom Fiori application

          • Introduction to Fiori templates
          • Using Fiori Master Detail template to develop the Master detail Fiori application for making decision orieneted apps like approve/reject
          • Using Fiori master Detail CRUD template to develop a Fiori application for all CRUD operations
          • Using Fiori Worklist Template to develop a Worklist related application.
          • Introduction to custom fiori application and standard fiori application.

          Module 3: 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

          SAP FIORI BASIS

            Module 1: Introduction to SAP Fiori and Architecture

            • Embedded architecture
            • Central HUB architecture
            • Components Installed

            Module 2: Fiori Launch Pad Configuration

            • What is Fiori launch pad?
            • Creating RFC b/w gateway and backend
            • Creating trusted connection
            • Creating Trusted RFC
            • Creating system aliases using SPRO
            • Enabling standard UI5 services by going to SICF
            • Adding standard ODATA services using maint_service
            • Adding the standard USER and ADMIN roles using PFCG

            Module 3: Standard fiori apps configuration

            • Intro to Fiori Apps Library
            • Adding the application specific standard odata services using MAINT_SERVICE
            • Activating the application specific UI5 service using SICF
            • Adding the Authorizations using PFCG

            Module 4: Custom to SAPUI5/SAP Fioriapps configuration in Launchpad

            • Create LPD_CUST role
            • Creating the semantic object
            • Creating Catalog, Tile and group
            • Creating a PFCG role and adding the catalog and group and assigning it to user .

            Module 5: 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.

            Module 6: Others

            • How to solve the cache issues
            • Performance improvement
            • General issues and resolutions.

        What to read next?

        Nothing to see here. Consider joining one of our full courses..