SAP® UI5 step-by-step for Fiori development [2022]

Name: SAP® UI5 step-by-step for Fiori development [2022]
Rating: 3.4 (33 reviews)

Learn how to build responsive web applications using the SAPUI5 framework.

Created byMárcio Martins, Roberta Roth

Last updated 5/2024

English

What you'll learn

Build apps from scratch with SAPUI5 for SAP® Fiori.
How UI5 implements MVC.
Learn how to use WebIDE for development.
Understand the concepts of UI5.

Course content

11 sections • 24 lectures • 1h 16m total length

Introduction to the content of "SAPUI5 step-by-step"4:28
What is UI5? What's the difference between OpenUI5 and SAPUI5? See what you'll learn throughout this course.

Making an application in WebIDE and creating the famous HelloWorld!2:25
How to use basic HTML to create an application in WebIDE.
How to run your application in WebIDE0:51
Learn how to use WebIDE server to run your application.
Adding UI5 to your app3:37
You'll learn how to create a simple UI5 application using WebIDE.
Using your first UI5 control on your page2:23
You'll see how to use sap.m.Text on your application.

Internationalization (i18n)7:24
Most of the time, it is necessary to make applications available to clients in different countries and in different languages. I'll help you understand and apply internationalization on UI5.
Please note: the following files must have their extension changed to .properties :
i18n.txt
i18_pt.txt
The sap.m.Shell, sap.m.Page and sap.m.Panel controls2:59
Let's use three controllers from the sap.m library to tidy up and organize the screen view.
Please note: the following files must have their extension changed to .properties :
i18n.txt
i18_pt.txt
Icons1:07
After this lesson, you'll know where to find and how to use native icons from the UI5 library.

Aggregation Binding3:42
We'll see how to use a JSON file to simulate backend properties and use sap.m.List on view to consume this new model and show data on a list format.

Please note: the following files must have their extension changed to .properties :
i18n.txt
i18_pt.txt
Data Types2:18
Learn how to use data types to change list exhibition.
Expression Binding3:36
Let's see how to format data on your list using a JavaScript function customization. Plus, how to use IF on a binding.
Filtering3:24
Can you add a search field (sap.m.SerachField) to your list? Yes you can! Or, at least you'll be able to.
Sorting and Grouping3:24
Your list will be improved by sorting and grouping the inputs by source.

Requirements

HTML, CSS and basic JavaScript knowledge will get you far!

Description

Throughout this short practical course, you will get to know how to use the most requested front-end (JavaScript, CSS3 and HTML5) framework for SAP corporate ecosystems. Press play to check our video lessons and download the source files. Follow our step-by-step instructions for beginners and start building from scratch your application. You'll also learn how to use lists from a JSON file simulating a back-end application and how to make your app available for mobile devices.

Learn the following skills with hands-on exercises:

SAPUI5 which is the technology to implement apps using SAP's design system (SAP Fiori);
Get the prereqs to start developing SAPUI5 apps now;
Understand hands-on how the MVC design pattern works and how SAPUI5 implements it;
Add support to multiple languages to your application (i18n - internationalization), using native framework resources;
How to add resources to data tables like filtering, sorting, grouping, and formatting;
Visualize and use more than 600 icons from the SAP Icon Explorer.

BONUS: how-to debug your JavaScript code using the native tools of your web browser, like Google Chrome.

Master the skills to implement apps using the SAP Fiori Design system using UI5!

Updated in August 2022: Added a new video class about SAP Business Application Studio (BTP), the new development suite for apps.

Who this course is for:

Software developers who want to learn how to use the framework for building multi-platform UI5 applications.

SAP® UI5 step-by-step for Fiori development [2022]

What you'll learn

Explore related topics

Course content

Who am I? What are you going to learn here?1 lecture • 4min

Pre-requisites1 lecture • 4min

Visual Studio Code (2024)1 lecture • 4min

SAP Business Application Studio (2022)1 lecture • 3min

HelloWorld on WebIDE and UI5 Bootstrap4 lectures • 9min

Model View Controller projects4 lectures • 13min

Step-by-step3 lectures • 12min

Data Binding5 lectures • 16min

Responsiveness1 lecture • 4min

Review1 lecture • 1min

Requirements

Description

Who this course is for: