SAP - Learn SAPUI5 Professional Development

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 .

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

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.

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.

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

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

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.

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

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.

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.

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.

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.

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

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.

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.

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

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

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.

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.

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.

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

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

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.

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.

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.

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

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

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

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

Congratulations! You have reached the end of this course!

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

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

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

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.

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.