Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Using UI5 Web Components

Dan_Antonio
Advisor
Advisor
‎12-21-2020 6:31 AM

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

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
5 Comments
Labels in this area
Popular Blog Posts