SAP - Learn SAPUI5 Professional Development
4.2 (1,158 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,661 students enrolled

SAP - Learn SAPUI5 Professional Development

Learn SAP UI5 / OpenUI5 In Detail: Basic & Advanced Levels, Step By Step, With The Help of The Best Open UI5 Experts
4.2 (1,158 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,661 students enrolled
Last updated 12/2018
English [Auto], Portuguese [Auto], 1 more
  • Spanish [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 5 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create their own end to end SAPUI5 / OpenUI5 App
  • Work as SAP UI5 professional consultants
  • Make existing SAPUI5 Apps better with responsive and more UX centric development
  • Understand all the concepts related to SAP UI5/ Open UI5 web app development
  • Support existing SAPUI5 or SAP Fiori projects
Course content
Expand all 63 lectures 08:15:30
+ Introduction To Course
1 lecture 01:24

This section is the introduction to the entire course and will show you what are the benefits of taking this course.

Preview 01:24
+ Prerequisites For Using This Course and Links
2 lectures 03:37
***Important - Links to Code Resources ****

This lecture will highlight what are the prerequisites for taking this course. 

Students should already have some exposure to HTML5, CSS3 and jQuery worlds, before learning UI5. 

Even if they are starting to these cutting edge technologies, we have given our best to make this course content easy to understand for beginners .

+ Resources and Exercise Files
1 lecture 00:12
All Development Code and Exercise Files
+ SAP UI5 Basics
5 lectures 33:30

This lecture is going to introduce SAP® UI5 framework and give an overview about it.

What Is SAPUI5

In this lecture, we are going to see the main difference between SAP® UI5 and Open UI5.

We will go deep inside the UI5 library and explain and explore its structure and details.

Preview 05:21

SAP® UI5 is the building block of SAP® Fiori.

In this lecture, we will look into it and see the 5 user experience principles in action, using our Work Permit Management Solution (WPMS) App.

SAP UI5 App and Fiori

In this lecture, we will prepare our development environment for UI5 development.

We are going to download and install the following below components :

  • Java, in order to run Eclipse
  • Install Eclipse Luna
  • Add UI5 components to the Eclipse repository

Setting Up The Development Environment

In this lecture, we will build a simple "Hello World" application in order to test our Eclipse development environment.

Create Hello World App In UI5
SAP UI5 Basics
3 questions
+ Use Of Wireframe and Control Flow In App
5 lectures 41:09

In this lecture, we will see how to work with wireframe tools like Moqups.

We will create the wireframe for a simple app, which we will be created in the coming lecture, using UI5.

Create a Simple App

We will create a simple app, whose wireframe we have built in the previous lecture.

Simple App Creation

Knowing control flow in your UI5 application will give you a clear idea about which section of the application is executed and when.

This lecture will also introduce all the major parts of the application, which are provided by default, and tell you how to use them and when to use them.

Simple Application Control Flow

MVC stands for Model, View and Control.

This is a very popular framework for creating applications and UI5 uses it as well.

In this lecture, we are going to see how to use the MVC framework in terms of the UI5 application development.

Usage of MVC and Extending the Application

In this lecture, we will extend our simple app and add a second page to it.

We will demonstrate how to navigate to this new page and how to work with the app.back as well.

We will also show how to get values out of an input field and use it.

Two Page App Wireframe and Coding in Eclipse
Wireframing and app control flow
3 questions
+ Major UI5 Components and Databinding
13 lectures 01:35:18

In this lecture, we are going to create a layout form with lots of elements like Label, Input, Bar, TextArea,

fileuploader, VBox and HBox.

We will come to know how to work with the API reference and Explored.

Designing a Simple Form With UI5 Elements - Part 1

In this lecture, we are going to continue with our layout form and complete it by adding the rest of the elements.

Designing a Simple Form With UI5 Elements - Part 2

In this lecture, we are going to show you how data binding works in our UI5 app.

We will highlight all the parts that need to come together in order to make this happen and also show you the concept of 2-way binding.

Concept of Data Binding
Binding Modes

In this lecture, we are going to see a simple example of data binding, where we bind simple values to our sap.m.Label element.

Data Binding Using Simple App

In this lecture,  we will see how to use a simple sap.m.List in our UI5 App.

Preview 10:29

We will  continue with sap.m.List and will create a list, dynamically with JSON data, using the concept of aggregation binding.

Preview 07:54

In this lecture, we will see how to use sap.m.Table in our app and create a simple table, using bind item aggregation with our JSON data.

sap.m Table

In this lecture, we will see a different variation for tables that is the sap.ui.table.

We are going to see how to create a sap.ui.table with bind rows aggregation.

sap.ui Table

In this lecture, we will  see how to create standard tiles, using sap.m.StandardTile, and add it to sap.m.TileContainer. 

We will create all the standard tiles individually.

Tiles Basic

In this lecture, we will continue with tiles and are going to use bindAggregation function to make the tiles creation process generic.

Preview 05:38

In this lecture, we will explore aggregation binding further and see how we can use factory functions for customizing aggregation binding.

Data Binding Factory Function Using List

In this lecture, we will understand how we can have multiple data models in our UI5 app in the form of named models.

We will also look at what are the advantages and disadvantages of using a named model.

Named Model
Major UI5 Components and Databinding
4 questions
+ Using Chrome Development Toolkit
3 lectures 23:46

In this lecture, we will learn how to use the Chrome development toolkit.

In this part-1, we are going to explore the element tab, which provides lots of features to play with DOM level elements and also explore the style tab, which comes handy when we need to do CSS changes in our application.

Chrome Dev Tolkit Part1- Element Tab and Style Tab

In this part-2, we will continue to explore the Chrome development toolkit.

We will see the console tab, which will be used to do live scripting changes, the source tab, in order to do debugging, and also the network tab, to do analysis of the page load.

Chrome dev toolkit Part2 - Console Tab, Source Tab and Network Tab

In this lecture, we will look at the application browser compatibility, which sometimes can be a make or break decision in UAT.

Browser Compatibility
Chrome Development Toolkit
2 questions
+ Styling And Theming For UI5 App
4 lectures 01:03:01

We are going to look at how to add custom styling in your UI5 app, with the help of our simple app, which we have created in the previous sections.

Styling Exercise with our Simple App

Styling is one of the most important parts of an UI5 app.

Designers and developers, in an UI5 project, spend a lot of time in making the styling changes and bringing it up to the customer expectations.

In this lecture, we will take you through a real world use case of a styling change.

Deep Dive in Styling for Form Element - Part 1

In this lecture, we will continue our styling use case and make the UI responsive .

Deep dive in Styling for Form Element - Part 2

In this lecture, we will see how to use UI5 Theme designer in order to make the styling process automatic and easier.

Theme Designer
Styling and Theming
3 questions
+ Using Events and Handling Events
7 lectures 47:17

In this lecture, we are going to look into Javascript events.

And we will answer questions like why they are used, how they are used and when should we use them.

Basic Events

In this lecture, we are going to see how to use events with our sap.m.List elements.

We will demonstrate how to use the API reference to pick the suitable event.

We will go, having a exploration mindset, to find the final event, which will help students to know the process of using the API reference.

Using event case study for real project part 1 - List

We will continue with events and we will see some library functions, which will be used to extract data in event handler objects.

We will also learn how to use the browser console to test the code, before using it.

Using event case study for real project part 2 - List
Calling Event Listener Function

In this lecture, we will do what we have done with the sap.m.List: we are going to see how events work with tables.

We will use a row press event and extract binded data, using library functions.

Event in Table

In this lecture, we will see how to add advance events like drag and drop.

There are plenty of jQuery libraries that provide a wide range of events.

This lecture will tel you how to use those libraries within a UI5 project.

Advanced Event Handling

In this lecture, we are going to look closely into how events are actually triggered.

We will also see what are the different types of event execution phases and how they can impact the final result of an application behavior.

Event Capturing and Bubbling
4 questions
+ Miscellaneous Controls In UI5
3 lectures 38:43

In this lecture, we will see how to use a basic shell control sap.ui.ux3. and add a basic event handler.

We will also learn when to use Shell in your UI5 project.

Use of UX3(Shell) Control

In this lecture, we are going to see how to use fragments within your view and add a livesearch event handler to it.

Use of Fragments

In this lecture, we are going to create a simple split screen application.

Split screen applications also commonly referred as master and detail layout apps, and provide a wonderful UX when your user opens the application in mobile devices or tablets.

We will create the simple split screen app and test it in small resolution to simulate mobile environment as well.

Use of Split Screen Application
  • You should have a very basic understanding of Javascript and HTML.

SAPUI5 / OpenUI5 is the top trend in the SAP Technical marketplace and almost all the major projects now require this skill-set.

The development with SAP UI5 / Open UI5 involves new and cutting edge technologies, responsible for bringing a lot of aspects related to web app development, which makes it difficult to learn.

This course is the final result of months of preparation and planning to compile all the details in making the learning process easy, complete and fast. 

What are benefits of this course :

  • If you want to learn SAPUI5/Open UI5 then this course will be for you: it comes with rich content that takes you from writing a simple "Hello World" app to building your own responsive SAP UI5 complex app.
  • The majority of the content is hands-on, which involves a lot of challenges and exercises and makes the course interesting and engaging.
  • The course covers not only individual topics but also describes real world scenarios where the concepts are used.
  • The course also shares SAPUI5 best practices of implementing a concept to a real SAP global project.
  • The course also shares a bunch of code snippets and examples in a cloud based IDE, where students can have 24*7 access and which is going to be crucial during the development phase of the project. The students will have the best SAPUI5 tutorial examples they can find.
  • The course examples were carefully selected to make the course fun, interesting and engaging to learn.
  • The development scenarios include simulating common mistakes that UI5 developers frequently make, so they can learn exactly how to fix fast.
  • The course also has a UI5 final project to put all the learning into practice.The final project was carefully crafted to make students understand real world scenarios and the roles they will have to perform in team.
  • The course gives importance to all aspects of SAPUI5/OpenUI5 development, may it be wire-framing, design and analysis, development or styling and theming.
  • The course shares information about lots of tools and plugins, which will boost the developers' productivity and efficiency.
Who this course is for:
  • This course is for SAP Technical consultants who want to learn SAPUI5/OpenUI5 development.
  • This course will help an SAP job aspirant to get a good hold in SAPUI5 and become an SAP UI5 consultant.
  • This course will help SAP Functional consultants to learn SAPUI5/OpenUI5 library better and make them more independent.
  • This course will help existing SAPUI5 developers to understand the framework in depth and better.