Using UI5 Web Components without any framework - Part 2

[ChristianPf]

This is a pure “academic” project to get a better understanding of how to use UI5 Web Components without any framework such as React, Angular or Vue.

My goal is to create blog series during which we will cover following topics

• Getting started with UI5 Web Components


• Enhancing our example using template tag


• Let´s create a bundle


• I hate todo lists, so we create a shopping list example 😉


• Additional topics such as i18n, theming and create your own UI5 Web Components

Enhancing our example from Part 1

First of all I have to apologize for taking so long to write this blog post. I hope the next ones will come quicker.

So welcome back to part 2 of using UI5 Web Components without any framework.

If you might remember in part 1 we used some DOM manipulation APIs in order to display our table with some data.

Well obviously there are more sophisticated solutions available but it's always good to understand the basic concepts :wink: .

Before we reach to templating solutions such as handlebarsjs or ejs, we go for a little simpler approach. I would like to take the credit of coming up with the idea but the real credit goes to peter.muessig  :wink:

So what we want to achieve is to define the complete table structure using HTML tags only. We will use JavaScript only to fill in the data into the table.

The <template> Tag

The html standard provides a way for us to define a content part in our website/webapp that is not rendered/displaid directly. In order to actually display the content defined within our `<template>` tag we will use JavaScript. The benefit of using this approach is that we can be sure that our content is valid. For more details you can continue reading on MDN.

Let's recap on our initial html document. We described ui5 table with table columns only. We did not define any table rows or cells.

<div>

        <ui5-table id="productsTable" no-data-text="No Data" show-no-data>

            <ui5-table-column slot="columns" style="width: 12rem">

                <span style="line-height: 1.4rem">Product</span>

            </ui5-table-column>



            <ui5-table-column slot="columns" min-width="800" popin-text="Supplier">

                <span style="line-height: 1.4rem">Supplier</span>

            </ui5-table-column>

            ...

        </ui5-table>

</div>    

Using the <template> tag we will now add the table rows and table cells (and ignore why I am using the data-attribute for now).

<template id="productrow">

    <ui5-table-row>

        <ui5-table-cell data-attribute="ProductName"></ui5-table-cell>

        <ui5-table-cell data-attribute="Supplier.CompanyName"></ui5-table-cell>

        <ui5-table-cell data-attribute="QuantityPerUnit"></ui5-table-cell>

        <ui5-table-cell data-attribute="UnitPrice"></ui5-table-cell>

        <ui5-table-cell data-attribute="UnitsInStock"></ui5-table-cell>

    </ui5-table-row>

</template>

So now all the content is described in html but we still have to enable rendering the content within the <template> tag.

Because right now our table still looks like this

Create the table rows based on the template

Let's look again at the MDN.

Looking at the sample code there we learn that we have todo the following steps in order to construct each row based on the template.

1. Get the template using your favourite DOM API method of choice (querySelector, getElementById, ...)


2. Create a clone of the table row from the template


3. Fill data into the row


4. Append the table row to the table

/** Displays product data in HTML table */

async function addProductDataInTable() {

    const response = await fetch('https://services.odata.org/V4/Northwind/Northwind.svc/Products?$expand=Supplier')

    const products = await response.json()





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

    const template = document.querySelector('#productrow')





    products.value.forEach(product => {

        const clone = template.content.cloneNode(true)

        const tableCells = clone.querySelectorAll('ui5-table-cell')





        for (const cell of tableCells) {

            const value = getNestedObjectProp(product, cell.dataset.attribute)

            cell.innerHTML = value

        }

        table.append(clone)

    });

}

So what is happening in the above code?

Our goal is to show product data in our UI5 Web Components Table.

1. We request product data from our beloved Northwind OData Service


2. We get our table and select the template using querySelector DOM API method


3. For each product we have to create a row. We use the forEach method to iterate over the products.


4. We clone the template using `template.content.cloneNode(true)`


5. The product data must be displaid in the correct table cell. That is why I have used the data-attribute in the template for each cell.


6. Each cell is mapped to the correct product attribute. The value of the product attribute being displaid in the innerHTML of each cell.


7. Each table row clone is added to the table using append method


8. We register the new function addProductDataInTable to be executed when we click the button.

Et Voilà

Summary

Let's quickly summarize what we learned on our little journey with UI5 Web Components using the <template> tag

• How the <template> works and what we can use it for


• Using the <template> tag inside our little UI5 Web Components application


• Filling the table with product data from the Northwind Service

As usual all of this code can be found on GitHub.

In the next blog post we will create a bundle using a bundler such as webpack, snowpack, ... .

Feel free to provide feedback or ask additional questions. Or just leave a like in case you enjoyed reading this blog post.

[Valeck]

great work!

[sachin_bhutani]

thanks for the detailed into.

is there an way to align numeric columns to the right ?

the price column in the example would look better if right aligned.