This blog aims to explain how you can build UI5 webcomponents application using bundle.esm.js for your developers to create something new.. This is lightweight and easy to develop according to your need by using Web components provided in documentation.

SAP UI5 Webcomponents Documentation : https://sap.github.io/ui5-webcomponents/

Todos API from  https://jsonplaceholder.typicode.com/


UI5 Web Components – Fiorisiert SAP nun das WWW?! » vogel304.de

Create App using Todos API data in UI5 Webcomponents

The simplest example is the very obvious getting data from Todos API to UI5 application. To run this application we will be using the Bundle.esm.js. First, let us create an index.html file with basic HTML structure. For simplicity, we will be writing the js code in the same file.

<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<title>Todos API Built in UI5</title>
		<script src="https://sap.github.io/ui5-webcomponents/assets/js/ui5-webcomponents/bundle.esm.js" type="module"></script>
		<script src="https://unpkg.com/@luigi-project/container" type="module"></script>

		<script data-ui5-config type="application/json">{"theme": "sap_horizon"}</script>
		<style>
			html, body {
				margin: 0;
			}
			luigi-container {
				position: absolute;
				width: 100%;
				left: 0;
				top: var(--_ui5_shellbar_root_height);
				bottom: 0;
			}
		</style>
	</head>
	<body>

		<ui5-shellbar primary-title="{JSON} Placeholder">
			<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
			<img slot="logo" src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg"/>
		</ui5-shellbar>

        <!--- Bug to reported
        <ui5-message-strip style="line-height: 1.4rem" design="Information">Information MessageStrip</ui5-message-strip>
        --->
<!--         
        <style>
            .backgro {
                background: rgba(224,224,224,0.5)
            }
        </style>


        <div class="backgro">
            <div class="fd-col fd-col--12 main-title">
                <ui5-title slot="title" level="H3">       Result table</ui5-title>
            </div>
        </div>        -->

        <!---<h3>{{ utc_dt }}</h3>---->

        <br> <br>

        <ui5-label class="samples-big-margin-right" for="myInput" required show-colon>User Name</ui5-label>
        <ui5-input id="myInput" placeholder="Enter your Name" required></ui5-input>
        
        <ui5-label class="samples-big-margin-right" for="myPassword" required show-colon>Password</ui5-label>
        <ui5-input id="myPassword" type="Password" value-state="None" placeholder="Enter your Secret Code" required></ui5-input>

        <ui5-button id="ui5Button" design="Emphasized">Submit</ui5-button>
        
        <!--- Bug to reported
        <ui5-message-strip design="Positive" style="width: 200px;" hide-close-button>Successfull login!</ui5-message-strip>
        -->


        <br> <br>

    <div>
        <ui5-title slot="title" level="H3">     Todos API</ui5-title>
    </div>


    <div>
        <ui5-table class="demo-table" id="productsTable" no-data-text="No Data" show-no-data>
            <!-- Columns -->
            <ui5-table-column slot="columns">
                <span style="line-height: 1.4rem">userId</span>
            </ui5-table-column>
        
            <ui5-table-column slot="columns" min-width="800">
                <span style="line-height: 1.4rem">id</span>
            </ui5-table-column>
        
            <ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin class="table-header-text-alignment">
                <span style="line-height: 1.4rem">title</span>
            </ui5-table-column>
        
            <ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin class="table-header-text-alignment">
                <span style="line-height: 1.4rem">completed</span>
            </ui5-table-column>
    </div> 
        <template id="productrow">
            <ui5-table-row>
                <ui5-table-cell data-attribute="userId"></ui5-table-cell>
                <ui5-table-cell data-attribute="id"></ui5-table-cell>
                <ui5-table-cell data-attribute="title"></ui5-table-cell>
                <ui5-table-cell data-attribute="completed"></ui5-table-cell>
            </ui5-table-row>
        </template>
        
        <script type="text/javascript" charset="utf-8">
            const ui5Button = document.querySelector('ui5-button')

            ui5Button.addEventListener('click', addData)

            async function addData() {
                const response = await fetch('https://jsonplaceholder.typicode.com/todos')
                const products = await response.json()

                const table = document.querySelector('ui5-table')

                products.forEach(product => {
                    const tableRow = document.createElement('ui5-table-row')

                    for (const [key, value] of Object.entries(product)) {
                        const tableCell = document.createElement('ui5-table-cell')
                        tableCell.innerHTML = value
                        tableRow.append(tableCell)
                    }
                    table.appendChild(tableRow)
                });
            }
        </script>


	</body>
</html>

Open the file in a web browser and you should see a Todos API results in table when user clicks on Submit Button.

Components

In this section, you can find out API docs & samples for all of our components.

https://sap.github.io/ui5-webcomponents/playground/components

From this blog you learnt something new today and if you like to try this way, I am assuming you need to have a knowledge of HTML, CSS and Javascript concepts.


Conclusion

In this tutorial, you have seen a simple example to get you started using UI5 Webcomponents. This is light-weight and doesn’t need nodeJS or NPM libraries to install..

 

Sara Sampaio

Sara Sampaio

Author Since: March 10, 2022

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x