Skip to Content
Technical Articles
Author's profile photo Yogananda Muthaiah

Create and Run your First UI5 Web Components App using Bundle.esm.js

Dear All,

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 :

Todos API from

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

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.

		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<title>Todos API Built in UI5</title>
		<script src="" type="module"></script>
		<script src="" type="module"></script>

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

		<ui5-shellbar primary-title="{JSON} Placeholder">
			<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
			<img slot="logo" src=""/>

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

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

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

        <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 slot="columns" min-width="800">
                <span style="line-height: 1.4rem">id</span>
            <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 slot="columns" min-width="600" popin-text="Weight" demand-popin class="table-header-text-alignment">
                <span style="line-height: 1.4rem">completed</span>
        <template id="productrow">
                <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>
        <script type="text/javascript" charset="utf-8">
            const ui5Button = document.querySelector('ui5-button')

            ui5Button.addEventListener('click', addData)

            async function addData() {
                const response = await fetch('')
                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


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


In this section, you can find out API docs & samples for all of our 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.


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



Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      It seems you wanted to show how to create an app using remote assets. Just bear in mind that is not a CDN.

      You're just using a remote script, a non-local js file, that's all. Saying it's a CDN could be misleading for people who don't fully understand what a CDN is.