Album Table Feature

SAPUI5 Different Table Bindings

One of the commonly asked question on SAPUI5 is regarding different table bindings. Today let’s discuss, how can we really bind data to a table in SAPUI5 in 3 different ways.

The Problem

Often times developers always encounter how to display multiple data at once to a table. In SAPUI5 this can be very tricky especially if the table representation is more complex than the usual.
Common problems arise from wrong binding path, different column display, up to dynamically generated rows based on logic.

The Solution

So how can we represent data on a SAPUI5 table? What are the options available to us?
Before we begin, let’s say we have the table below. The table displays a list of albums with an image.

You can also refer to this tutorial on how to make SAPUI5 projects with best practices.

Albums Table
Albums Table

This table contains a modified copy of albums API from JSON Placeholder. Below is a sample data of the table:

{
    "columns": [{
        "label": "Albumd ID"
    }, {
        "label": "Album Title"
    }, {
        "label": "Cover"
    }],
    "rows": [{
        "albumId": 1,
        "id": 1,
        "title": "accusamus beatae ad facilis cum similique qui sunt",
        "thumbnailUrl": "https://via.placeholder.com/150/92c952",
        "status": "active"
    }, {
        "albumId": 1,
        "id": 2,
        "title": "reprehenderit est deserunt velit ipsam",
        "thumbnailUrl": "https://via.placeholder.com/150/771796",
        "status": "active"
    }, {
        "albumId": 1,
        "id": 3,
        "title": "officia porro iure quia iusto qui ipsa ut modi",
        "thumbnailUrl": "https://via.placeholder.com/150/24f355",
        "status": "inactive"
    }, {
        "albumId": 1,
        "id": 4,
        "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
        "thumbnailUrl": "https://via.placeholder.com/150/d32776",
        "status": "inactive"
    }, {
        "albumId": 1,
        "id": 5,
        "title": "natus nisi omnis corporis facere molestiae rerum in",
        "thumbnailUrl": "https://via.placeholder.com/150/f66b97",
        "status": "active"
    }]
}

Using the table above, let’s use the 3 different ways to data bind tables in SAPUI5.

Row or Item Binding

The most common way to bind data to a table is to use bindItems or items property on XML view.

<!-- Table with row items binded -->
<Table items="{albums>/rows}">
    <headerToolbar>
        <OverflowToolbar>
            <content>
                <Title text="Table with row items binded" level="H2"/>
            </content>
        </OverflowToolbar>
    </headerToolbar>
    <columns>
        <Column width="12em">
            <Text text="Id"/>
        </Column>
        <Column minScreenWidth="Tablet" demandPopin="true">
            <Text text="Title"/>
        </Column>
        <Column minScreenWidth="Desktop" demandPopin="true" hAlign="End">
            <Text text="Image"/>
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <ObjectIdentifier title="{albums>id}"/>
                <Text text="{albums>title}"/>
                <Image src="{albums>thumbnailUrl}" width="6rem" decorative="true"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

Let’s breakdown the XML view above.

<Table items="{albums>/rows}">
<!-- ...code continues -->
</Table>

In our table control, we set up the binding path to the target aggregation. Here items is a aggregation property, which accepts a collection of data. The value {album>/rows} pertains to a segment is our albums JSON Model, see highlighted image below.

{
    "columns": [{
        "label": "Albumd ID"
    }, {
        "label": "Album Title"
    }, {
        "label": "Cover"
    }],
    "rows": [{
        "albumId": 1,
        "id": 1,
        "title": "accusamus beatae ad facilis cum similique qui sunt",
        "thumbnailUrl": "https://via.placeholder.com/150/92c952",
        "status": "active"
    }
}

SAPUI5 will interpret the binding path {album>/rows} and read the the JSON Model to fetch the equivalent data on the specific node, in this example rows segment will return all the albums collection. This binding will produce the table below:

Albums Table
Albums Table

Column Binding

We now proceed to column data binding. Like row or items binding, the column binding refers to a collection to render multiple headers of a SAPUI5 table.

<!-- Table with column and items binded -->
<Table items="{albums>/rows}" columns="{albums>/columns}">
    <headerToolbar>
        <OverflowToolbar>
            <content>
                <Title text="Table with column and items binded" level="H2"/>
            </content>
        </OverflowToolbar>
    </headerToolbar>
    <columns>
        <Column>
            <Text text="{albums>label}"/>
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <ObjectIdentifier title="{albums>id}"/>
                <Text text="{albums>title}"/>
                <Image src="{albums>thumbnailUrl}" width="6rem" decorative="true"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

The highlighted lines above shows that the columns property is bound to a collection {albums>/columns}. Looking at our JSON model, see below, we can see that the columns tag is bound to the values of each column in the JSON model.

{
    "columns": [{
        "label": "Album ID"
    }, {
        "label": "Album Title"
    }, {
        "label": "Cover"
    }]
}

Each Column contains an inner control, for example, Text which is bound to {albums>label}. Notice the absence of “/”, this is due to fact that during column binding, all path will act as relative path.

The binding will result to the table below:

Album Table Column Binding
Album Table Column Binding

Factory Binding

Other than items and columns binding, another way to generate the contents of the table is via factory method. The factory method is like any other method, except it will be called for each entry on the aggregation.
So going back to our JSON model, columns contains 3 entries, Album ID, Album Title, and Cover, the factory will be executed 3 times to build the SAPUI5 control.

<!-- Table with items using factory -->
<Table items="{ path: 'albums>/rows', factory: '.albumListFactory' }" columns="{albums>/columns}">
    <headerToolbar>
        <OverflowToolbar>
            <content>
                <Title text="Table with items using factory" level="H2"/>
            </content>
        </OverflowToolbar>
    </headerToolbar>
    <columns>
        <Column>
            <Text text="{albums>label}"/>
        </Column>
    </columns>
</Table>

Notice in the above source code, we don’t have an items tag to render the table rows. Instead we have a factory attribute on items property. This method can be found on our controller.

In the code above, we check if the property binding contains a status with a value of active, this will result to change of returned control to customize the row item of the table. The table below shows that other rows render differently according to status.

Album Table Factory Method
Album Table Factory Method

Conclusion

In conclusion, we can utilize these different binding styles on a table to our need. This enables us to dynamically create complex layout without too much code and make of use of data binding with ease.
But do take note not to overuse the factory method and prioritize make use of items and columns binding, as this will result to additional processing time.

All the source code above can be found in this repository.

If you like this post, let me know in the comment section. Don’t forget to like and subscribe!

1 thought on “SAPUI5 Different Table Bindings”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.