Home
Online Training
SAP FIORI with NetWeaver Gateway & SAP UI5

images

SAP FIORI Training:

SAP Fiori is another initiative form SAP to provide a faster and responsive user interface. See the SAP Fiori Tutorials. This initiative is intended for provide the user interface that supports in all devices like desktops, mobile phones and tabs etc. SAP Fiori contains a set of web apps (currently it contain more than 300) which provides that facility for easy customization. All these apps are based on business roles like HR and sales. This FIORI name came from Italian language that means flowers. SAP considers it as a gift for their users by its beauty and usability.

SAP Fiori Training | NetWeaver Gateway | SAP UI5 Training

SAP UI5 Training:

What is SAPUI5 , you will get the answer from its full form itself. It stands for SAP User Interface for HTML5. One can develop applications that don't have any device compatibility issues (desktop, mobile etc). SAPUI5 contains a large collection of default coded libraries for html4 rendering and using those functions we can easily create our applications. View SAPUI5 tutorials in pdf. You may heard about twitter bootstrap for creating responsive website templates.

FIORI Tutorial

So you've heard all about SAP Fiori, NetWeaver Gateway and more recently SAP UI5 and are looking to get started, but unsure how. There is a vast amount of information available on all of these topics, and as a result it can be very difficult to get up and running.

The internet is now part of our daily life and is accessible on any device. People have become used to the speed and simplicity of consumer apps, and so business users expect the same simplicity from our business software.

SAP Fiori is a product line of SAP apps that have a device-agnostic user interface (UI).

SAP Fiori is our new user experience (UX) for SAP software. By applying modern design principles, it completely reinvents the user experience. When combined with the power of the SAP HANA platform, the SAP Fiori UX delivers unmatched responsiveness. Personalized and role-based, the new user experience enables enterprise-wide engagement across lines of business. It provides optimal usability on multiple devices for better business interactions and ease of use.

Fiori apps are developed by using UI Development Toolkit for HTML5 (SAPUI5). The SAPUI5 runtime is a client-side HTML5 rendering library with a rich set of UI controls for building as well desktop as mobile applications. To support you in developing applications, SAPUI5 tools come with a set of eclipse-based wizards and editors. They provide wizards to create application projects and views according to the model-view-controller concept and other features like JavaScript code completion, templates and snippets and in-place application preview. Understanding UI5 overview helps for extending Fiori app UI.

Benefits with SAP FIORI:

  • If you are looking for mostly online, and less complex workflow applications, Fiori might be a good choice to choose from various SAP Mobile platform offerings.
  • SAP Fiori runs as HTML5, so once you develop it will run on most of the available devices as a container apps.
  • Easy to implement compare with SAP Mobile platform.
  • SAP already provided lot of SAP Fiori apps, which you can implement right away into your current SAP Landscape.
  • SAP Fiori works with existing SAP roles in SAP Backend system.

Frontend Technology:

  • Fiori apps build with SAP UI5 technology (HTML5).
  • UI artifacts are deployed with ABAP technology.
  • Support of smartphones, tablets, and desktop (by responsive design patterns).
  • Different form factors and operating systems are supported with single code line.
  • Fiori Apps are launched and running in the Fiori Launchpad as UI components. Business data is retrieved through OData services during runtime.

NetWeaver Gateway Deployment:

SAP Fiori Launchpad:

The SAP Fiori Launchpad is the entry point for accessing Fiori applications on mobile or desktop devices, and it can be customized in various ways.

  • Its provide end-users an entry point to Fiori applications in a role-based, consistent and user-friendly manner using tiles.
  • Tiles show dynamic/live/real-time application information (like status, KPIs) on the home page.
  • Predefined content and high degree of personalization
  • Tiles can be selected from catalogs and arranged in groups.
  • Search is integrated.
  • Fiori Applications must be implemented as self-contained UI5 Components which can be embedded into different launch pages.

SAP FIORI Course Content

  • What is SAP FIORI
  • Introduction to SAP FIORI
  • SAP FIORI Architecture and Technology
  • Deployment options for SAP Netweaver Gateway
  • SAP Netweaver Gateway - Data modeling basics
  • SAP Netweaver Gateway - OData operations
  • Creating OData services with SAP Netweaver Gateway Service
  • OData Services Practical using RFC
  • OData Services Practical using custom method
  • OData Services with deep insert method
  • Service implementation
  • Including OData services in another OData service
  • SAP Netweaver Gateway - Miscellaneous
  • Installation and Configuration
  • SAP FIORI Launchpad
  • Theme designer
  • SAP Fiori Security
  • FIORI end to end data flow
  • FIORI Extension

UI5 Tutorial

SAPUI5, a relatively new addition to SAP's technology set, provides a quick and easy way to create cross-platform user-interfaces which run on almost any device.

The SAP User Interface (UI) and User Experience (UX) revolution is truly underway. There are some tactical solutions out there, but the chief strategic solution that SAP is basing its UI/UX future on is UI5.

SAPUI5 is an interesting and modern framework that relies on standards and open source like jQuery, HTML5, JavaScript, CSS, and others. It is expandable as a base frame and was developed to better support modern browsers like Google Chrome, Apple Safari, Mozilla Firefox, ect.

The SAPUI5 applications operate on large a wide range of equipment (Smartphone, tablet, desktop) and multiple server platforms

SAPUI5 applications run on a wide range of devices..

The SAP UI experience:

When you think of the SAP user interface experience, what comes to mind? The venerable SAPGUI? The edgy NetWeaver Business Client? Some browser-based but ultimately and unmistakably SAP flavored HTML experience? For many of us, it's "all of the above".

When you consider all of these approaches, and the technologies that power them, there's a single theme that emerges: the theme of "Inside-Out". Classic Dynpro, WebDynpro for Java, WebDynpro for ABAP, Business Server Pages and (gasp) home-brew solutions based on a custom set of templates are all technologies where the user experience is designed, built and pushed out from the inside of an SAP system, and exposed to the outside in the last-mile of user connectivity. That's served us well, but there's a sea-change ahead.

SAP UI5 Course Content

  • Introduction to Java Script
  • Installing SAPUI5
  • Getting Started with SAPUI5
  • Creating Vertical Layout
  • Dealing with CSS
  • Dealing with resource model
  • Importing Demo kit into your local system
  • Application header API
  • Oshell API
  • Create SAPUI5 App
  • Model View Controller (MVC)
  • SapuitableTable API
  • MatrixLayout Used to Create a Form
  • The RowRepeater control is used to repeat complex controls
  • Data Binding with JSON Model
  • Data Binding with XML Model
  • SAPUI5 - Playing with oData in JSON format
  • SAPUI5 - Data Binding (one-way and two-way)
  • SAPUI5 - Navigation using Shell
  • SAPUI5 - Passing parameters between views
  • SAPUI5 - oData Operations (Create/Read/Update/Delete)
  • Formatter Functions
  • Master Detail view in SAPUI5 Mobile
  • Master Detail view in SAPUI5 Desktop
  • Routing in Components
  • SAP.M.TABLE API
  • SAP.M.APP API
  • SAP.M.LIST API
  • SAP.M.Icontabbar API
  • Introducing Fragments
  • Deploy SAP Application into SAP System
  • Extending UI5 Controls in JavaScript
  • Implementing an OData Model
  • Using POSTMAN plugin in Chrome
  • Working with WEB IDE
  • Visualization charts
  • Troubleshooting
  • End to End SAP UI5 Development Use Cases