westleypoon / ui5tutorial

UI5 Web Components - Hands On Workshop

The Smart Store app is a React sample application, demonstrating the usage of the UI5 Web Components and UI5 Web Components for React. You can find a step by step tutorial below on how to build the app by yourself.

Note: no previous experience with UI5 Web Components is required. To take the most of the tutorial, a basic knowledge with React is desirable.

Prerequisites

• Node.js - version 8.10 or later (check the version with node -v)
• npm - version 6 or later (check the version with npm -v)

Short story

The Smart Store app enables a store manager to control his/her multiple stores. It provides the most important information and status of the stores and urgent tasks that should be addressed by the store manager.

Getting started

In order to get started, we would recommend to generate a new repository based on this one by clicking on the Use this template button (Github user required). As an alternative, you can also clone this repository or download it as zip file.

After having downloaded the repository template to your computer, open the corresponding folder and run the following scripts:

npm install
npm run start

Build the Smart Store app

Step #1 - The App Bar

Step #2 - The Home Component

Step #3 - Events Routing

Step #4 - The Profile Area

Step #5 - Theme and Content Density Switch

Step #6 - Detail Page

Step #7 - Detail Page Charts

Step #8 - Detail Page Table

Step #9 - Detail Page Employee Cards

Resources

Smart Store app

Sources of Smart Store App

List of all available UI5 Web Components

List of all available UI5 Web Components for React