List View

Basic Markup

For the header, use the container class .new-list-view-header, and for each column, use an <h3> with .col and .col-* where * is the percentage width of the column in increments of 5%.

The body of the list view is a <ul> or <ol> with .new-list-view applied to it. Within each <li>, there should be a corresponding <div class="col col-*"> for each column defined in .new-list-view-header.

For list views without headers, include the modifier class .new-list-view-no-header in the <ul> or <ol>. This will add a top border to your list view.

    
<!-- header of the list -->
<div class="new-list-view-header">
    <h3 class="col col-25">Header Column 1</h3>
    <h3 class="col col-25">Header Column 2</h3>
    <h3 class="col col-50">Header Column 3</h3>
</div>
<!-- body of the list -->
<ul class="new-list-view">
  <li>
    <div class="list-view-item">
      <div class="col col-25">Body Column 1</div>
      <div class="col col-25">Body Column 2</div>
      <div class="col col-50">Body Column 3</div>
    </div>
  </li>
  <li>
    <div class="list-view-item">
      <div class="col col-25">Body Column 1</div>
      <div class="col col-25">Body Column 2</div>
      <div class="col col-50">Body Column 3</div>
    </div>
  </li>
</ul>
    
  

States

In addition to simply displaying data in a list view, there are additional states that should be considered:

• Loading
• Failed to Load Data
• Empty
• Empty - First Run

Loading Data

Provide text and use a … to indicate that data is loading in place by wrapping it inside a .loading-list-view-items item within the .new-list-view.

View the interactive example of the list view and refresh the page.

    
<li class="loading-list-view-items">
  Fetching alert policies from server&hellip;
</li>
    
  

Failed to Load Data

Provide text to indicate that the data has failed to load inside a .error-list-view-items item within the .new-list-view. If possible, provide a link to retry loading the data.

    
<li class="error-list-view-items">
  <svg class="cyclops-icon danger"><use xlink:href='#icon-exclamation-circle'></svg> Alert policies failed to load.
</li>
    
  

Empty List

When a list view is empty, provide a way within the empty list to create whatever entity the list contains by defining the contents of a .empty-list-view-item item within the .new-list-view.

    
<li class="empty-list-view-item">
  There are no alert policies on this server. <button class="btn btn-link-text">Apply an alert policy</button>.
</li>
    
  

First-Run Empty List

To provide a prominent message about the contents of an empty list, add .feature to .empty-list-view-item and use the following as a template for featuring the benefits/info of the service with a call to action.

    
<li class="empty-list-view-item feature">
  <svg class="cyclops-icon lg green"><use xlink:href='#icon-database' /></svg>
  <h3>Get Started with Relational DB</h3>
  <p class="lead">Relational DB makes it easy to set up and manage high performance, cost efficient, MySQL-compatible relational databases. </p>
  <p><a href="#" class="btn btn-primary btn-lg">create a database</a></p>
</li>
    
  

Column Widths

List view columns are built using a .col and corresponding percentage width .col-*. Available widths include: .col-10, .col-15, .col-20, .col-25 , .col-30, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60, .col-65, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95, .col-100

Row Types (Items)

The immediate child of a li element within a list, is the type of row you wish to use. There are four distinct row types for list view.

    
<ul class="new-list-view">
  <li>
    <div class="list-view-item">
      <div class="col col-100">Item</div>
    </div>
  </li>
  <li>
    <div class="list-view-link-item">
      <div class="col col-100">Link Item</div>
    </div>
  </li>
  <li>
    <div class="list-view-editable-item">
      <div class="col col-100">Editable Item</div>
    </div>
  </li>
  <li>
    <div class="list-view-read-only-item">
      <div class="col col-100">Read Only Item</div>
    </div>
  </li>
</ul>
    
  

Row Colors

To highlight rows within a list view, add .list-view-item-* — where * is success, info, warning or danger — to a .list-view-item or .list-view-editable-item.

    
<ul class="new-list-view">
  <li>
    <div class="list-view-editable-item list-view-item-success">
      <div class="col col-100">.list-view-item-success</div>
    </div>
  </li>
  <li>
    <div class="list-view-editable-item list-view-item-info">
      <div class="col col-100">.list-view-item-info</div>
    </div>
  </li>
  <li>
    <div class="list-view-editable-item list-view-item-warning">
      <div class="col col-100">.list-view-item-warning</div>
    </div>
  </li>
  <li>
    <div class="list-view-editable-item list-view-item-danger">
      <div class="col col-100">.list-view-item-danger</div>
    </div>
  </li>
</ul>
    
  

Row Status

To show the current state of list items (e.g. alert policies), add .new-list-view-status to modify both .new-list-view-header and .new-list-view blocks. Then add .status-warning or .status-danger to the <li>. By default, each <li> will have a grey (or normal) state.

    
<div class="new-list-view-header new-list-view-status">
  <h3 class="col col-35">Server</h3>
  <h3 class="col col-35">Policy</h3>
  <h3 class="col col-30">Status</h3>
</div>
<ul class="new-list-view new-list-view-status">
  <li class="status-danger">
    <div class="list-view-link-item">
      <div class="col col-35"><a href="#">Server Name</a></div>
      <div class="col col-35"><a href="#">CPU Usage > 90%</a></div>
      <div class="col col-30">Notification Open</div>
    </div>
  </li>
  <li class="status-warning">
    <div class="list-view-link-item">
      <div class="col col-35"><a href="#">Server Name</a></div>
      <div class="col col-35"><a href="#">Memory Usage > 90%</a></div>
      <div class="col col-30">Ackowledged</div>
    </div>
  </li>
  <li>
    <div class="list-view-link-item">
      <div class="col col-35"><a href="#">Server Name</a></div>
      <div class="col col-35"><a href="#">Disk Usage > 90%</a></div>
      <div class="col col-30">Ackowledged</div>
    </div>
  </li>
</ul>
    
  

Inline Form

If an item in a list view may be edited, or a new item maybe added inline, the list view inline form is available for in context editing (as opposed to navigating to a different page). Wrap the create/edit form in an .li with .list-view-item-form. Consider the complexity and number of input parameters the form will contain when deciding whether to use an inline form, or having a separate create/edit page.

If allowed, be sure to include a delete button, with confirmation, button in the edit form.

View a fully interactive demo of the list view.

    
<ul class="new-list-view">
  <li>
    <div class="list-view-item">
      <div class="col col-100">Item</div>
    </div>
  </li>
  <li>
    <div class="list-view-item-form">
      <form class="form-horizontal">
        <fieldset>
          <legend>Inline Edit Form <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></legend>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="listViewInlineFormName">name</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="listViewInlineFormName">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="listViewInlineFormEmail">email</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="listViewInlineFormEmail">
            </div>
          </div>
          <div class="form-group form-submit">
            <div class="col-sm-offset-3 col-sm-9">
              <button class="btn btn-primary">Save</button>
              <button class="btn btn-link">cancel</button>
              <button class="btn btn-danger pull-right">Delete</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </li>
</ul>
    
  

Toolbar

The .new-list-view-toolbar is a container for block elements used for modifying or augmenting the view of items in a list view (e.g. create and filter). Wrap any text that follows a button with a p or span tag to provide padding on the left.

    
<div class="new-list-view-toolbar">
  <button class="btn btn-default">create item</button>
  <span class="p-l-xs">1 - 10 of 23 items</span>
  <div class="new-list-view-toolbar-right">
    ...
  </div>
</div>
    
  

To add more visual emphasis to the toolbar, add the modifier class, .new-list-view-toolbar--border to add a border and background around the toolbar items.

    
<div class="new-list-view-toolbar new-list-view-toolbar--border">
  <button class="btn btn-default">create item</button>
  <span class="p-l-xs">1 - 10 of 23 items</span>
  <div class="new-list-view-toolbar-right">
    ...
  </div>
</div>
    
  

Responsive List Views

To accomodate narrow viewports (i.e. phones), wrap list views in a .new-list-view-responsive div and one of the following classes to set the breakpoint. The .new-list-view-toolbar-right will also adhere to the breakpoint set by the classes below.

In each col, set an optional label to appear above each column value.

    
<div class="new-list-view-responsive new-list-view-responsive-sm">
  <div class="new-list-view-toolbar">
    <button class="btn btn-primary">create item</button>
    <div class="new-list-view-toolbar-right">
      ...
    </div>
  </div>
  <div class="new-list-view-header">
      <h3 class="col col-25">First Name</h3>
      <h3 class="col col-25">Last Name</h3>
      <h3 class="col col-50">Username</h3>
  </div>
  <ul class="new-list-view">
    <li>
      <div class="list-view-item">
        <div class="col col-25"><span class="col-header">First Name</span>Alyssa</div>
        <div class="col col-25"><span class="col-header">Last Name</span>Carizzalas</div>
        <div class="col col-50"><span class="col-header">Username</span>alyssa.carizzalas</div>
      </div>
    </li>
    <li>
      <div class="list-view-item">
        <div class="col col-25"><span class="col-header">First Name</span>Matthew</div>
        <div class="col col-25"><span class="col-header">Last Name</span>Osborn</div>
        <div class="col col-50"><span class="col-header">Username</span>mosborn</div>
      </div>
    </li>
  </ul>
</div>
      
    

Nested List View

When it is necessary to display hierarchy (e.g. subaccounts, groups/servers), nest a .new-list-view immediately after the .list-view-*-item element. Then add .col-indent to the .col within the <li> in that should be indented.

Six levels of indentation is supported.

    
<ul class="new-list-view">
  <li>
    <div class="list-view-editable-item">
      <div class="col col-10"><input type="checkbox"></div>
      <div class="col col-90">Level 1a</div>
    </div>
  </li>
  <li>
    <div class="list-view-editable-item">
      <div class="col col-10"><input type="checkbox"></div>
      <div class="col col-90">Level 1b</div>
    </div>
    <ul class="new-list-view">
      <li>
        <div class="list-view-editable-item">
          <div class="col col-10"><input type="checkbox"></div>
          <div class="col col-90 col-indent">Level 2a</div>
        </div>
        <ul class="new-list-view">
          <li>
            <div class="list-view-editable-item">
              <div class="col col-10"><input type="checkbox"></div>
              <div class="col col-90 col-indent">Level 3</div>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="list-view-editable-item">
          <div class="col col-10"><input type="checkbox"></div>
          <div class="col col-90 col-indent">Level 2b</div>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <div class="list-view-editable-item">
      <div class="col col-10"><input type="checkbox"></div>
      <div class="col col-90 col-indent">Level 1c</div>
    </div>
  </li>
</ul>
    
  

Interactive Examples

Below are examples of list view using javascript objects and knockout bindings.

Read Only

Create, Read, Update, Delete (CRUD)

Filtering & Sorting

Filtering and sorting can easily be added to a list view by using a filterableArray. For information about how to use a filterableArray and available options, see the code documentation.

Be judicious when deciding whether to implement filtering or sorting. Here are some guidelines to consider:

• Allow filtering only on fields that are visible, so users can see why that row or item is being displayed.
• If 95% of the use cases involve having a list of 1-10 items, then it's probably not worth the cost of implementing filtering or sorting.