UI5 Web Components: a step-by-step demo application

[ericci]

Hi everyone, how is going on? Did you enjoy the start of the summer?

Lately, I was a little bit quiet, I know, no blog post, no guide, no step-by-step exercise. I was just waiting for the perfect idea (I still have some side-project to share with you so prepare to be amazed in the following months) to start with and the last UI5Con 2019 was a good inspiration.

In particular, I was waiting for the perfect time to start to play with UI5 Web Components and thanks to Ilhan Orhan and Martin Hristov I was able to be amazed by a stunning hands-on session that was showing us how to create a UI5 web application with ReactJS and UI5 Web Components

UI5 Web Components

So what are the UI5 Web Components?

The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned with the SAP Fiori Design Guidelines and incorporate the Fiori 3 design.

But, what are the Web Components in general?

Web Components are a set of features which allow enhancing the HTML vocabulary with custom HTML elements when the standard HTML elements are not sufficient (for example, a Button with an icon or a DatePicker). The custom HTML elements allow sharing those features and qualities in a standard way. The complexity of HTML, CSS and components behavior is encapsulated behind a custom HTML element. The interaction with the custom HTML elements is done using the standard DOM API.

UI5 Web Components can be consumed and used by these three frameworks:

• Angular


• React


• Vue

Here are some interesting resources to learn more about UI5 Web Components

• Home Page


• Playground / Documentation


• GitHub Project

Ok now, you have everything you need to know. Enough for the theoric part, let’s get our hands dirty with some nasty code.

Smart Store app Vue.js

The Smart Store app Vue.js is a Vue.js sample application, demonstrating the usage of the UI5 Web Components. You can find a step by step tutorial below on how to build the app by yourself. You don’t have to clone the repo, the app will be built from scratch.

Note: no previous experience with UI5 Web Components is required. To take the most of the tutorial, a basic knowledge with Vue.js 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)


• Vue CLI — ?️ Standard Tooling for Vue.js Development

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.

Build the Smart Store app

• Step #0 — Getting Started


• Step #1 — The App Bar


• Step #2 — The Home Component


• Step #3 — The Routing


• Step #4 — The Profile Area


• Step #5 — Detail Page


• Step #6 — Detail Page Header


• Step #7 — Detail Page Filter Bar


• Step #8 — Detail Page Create Item Dialog

Resources

• Sources of Smart Store App Vue.js


• Smart Store app React (original)


• List of all available UI5 Web Components