Templated Lists

Overview

Applications commonly need to display lists of business objects, e.g. a list of search results, a list of accounts for a customer, a list of options for the user to select from, etc.

Each item in the list is often more than just a simple string value; it’s an object with multiple fields that need to display for each item.

To do this, we create a template for each item in the list. This template is a small collection of UI elements that display the business object’s fields and are grouped together in a cohesive way. We then repeat this template for each item in the list.

The list of templated objects needs to support any number of items, so they are typically displayed in a container that scrolls as needed.

If the user can click an item in the list to navigate elsewhere, tiles can be a good option for displaying the template for each item. Users understand that tiles are clickable, so using a tile signals to the user that the list item can be clicked.

If the template data doesn’t lend itself to a tile — say the data is just too large to fit into a tile or there are multiple click actions associated with the template data — then the template can use an alternate layout, which perhaps contains a link or button that the user can click to navigate.

If a templated list doesn’t use tiles as the container for each item, then you should display enough margin between each item in the list so that each object appears as its own separate chunk of data.

Consider adding animation to the list items to help bring your app to life.

Development

Web component development

Implementation

Angular applications use *ngFor to repeat a UI template for each item in a list, binding the fields for each list object to the appropriate element in the template.

The following HTML displays a list of search results as a list of tiles using *ngFor. Each field in each object is displayed in the appropriate element using an Angular binding.

<rui-tile *ngFor="let item of list" titleText="{{item.name}}" iconType="{{item.iconType}}">
    {{item.subheader}}<br />
    {{item.balance | jhaCurrency}}
</rui-tile>

If you’re not using tiles to implement the list, then apply the rui-template CSS class to the div that acts as the template container (the div that gets the *ngFor). This provides the proper spacing and adds a thin line between list items.

The following HTML displays a list of accounts, conditionally displaying certain elements based on information in the object. We add the rui-template class to the outer div.

<div *ngFor="let item of list" class="rui-template account-container">

    <rui-icon [iconType]="item.iconType" size="28px" class="account-icon"></rui-icon>

    <div class="account-info">
        <div class="rui-bright-text-label">{{item.name}}</div>
        <div class="rui-regular-text-label">{{item.subheader}}</div>
    </div>

    <p class="rui-regular-text-label account-balance rui-hidden-mobile">{{item.balance | jhaCurrency}}</p>

    <rui-button text="More Info"></rui-button>
    
</div>

Angular wrapper development

Implementation

Angular applications use *ngFor to repeat a UI template for each item in a list, binding the fields for each list object to the appropriate element in the template.

If you’re not using tiles to implement the list, then apply the jha-template CSS class to the div that acts as the template container (the div that gets the *ngFor). This provides the proper spacing and adds a thin line between list items.

The following HTML displays a list of search results as a list of tiles using *ngFor. Each field in each object is displayed in the appropriate element using an Angular binding.

<jha-tile [jhaTitle]="searchResult.Name" jhaIconType="PersonInfo" style="height:165px"
    *ngFor="let searchResult of searchResults.results"
    (click)="helpCustomer(searchResult.ID)">
    <p>{{searchResult.Street}}<br />{{searchResult.CityStateZip}}</p>
    <p>Tax Id: {{searchResult.TaxId}}<br />Phone: {{searchResult.Phone}}</p>
</jha-tile>

The following HTML displays a list of accounts, conditionally displaying certain elements based on information in the object. We add the jha-template class to the outer div.

<div *ngFor="let account of accountList" class="jha-template jha-template-clickable" (click)="selectAccount(account.id)">
    <p class="jha-regular-text-label" style="float:right">
        {{!account.Open ? '(Closed)' : (account.Balance | currency)}}
    </p>
    <p class="jha-bright-text-label">{{account.Name}}</p>
    <p class="jha-regular-text-label">{{account.AccountType}}</p>
</div>

Design

Figma design

First build the template by combining the elements needed to display one item in the list.

Combine all the elements in the template into a single group.

Duplicate the group to repeat the template as many times as desired.

Adobe XD design

First build the template by combining the elements needed to display one item in the list.

Combine all the elements in the template into a single group.

Use the repeat grid option on the group to repeat the template as many times as desired.