Skip to Content
Technical Articles
Author's profile photo Nivetha G

Developing a simple web application using UI5 web Components for React

Introduction

React has grown in popularity over the years. Popular websites which we see in our day to day life uses React for the UI. Applications that use react are high in performance when compared to traditional technologies. This is mainly due to the use of virtual DOM which is a lightweight version of old DOM.

When you start developing applications in React it could be quite overwhelming if you jump directly into the application development. We have to understand the basics of React concepts in-order to make our web development process fun and interesting.

UI5 Web component

When we are new to UI development writing everything from the scratch will be tiresome. To make our lives easier, UI5 web components provides an SAP Fiori-compliant implementation by leveraging UI5 web components project. With this we can import several components such as card, button, calendar, Date Picker, Combo box and can use it directly in our web page easily without much effort in designing.

The below mentioned tutorial will help us in getting started with UI5 web components and react.

Get Started with UI5 Web Components for React

Though there are advanced concepts in react, basic understanding of components will help us to get started with creating our own web-page. We will see more information about components in the upcoming sections of this post.

Component

This is the building block of the web page in react. If you are familiar with HTML then you will be aware of elements. We will have different kinds of elements such as head, title, body etc. in HTML  and with the help of these elements we will build our web-page. Component will contain a group of elements which will be reused in the web page. For example, when we see a post in instagram or twitter, all the posts will have similar structure. Hence, post can be considered as a component. Elements such as post image, description, comments can be considered as a part of the post component. UI5 web components provides reusable code which we can use in our application to build web pages.

This is the sample application that  we are going to create in this blog post,

 

Lets understand, how different components are used in the design here,

 

ShellBar

This component is used in creating application header. We can add logo, icon, search field and many such fields in the header.  Remember to add the image you use here in the public folder of the application

 <ShellBar
        logo={<img src="logo192.png" />}
        primaryTitle="Sample Application with UI5 Web Components for react"
  />

 

Card 

Card component is used to created courses in our sample web page. It has header and content sections. Header contains the course name and in the content area we have course related information. Avatar component is used to add images specified size and shape. List component helps us to display a list of items.

<Card
          heading="UI5 fundamentals"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/hkHnHVJVAo9b_pI6VL7R98CSS1a39xnsSuPAwPIz4Fg/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzVidzBO/ZWFxemJXTHhaaTRu/V2FBSi92aXN1YWxf/djEuanBn.jpg"
            shape="Square"
            size="XL"
          />

          <List>
            <Text style={spacing.sapUiContentPadding}>
              This course teaches about fundamentals of UI5 components which can
              be used to develop your application. You will learn about
              different components in this course
            </Text>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={89} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
  </Card>

 

FlexBox

This is used to create flexible layout in our application. With the JustifyContent property we can justify the contents of the component.

<FlexBox
        justifyContent={FlexBoxJustifyContent.Center}
        wrap={FlexBoxWrap.Wrap}
        style={spacing.sapUiContentPadding}
 />

 

Now that we covered the details about components, we can extend this code and add this to our application. Our first simple web-page is now ready to leverage the features of UI5 and React.

 

Code for the application:

Add the following code in your App.js file

function App() {
  return (
    <ThemeProvider>
      <MyApp />
    </ThemeProvider>
  );
}

export default App;

 

Add this code in MyApp.jsx file

import React from "react";
import {
  Avatar,
  Card,
  Text,
  ShellBar,
  List,
  StandardListItem,
  ValueState,
  ProgressIndicator,
  FlexBox,
  FlexBoxJustifyContent,
  FlexBoxWrap,
  FlexBoxDirection,
} from "@ui5/webcomponents-react";
import { spacing } from "@ui5/webcomponents-react-base";
import "@ui5/webcomponents-icons/dist/list.js";
import { Button } from "@ui5/webcomponents-react/lib/Button";

export function MyApp() {
  return (
    <div>
      <ShellBar
        logo={<img src="logo192.png" />}
        primaryTitle="Sample Application with UI5 Web Components for react"
      ></ShellBar>
      <FlexBox
        justifyContent={FlexBoxJustifyContent.Center}
        wrap={FlexBoxWrap.Wrap}
        style={spacing.sapUiContentPadding}
      >
        <Card
          heading="UI5 fundamentals"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/hkHnHVJVAo9b_pI6VL7R98CSS1a39xnsSuPAwPIz4Fg/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzVidzBO/ZWFxemJXTHhaaTRu/V2FBSi92aXN1YWxf/djEuanBn.jpg"
            shape="Square"
            size="XL"
          />

          <List>
            <Text style={spacing.sapUiContentPadding}>
              This course teaches about fundamentals of UI5 components which can
              be used to develop your application. You will learn about
              different components in this course
            </Text>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={89} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
        </Card>

        <Card
          heading="React Native App Development"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/AtO16nRekPG_IiJFQtisLfgjygcaEvgrge_2_xdimpM/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzdqUWVQ/Rklxb3c5NXd1NlVD/bUhmS2MvdmlzdWFs/X3YyLmpwZw.jpg"
            shape="Square"
            size="XL"
          />

          <Text style={spacing.sapUiContentPadding}>
            This course is about fundamentals of React Native. Its an
            open-source mobile application framework.In this course you will
            develop an android application with the instrutor.
          </Text>
          <List>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={10} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
        </Card>
        <Card
          heading="Kubernetes and Docker essentials"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/cDTLl5fXaXcrOHPhSd0FawuLBUVykpEZi0I-275Qb5c/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzJHQjRO/UVBzNk5HbVRoWVpn/cU5hc2gvdmlzdWFs/X3YxLmpwZw.jpg"
            shape="Square"
            size="XL"
          />
          <Text style={spacing.sapUiContentPadding}>
            Kubernetes is a container management system to manage a
            containerized application in various environments. In this course
            you will get hands on experience in deploying an application.
          </Text>
          <List>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={50} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
        </Card>
      </FlexBox>
    </div>
  );
}

 

Conclusion

In this blog post we have seen, how to create a simple web page by using UI5 web components such as ShellBar, Card, Avatar, List and FlexBox. You can read about more components in this Story Book and you can use them to create more advanced web-pages. You can also customize the styles using CSS varaibles.

As we are coming to the end of the post, I have a question to the readers, in the above code snippet we are repeating the code for card component thrice. How can we refactor this code using props concept? Is there any other ways in which we can optimize the code? Let me know your answers in the comments section below 🙂

 

Happy coding!!!

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Bilen Cekic
      Bilen Cekic

      great blog!

      there was an event with Kristian Kraljic regarding SAP ONE platform and he was telling that they have tried Vue, React but finally decided to use SAPUI5 for the platform development. He might have strong cases to use SAPUI5 (know-how, current knowledge of the team , definitely an internal pressure to use SAPUI5 which he denies). I strongly believe, there is a bright future on deploying react/vue apps to sap application server for any kind of work. Not only for performance reasons but also the flexibility and freedom while using that libraries/frameworks. SAP still investing heavily on SAPUI5 which is understandable due to product roadmaps but also i find it a bit meaningless to insist on same technology and try to evolve it (i.e. UI5-CLI, vsCode extension etc) to have same developer experience comparing to react and vue. I am not telling SAPUI5 should be demolished but SAP can encourage developers with builtin react/vue apps already deployed to the SAP server.(yes it is a dream only).UI5-CLI is nice btw, i am also using for my CI/CD pipelines before deployment.

      We are building planning applications which is used to capture planning data via UI5 and save to SAP BW in the backend. We are not using theme builder to change our colors but adding and sometimes overwriting SAPUI5 css styles even it is not recommended. What SAP not understanding is, not everyone like the look and feel of SAPUI5, not everyone is boring SAP GUI screen users. SAPUI5 UI/UX is not impressive for NON-SAP users. That is also another reason it is not preferred for non-sap applications (ui5 web components and fundamentals).

      Companies might already have their UI/UX design guidelines with preferred frontend framework. Our one of the biggest challenge was convincing management during UI/UX discussions was “SAPUI5 has it’s own frameworks and ui/ux guidelines, what we are doing here is limited to SAPUI5”. Here it comes the beauty of React and Vue which give you a total freedom on frontend. You can use any frontend framework without any issue to align your design with your companies other applications.

      More SAPUI5 developer gain skill for non-sap technologies and more non-sap developer start working on SAP, i think we will see more modern apps deployed to server especially done via react/vue.

      Author's profile photo Nivetha G
      Nivetha G
      Blog Post Author

      Thank you!!

      Author's profile photo Javier Andres Caceres Moreno
      Javier Andres Caceres Moreno

      Good job

      Author's profile photo Nivetha G
      Nivetha G
      Blog Post Author

      Thank you!!

      Author's profile photo Sindhu S Shivaram
      Sindhu S Shivaram

      Hi Nivetha G ,

      Very nice and informative blog!!

      I have a question, is it possible to bind a UI5 Webcomponent against an OData Model?

      Thanks and Regards.