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