SAP UI5 & Fiori Essentials: Beginner's Complete Walkthrough

Learn how SAP Fiori UI5 apps use HTML, CSS, and JavaScript within a framework with pre-built components; grasp basic HTML structure, CSS styling, and application logic.

Install Node.js, Visual Studio Code, and SAP UI5 CLI to set up a SAP Fiori development environment. Learn HTML, CSS, and JavaScript basics for SAP UI5 apps in VS Code.

Learn to create a basic HTML web app in Visual Studio Code, including doctype, HTML structure, metadata, a button, and a JavaScript function that updates content on click.

Master CSS fundamentals for SAP UI5 and Fiori by exploring universal, type, id, and class selectors, external and inline styling, and the UI theme designer workflow for styling HTML pages.

Apply sap ui5 fiori css to style applications, explore light and dark appearances, and use inbuilt ui theme designers while mastering css selectors and external or inline declarations.

Explore how JavaScript adds interactivity to web pages, using event handling and functions to respond to button clicks, with practical examples in Visual Studio Code.

Learn the basics of JavaScript objects, including key-value pairs, properties, and nested structures, using a Virat Kohli example with addresses, arrays, and a get detail function.

Explore SAP Fiori ui5 tooling, its functions, and file creation. Learn to build a project from scratch with ui5 tooling, npm, manifest.json, and serve commands.

Explore SAP Fiori SDK bootstrapping with the official SAP demo kit, learning to create a UI5 project, bootstrap from index.html, and apply architecture, routing, and theming.

Explore SAP Fiori XML views defined in XML markup, learn how capitalization affects view loading, see a sample button render in UI, and prepare for controllers in the next class.

Explore the SAP UI5 Fiori controller, its role in the MVC pattern, and how it handles view events and button actions to modify the model.

Explore how SAP UI5 uses asynchronous module definition (AMD) to load UI5 modules, controllers, and tools like button and message toast, via define and callback functions.

Learn data binding in SAP UI5 by using a JSON model to decorate the controller on init, set the model on the view, and bind recipient.name for dynamic UI display.

Explore how data flows from database to the UI in SAP UI5 apps using OData models and a service, and client-side JSON, XML, and resource models bound to controls.

Explore SAP UI5 and Fiori essentials through a beginner walkthrough, learning JSON model, data binding, XML views, MVC, and hook methods such as onInit and onBeforeRendering.

Learn how to implement the i18n resource model in SAP UI5 and Fiori, a client-side translation model that uses properties files to support multiple languages, bindings, and bundles.

Learn the prerequisites for a SAP UI5 app and bootstrap a hello world project by creating the web app structure, package.json, YAML, manifest.json, and index.html and index.js.

Learn to build an SAP UI5 XML view with a text control and an accompanying controller, wiring a button event to trigger an alert.

Demonstrate step six by replacing alerts with sap ui5 message toast. Bind a json model to an input in an mvc view to show live updates.

Learn how to add translatable texts in a SAP UI5 app by using an i18n resource file and a resource model, enabling localization and reusable strings.

Master step 9 component configuration in SAP UI5 and Fiori essentials by building reusable components. Connect JSON and resource models, and set up a dynamic index.html with component metadata.

Understand manifest.json as the descriptor for SAP UI5 apps, separating configuration from code and enabling deployment on the Fiori launchpad. Learn to configure app metadata, models, and index.html integration.

Practice assembling UI with pages and panels in SAP UI5 & Fiori Essentials, learn control aggregation, i18n-based titles, and placing a panel within the app structure.

Explore how the SAP UI5 shell acts as a container to shape your app's visuals, then apply margins, paddings, and custom CSS via manifest.json and style.css for responsive theming.

Explore creating nested views in SAP UI5, wiring a hello panel XML view with a dedicated controller, and enabling view reuse to manage a scalable ten page app.

Learn to create reusable fragments for shared UI, integrate a hello dialog, and lazily load and open the dialog from the controller using an on open dialogue event.

Learn to implement fragment callbacks in SAP UI5 by wiring a controller to a close dialog event, adding dialog buttons, and updating i18n text for interactive close actions.

Learn how to enhance SAP UI5 and Fiori apps by adding icons from a large icon library, binding icons in fragments, and using aggregation binding with JSON data for lists.

Learn aggregation binding in SAP UI5 through binding a JSON invoices data set to a list using a json model and manifest.json, displaying each item's title, quantity, and product name.

Learn how to format prices using data type formats in SAP UI5, apply currency and number units, and bind a JSON model to display euro values in the UI.

Apply expression binding for simple calculations and conditional formatting in the view, then use a custom formatter with i18n to show localized invoice statuses A, B, and C.

Learn to implement filtering in SAP UI5 by adding a search field to the product list, creating a contains filter from the query, and binding it to auto-update results.

Apply sorting and grouping to the invoice list by defining exact paths, sorting by product name alphabetically and grouping by shipper name.

Replace static JSON data with a remote Northwind OData service, add the invoice remote data source in manifest.json, and bind the invoices entity to the app model.

Create a new OData project from a template and connect to an OData service to fetch invoices in a UI5 Fiori list report with filters, search, and sorting.

Configure a mock server to simulate backend data with mock data invoices.json, mock server HTML, and a test folder with local service and metadata XML.

Learn testing fundamentals for SAP UI5 and Fiori apps, including unit and integration tests with QUnit and OPA5, and practical debugging using browser tools, breakpoints, and console inspection.

Explore debugging tools in SAP UI5 and Fiori, using developer tools, diagnostics, and the control tree to fix binding errors in the XML view.

Master SAP UI5 & Fiori routing and navigation by configuring the manifest.json with config, routes, and targets, building overview and detail views, and wiring router-based page navigation.

Learn to implement routing with parameters in SAP UI5 and Fiori, linking overview to detail views via a parameterized invoice path and binding context for shipper details.

Learn to implement a back button in a SAP UI5 & Fiori app by handling routing history, using hash-based navigation, and returning to the overview page.

Create and integrate a custom product rating control in SAP UI5, reuse it across pages, and handle rating changes with events and message toasts.

Implement a responsive sapui5 table for the invoice list by replacing the list, adding responsive columns, i18n labels, and binding logic, then verify navigation and formatting.

Learn how to implement device adaptation in SAP UI5 by configuring device-specific visibility and properties, creating a device model, and binding it to views for responsive, cross-device apps.

Adjust content density based on device type to optimize the UI for mobile, tablet, and desktop. Implement the density logic in the component and controller, using compact and cozy options.

Explore accessibility in SAP UI5 and Fiori basics by adding landmark regions, route labels, and i18n-based descriptions to the overview and invoice views, enabling screen readers to interpret the UI.

Explore Fiori elements, which generate apps from backend metadata with no front end code, and learn floor plans: overview, list report, object page, analytical list page, and work list page.

Explore sap ui5 and Fiori floorplans through examples of overview, list report, object page, analytical list, and worklist apps using sap fiori apps library for dashboards, filters, and navigation.

Choose between fiori elements and freestyle ui5 apps. Fiori elements suit predefined floor plans for faster enterprise-ready results, while freestyle offers full design control for custom interfaces.

Explore how SAP Fiori elements are generated at runtime from five building blocks—floor plan, OData service, annotations, no-code configuration, and custom code extensions—enabling responsive, enterprise-ready user interface and launchpad deployment.

Learn how OData services supply data and metadata for SAP UI5 Fiori elements, and how CDS annotations enrich screens, fields, and UI behavior through metadata.

Learn to create a SAP UI5 Fiori Elements list report app in BAS by configuring a Northwind OData destination in a BTP cockpit, then generate and run the template.

Explore open guided development to extend a theory element app by adding a new column to the list report, including setting a product ID label and updating XML annotations.

Learn to add columns like product name and supplier ID to a SAP UI5 Fiori list report and implement filters on the list page using open guided development and OData.

Configure SAP UI5 object page header to show product name using a data point, then add a product details field group with product ID, supplier ID, unit price, and stock.

Create a worklist app from a cap project using the SAP Fiori generator, connect to local cap data and invoice cap, and preview and customize columns.

Explore SAP CAPM fundamentals, including cloud-native data modeling, OData services, and full-stack app development with Node.js on SAP BTP, using JavaScript or TypeScript.

Learn to create a CAPM project using three methods—yeoman generator, business application studio template, and CLI commands—covering node.js, SAP Hana Cloud, PostgreSQL, and Cloud Foundry deployment.

Explore the SAP CAPM CLI for CDS projects in Business Application Studio, learning cds help, cds env folders, and common commands like cds add, cds service, and cds watch.

Implement a service and a function import for a restful odata API in a SAP UI5 app, then test the say hi function with a name parameter in Node.js.

Learn event handling in SAP UI5 and Fiori by using the init and on methods to register action handlers, manage function imports, and return dynamic outputs with a name parameter.

Learn to implement event handling without overwriting init by wiring the service instance's on method and using a callback to process request data.

Demonstrates passing multiple parameters to a function and using structure types in the cloud application programming model, with name and count inputs and an array of results.

Learn data modeling and building a SQLite database, define entities and relationships, and test a RESTful API with CRUD operations using a client.

Deploy a SQLite database into your project, create and connect tables for entities, and test with HTTP requests to verify data insertion and retrieval via the CDS API.

upload data from a csv file into a database by creating a data folder, preparing the sample csv, and deploying to a sql sample to verify records.

Configure a standard SAP Fiori app from the Fiori App Library, including OData service activation and ICF setup, with semantic objects, actions, and launchpad mappings.

Explore the components to configure a standard Fiori app, including ICF activation, OData services, semantic objects, technical catalog, and groups.

Learn to add a Fiori app to a catalog and group using SAP's content manager, activate OData services, create a custom catalog, and organize tiles for launchpad.

Create, manage, and assign PFCG roles to enforce authentication and authorization for SAP Fiori apps, defining single, composite, and derived roles with menus and transactions.