Record list

Record list

A record list should be helpful for users to read basic information and perform corresponding operations easily. Therefore, the "readability" and "operability" of a list are the keys to the design.

When rendering a record list it is recommended to:

  • Identify the importance of information accordingly to the context and show nothing but key information as well as the corresponding operations
  • Differentiate types of items either by separating them into different lists or by clearly labeling them within the list
  • Place secondary information on a collapsible container or put it on the details page. It allows a user to access information in a progressive way when the content is too complex
  • When there are only one or two points of interaction in each record, provide a visible affordance — such as an icon or a button. More than 2 points of interaction should be grouped in a dropdown
  • Provide a c8y-ui-action-bar to hold filters and other interaction points to the list
  • Always display an empty state component when the record list is empty

Table

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

List groups

A record in a list group contains a primary field and may include a supporting icon, a checkbox and/or additional fields.

Records may be not homogeneous and secondary data may be placed in a collapsible container. Specific record actions are grouped in a dropdown aligned to the right.

Some list-groups may be wrapped in a card for styling purposes (e.g. adding a title to the list).

All alarms


All alarms

Reports


reports

Device control


device opertions
<ul class="list-group">
  <li class="list-group-item"><!--content of the list item--></li>
  <li class="list-group-item"><!--content of the list item--></li>
  <li class="list-group-item"><!--content of the list item--></li>
  […]
</ul>
<!-- or using a card -->
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4>
  </div>
  <ul class="list-group">
    <li class="list-group-item"><!--content of the list item--></li>
    <li class="list-group-item"><!--content of the list item--></li>
    <li class="list-group-item"><!--content of the list item--></li>
    […]
  </ul>
</div>

Timeline lists

To display records in chronological order you can use the timeline-list component as an alternative to the list-group.

Events


Events

Audit logs


Audit logs
<ul class="timeline-list">
  <li class="timeline-list-item flex-row">
    <small class="timeline-item-date text-right">
      <strong>24 Mar 2017</strong>
      <span class="text-muted">13:45</span>
    </small>
    <div class="timeline-item-content flex-row">
      […]
    </div>
  </li>
  […]
</ul>

User lists

Displays user records in a hierarchical layout. Sub users are collapsed under parent users. Requires the c8y-ui-action-bar.

Events


Users list

Uses the user-list component.

Grid list

Displays a record list in a grid layout using cards. Cards within the same row will have the same height providing a consistent look and facilitating users navigation. Check card-group in components.

Secondary information can be placed on the back of the card (using the flip card) or on the details page.

Use the grid system to wrap the cards in the right column size.

Simulators


Simulators

SmartREST templates


SmartREST templates

Software repository


Software repository
<div class="card-group interact-grid">
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="card">[…]</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="card">[…]</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="card">[…]</div>
  </div>
  […]
</div>

Interact card list

Records displayed in cards can also be displayed in a stacked list format, we provide the modifier classes interact-grid and interact-list for this. The default option is based on the initial number of displayed records.

Requires the use of c8y-ui-action-bar to hold the grid/list switcher.

Check card-group in components.

Group sub-assets grid


Group sub-assets grid

Group sub-assets list


Group sub-assets list

Subtenants list


Subtenants list
<div class="card-group interact-list"> 
    <!-- add interact-grid or interact-list to change the display -->
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="card">[…]</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="card">[…]</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="card">[…]</div>
  </div>
[…]
</div>