Skip to Content
Technical Articles
Author's profile photo Emanuele Ricci

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

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:

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

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.


  • 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


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mauricio Pinheiro Predolim
      Mauricio Pinheiro Predolim

      Awesome post Ricci!

      Will you intend to create the same Smart Store app using React and Angular frameworks too?



      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Hi Mauricio, the React one is already available here and it's made by the UI5 Web Components team.


      I don't think that I will do it for Angular. I like Vue and I will only make Vue implementation for other apps 😉

      Author's profile photo Alexandre Sabatier
      Alexandre Sabatier

      I love the effort you’re putting in your documentation. Very impressive!

      Any reasons why you preferred working with ui5-components rather than fundamentals? More flexibility?

      Thanks for sharing!

      Author's profile photo Yulia Chernishova
      Yulia Chernishova

      Hello Ricci!

      Thanks for post. I have some questions.

      When I add UI5 web component app into Fiori launchpad it opens in new tab and without default header, how to fix it? It must open at the same tab with default header, is it possible?