Technical Articles
Using UI5 Web Components
What are UI5 Web Components?
UI5 Web Components are a set of web platform APIs which allow you to create and use reusable encapsulated HTML tags in web pages and apps.
For more info: https://sap.github.io/ui5-webcomponents/
Why use UI5 Web Components?
Any User Experience expert will tell you that there are considerable efficiency gains to be made with users by having a consistent user experience across multiple applications. When it comes to SAP applications, it is obvious that SAP is making a concerted effort to align the UX across all SAP applications whether on premise or in the cloud.
Many companies want to create this consistent user experience for the custom applications, but are faced with shared resource constraints. In the current market, they would like to take advantage of the UI/UX development resources they already have.
So, what does the UI developer market look like? What are most developers using and learning right now?
According to the Stack Overflow 2020 developer survey, the top 10 web frameworks are:
- jQuery
- React.js
- Angular
- ASP.NET
- Express
- ASP.NET Core
- Vue.js
- Spring
- Angular.js
- Flask
https://insights.stackoverflow.com/survey/2020#technology-web-frameworks-professional-developers2
The top 3 “Most Wanted” frameworks are:
- React
- Vue
- Angular
There are many reasons why these frameworks are popular, and we will not go into detail on that here, but it is safe to say that these framework will be a big part of the enterprise web application market for a while.
Luckily, SAP’s commitment to open standards has prompted them to adopt flexible options for building custom SAP Fiori apps using these technologies.
UI5 Web Components allows developers to build web apps which align visually with the SAP Fiori user experience and guidelines.
With UI5 Web Components, developers can build the core logic of the application using these popular web frameworks, while using UI5 Web Components as the visual elements (controls).
- SAPUI5 – https://ui5.sap.com
- React – https://reactjs.org
- Angular – https://angular.io
- Vue – https://vuejs.org
This provides a consistent user experience for all SAP related apps which a company may require. These apps can be deployed on any platform, whether SAP on-premise front end servers, SAP Cloud Platform, or any other cloud platform which may be required.
Each of these web frameworks have different ways of handling data layer, persistence, binding, and integration with APIs, etc. but the nice thing about web components is that is integrates easily, regardless of the framework.
An Example
For several reasons, I have come to like the power and speed of development using React. So for my example here, I will walk you through creating a simple React application using UI5 Web Components.
SAP has a dedicated UI5 Web Components for React here:
https://sap.github.io/ui5-webcomponents-react/
As a guide, I’m going to create a sample which is similar to the existing SAPUI5 SDK sample located here:
https://ui5.sap.com/sdk/#/entity/sap.m.List/sample/sap.m.sample.ListSelection
- From a terminal, let’s start creating the application:
npx create-react-app react-ui5-listIf you want to see the initial app template running you can change to the new “react-ui5-list” folder and run:
yarn start- Let’s add in the UI5 Web Components
yarn add @ui5/webcomponents @ui5/webcomponents-react
yarn add @ui5/webcomponents @ui5/webcomponents-fiori- Now we apply the ThemeProvider for SAP Fiori theming
App.js (replace default content with this)
import logo from './logo.svg';
import './App.css';
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
function App() {
return (
<ThemeProvider>
<div className="App">
</div>
</ThemeProvider>
);
}
export default App;
- For the sake of our sample app, I’m just going to mock up some data
App.js
const sampleData = [
{
"ProductId": "HT-1000",
"Name": "Notebook Basic 15",
"ProductPicUrl": "images/HT-1000.jpg",
},
{
"ProductId": "HT-1001",
"Name": "Notebook Basic 17",
"ProductPicUrl": "images/HT-1001.jpg",
},
{
"ProductId": "HT-1002",
"Name": "Notebook Basic 18",
"ProductPicUrl": "images/HT-1002.jpg",
},
{
"ProductId": "HT-1003",
"Category": "Laptops",
"Name": "Notebook Basic 19",
"ProductPicUrl": "images/HT-1003.jpg",
}
];
And I downloaded the 4 images from the SAPUI5 sample link above and put them into the /public/images folder (had to create the images folder).
https://ui5.sap.com/sdk/test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg
https://ui5.sap.com/sdk/test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg
https://ui5.sap.com/sdk/test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg
https://ui5.sap.com/sdk/test-resources/sap/ui/documentation/sdk/images/HT-1003.jpg
-
- Let’s put in our List control and display the data.
App.js
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
import { List, StandardListItem, ListMode, Text} from '@ui5/webcomponents-react';
function App() {
const sampleData = [
{
"ProductId": "HT-1000",
"Name": "Notebook Basic 15",
"ProductPicUrl": "images/HT-1000.jpg",
},
{
"ProductId": "HT-1001",
"Name": "Notebook Basic 17",
"ProductPicUrl": "images/HT-1001.jpg",
},
{
"ProductId": "HT-1002",
"Name": "Notebook Basic 18",
"ProductPicUrl": "images/HT-1002.jpg",
},
{
"ProductId": "HT-1003",
"Category": "Laptops",
"Name": "Notebook Basic 19",
"ProductPicUrl": "images/HT-1003.jpg",
}
];
const [selectedMode, setSelectedMode] = useState(ListMode.None);
const onChangeMode = useCallback((event)=>{
setSelectedMode(event.detail.selectedOption.dataset.id);
},[]);
return (
<ThemeProvider>
<div className="App">
<List title={"Products"} mode={selectedMode}>
{sampleData.map((product)=>(
<StandardListItem description={product.ProductId} image={product.ProductPicUrl}
style={{ textAlign: 'left' }}>
<Text>{product.Name}</Text>
</StandardListItem>
))}
</List>
</div>
</ThemeProvider>
);
}
export default App;
Preview:
-
- Now let’s add the toolbar and list mode selection drop down
App.js
import { useCallback, useState } from "react";
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
import { List, StandardListItem, ListMode, Text, Toolbar, Title, TitleLevel, ToolbarSpacer, Select, Option } from '@ui5/webcomponents-react';
function App() {
const sampleData = [
{
"ProductId": "HT-1000",
"Name": "Notebook Basic 15",
"ProductPicUrl": "images/HT-1000.jpg",
},
{
"ProductId": "HT-1001",
"Name": "Notebook Basic 17",
"ProductPicUrl": "images/HT-1001.jpg",
},
{
"ProductId": "HT-1002",
"Name": "Notebook Basic 18",
"ProductPicUrl": "images/HT-1002.jpg",
},
{
"ProductId": "HT-1003",
"Category": "Laptops",
"Name": "Notebook Basic 19",
"ProductPicUrl": "images/HT-1003.jpg",
}
];
const [selectedMode, setSelectedMode] = useState(ListMode.None);
const onChangeMode = useCallback((event)=>{
setSelectedMode(event.detail.selectedOption.dataset.id);
},[]);
return (
<ThemeProvider>
<div className="App">
<List title={"Products"} mode={selectedMode}
header={
<Toolbar>
<Title level={TitleLevel.H2}>Products</Title>
<ToolbarSpacer/>
<Select onChange={onChangeMode}>
<Option key={ListMode.None} data-id={ListMode.None}>No Selection</Option>
<Option key={ListMode.SingleSelect} data-id={ListMode.SingleSelect}>Single Select</Option>
<Option key={ListMode.SingleSelectBegin} data-id={ListMode.SingleSelectBegin}>Single Select Left</Option>
<Option key={ListMode.SingleSelectEnd} data-id={ListMode.SingleSelectEnd}>Single Select (Master)</Option>
<Option key={ListMode.MultiSelect} data-id={ListMode.MultiSelect}>Multi Selection</Option>
</Select>
</Toolbar>
}>
{sampleData.map((product)=>(
<StandardListItem description={product.ProductId} image={product.ProductPicUrl}
style={{ textAlign: 'left' }}>
<Text>{product.Name}</Text>
</StandardListItem>
))}
</List>
</div>
</ThemeProvider>
);
}
export default App;
Preview:
Wrap Up
That’s it!
UI5 Web Components is a great way to build apps which are SAP Fiori compliant, but use your favorite web frameworks.
Give it a try, and feel free to let me know if you have any questions or comments below!
Some great resources here also:
https://blogs.sap.com/2020/05/28/labs-talk-podcast-web-components-with-peter-muessig/
https://sap.github.io/ui5-webcomponents/playground
Great Article Dan!
We need more samples with restAPI and OData (v2) for UI5 webcomponents that will help lot many developers to think more differently and share their experience.
Also if you can include folder structure hierarchy for view & control.
Great!
for example:
in the documentation for the events for example using the shellbar, it looks like this:
<script> shellbar.addEventListener("profile-click", function(event) { popover.openBy(event.detail.targetRef); }); </script> but it doesn't work, using it in angular 11 version. try this way but not succeeded :(export class HeaderComponent implements OnInit { ....... // @ ViewChild ('shellbar') shellbar: ElementRef; // @ ViewChild ('popover') popover: ElementRef; ngOnInit (): void { // shellbar.addEventListener ("profile-click", function (event) { // popover.openBy (event.detail.targetRef); //}); // var bar = document.getElementById ('shellbar'); // var pop = document.getElementById ('popover'); // var prof = document.getElementById ('profile-btn'); // console.log (bar); //this.shellbar.nativeElement.addEventListener("profile-click ", function (event) { // this.popover.openBy (event.detail.targetRef); //console.log(event); //}); } please, can you help meI would recommend starting in the openui5 Slack channel here: https://openui5.slack.com/. There is a channel for #webcomponents which might be able to help.
I will also take a look at this and see if I can figure out what is happening.
This syntax works for me for binding the event:
Here's my sandbox: https://codesandbox.io/s/ui5-wc-angular-shellbar-0cb65?file=/src/app/app.component.ts