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.

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