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 (82 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
324 students enrolled
$195
Take This Course
  • Lectures 56
  • Length 7 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 English

Course Description

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.

What are the requirements?

  • You should have a very basic understanding of Javascript and HTML.

What am I going to get from this course?

  • 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

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction To Course
01:24

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

Section 2: Prerequisites For Using This Course
03:26

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 .

Section 3: Resources and Exercise Files
All Development Code and Exercise Files
Article
Section 4: SAP UI5 Basics
05:22

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

05:21

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.

08:27

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.

08:11

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


06:09

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

SAP UI5 Basics
3 questions
Section 5: Use Of Wireframe and Control Flow In App
03:51

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.

08:32

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

09:36

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.

03:26

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.

15:44

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.

Wireframing and app control flow
3 questions
Section 6: Major UI5 Components and Databinding
10:32

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.

08:35

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

04:04

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.

Binding Modes
Article
08:59

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.

10:29

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

07:54

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

12:51

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.

05:54

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.

06:44

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.

05:38

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

10:15

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

02:55

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.

Major UI5 Components and Databinding
4 questions
Section 7: Using Chrome Development Toolkit
09:59

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.

09:26

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.

04:21

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

Chrome Development Toolkit
2 questions
Section 8: Styling And Theming For UI5 App
19:47

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.

18:41

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.

14:39

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

09:54

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

Styling and Theming
3 questions
Section 9: Using Events and Handling Events
05:58

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.

10:52

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.

08:30

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.

Calling Event Listener Function
Article
08:22

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.

07:06

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.

06:09

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.

Events
4 questions
Section 10: Miscellaneous Controls In UI5
14:49

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.

14:46

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

09:08

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.

Section 11: App Improvement Elements
05:09

In this lecture, we will see how we can change the way data is presented in binding, with the use of formatters.

We are also going to see what are the typical scenarios where we will be using them. 

12:11

In this lecture, we are going to see how to make your app automatically change the standard text to different languages, for international usage.

This will make your app more usable for a wider range of audience.

App Improvement and Miscellaneous Controls
4 questions
Section 12: Data Visualization using UI5
11:59

In this lecture, we are going to demonstrate, how to use UI5 library to show visualization.

We will start with Bar charts and show the usage of new VizFrame.

03:30

We will continue with the visualization topic and use the same code, which was previously used for Bar charts, to create a Pie chart this time.

07:50

KPI tiles have become an essential part of any UI5 dashboard, so in this lecture we are going to see how to create KPI based tiles using UI5 libraries.

Visualization
2 questions
Section 13: Final Project and Goodbye
06:30

This lecture will show the final use case that students need to build.

All the details required to build this app have been shared and in the resource section you can also check the document where they can see the oData URLs as well.

Final Assignment Solution
Article
00:25

Congratulations! You have reached the end of this course!

For any queries you can always start a discussion in our course board.

Section 14: Bonus: Integrating SAP Gateway with SAP UI5 - deploying services live scenario
12:58

You will see how from SAP UI5 App, we have implemented the CRUD operation and we will do the code walk through to understand how the App is designed and developed.

Even if you are seeing UI5 App for first time you will come to know where and how front end developer will be doing the operation to integrate with SAP backend system.

Security involved in gateway will also be shown which will be using default SSO.

*Also see the resource section for code link

13:52

You will see how our UI5 App is doing the delete, create and update operation where key and data values are passed to Gateway system.

The oData methods provided by UI5 library will be explained in details with the callback functions on success and failure of the operation.

*Also see the resource section for code link

04:21

You will come to know how to push the UI5 code inside SAP and show you how to launch the app from inside SAP.


If your Gateway system exist within same SAP ERP then you will have the webserver which is hosting UI5 App and Gateway calls implemented with ERP data in a single machine which is called embedded model.


But the standard approach is to have Gateway in separate system from ERP, where the app will be hosted by Gateway with services present inside it and Gateway will be doing RFC calls to SAP ERP system for data and this model is called HUB model.

Summary
04:03
Section 15: About UI5CN and Your Instructor
01:41

Your instructor Ajay Nayak is CTO of UI5CN.

About Ajay:

"Ajay is very passionate and enthusiastic about technology and teaching online. From a very small age he started coding. Before working with UI5CN, he had worked with many big names like Capgemini®, Statoil®, SAP® and Skybuffer in wide range of portfolios. "

About UI5CN

UI5CN platform is a learning platform for technical and tech-design related video courses and online coding exercises to help student master new and upcoming technical skills most fast and simple way.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

UI5 Community Network, Experts in Services, Consulting and Education

30+ Years of combined experience in Services, Consulting and Education. With more than a decade of experience in enhancing and implementing cutting edge technology for major European industries, some of them includes big Fortune 500 names.

Deep knowledge on the functional side, as well, in Logistics, PLM, SRM Procurement, Supply Chain and Plant Maintenance.

We work extensively in SAP® UI5 and Fiori with SAP® and non SAP® ERPs and also have a complete understanding and first hand working experience with SAP® HANA and the new UI.

We believe that sharing makes the World a better place.

Instructor Biography

Tell me and I forget, teach me and I may remember, involve me and I learn.” 

-Benjamin Franklin

I am a passionate technology enthusiast, always learning new things and like to building stuff which impact people's life and help them.After working in the corporate setup as a consultant, architect and external contractor for Capgemini®, SAP®, Skybuffer and Statoil®.I started my own venture UI5CN with my friends.

We at UI5CN, create software and training materials which help people learn these new upcoming technologies and help our customer to leverage maximum benefits out of it.

We are more aligned to enterprise software UX design and development, IoT and front-end design and development.

Ready to start learning?
Take This Course