Skip to Content
Technical Articles
Author's profile photo Dan Antonio

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

https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-web-frameworks-wanted2

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).

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-list

If 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

    1. 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:

    1. 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

Assigned Tags

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

      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.

      Author's profile photo Amit Krishna
      Amit Krishna

      Great!

      Author's profile photo eEloy Silva
      eEloy Silva

      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 me
      
      
      
      Author's profile photo Dan Antonio
      Dan Antonio
      Blog Post Author

      I 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.

      Author's profile photo Dan Antonio
      Dan Antonio
      Blog Post Author

      This syntax works for me for binding the event:

      <ui5-shellbar
      	primary-title="Corporate Portal"
      	secondary-title="secondary title"
        (profile-click)="onProfileClick()"
      >

      Here's my sandbox: https://codesandbox.io/s/ui5-wc-angular-shellbar-0cb65?file=/src/app/app.component.ts