Technical Articles
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!!!
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.
Thank you!!
Good job
Thank you!!
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.