List View

List view provides built-in views for create, read, update, and delete (CRUD) operations, making them ideal for displaying many different types of user managable entities in the Control Portal (e.g. alerts policies, scheduled tasks).

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 Column 1

Header Column 2

Header Column 3

  • Body Column 1
    Body Column 2
    Body Column 3
  • Body Column 1
    Body Column 2
    Body Column 3
    
<!-- 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 Data

Provide text and use a &hellip; 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.

Alert Policy

Description

  • Fetching alert policies from server…
    
<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.

Alert Policy

Description

  • Alert policies failed to load.
    
<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.

Alert Policy

Description

  • There are no alert policies on this server. .
    
<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.

Database

Location

  • Get Started with Relational DB

    Relational DB makes it easy to set up and manage high performance, cost efficient, MySQL-compatible relational databases.

    create a database

    
<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.

.list-view-item No hover state on mouse over. Ideal for displaying lists of read-only data.
.list-view-link-item Hover state on mouse over. Ideal for use when a column in the row contains an anchor link.
.list-view-editable-item Entire row is highlighted on hover, and is clickable. Clicking the row will link to another page, or the edit form will replace the selected row. Ideal for items whose entire row should be clickable.
.list-view-read-only-item The row is not selectable, and the background is slightly dimmed as to appear un-editable. Ideal for displaying lists where items are a mix of read-only and editable items.
  • Item
  • Editable Item
  • Read Only Item
    
<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.

  • .list-view-item-success
  • .list-view-item-info
  • .list-view-item-warning
  • .list-view-item-danger
    
<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.

Server

Policy

Status

    
<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.

  • Item
  • Item
  • Inline Edit Form
  • Item
    
<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.

1 - 10 of 23 items

list view header…

    
<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.

1 - 10 of 23 items

list view header…

    
<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.

.new-list-view-responsive-sm 768px
.new-list-view-responsive-md 992px
.new-list-view-responsive-lg 1200px

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

1 - 10 of 23 items

First Name

Last Name

Username

  • First NameAlyssa
    Last NameCarizzalas
    Usernamealyssa.carizzalas
  • First NameMatthew
    Last NameOsborn
    Usernamemosborn
    
<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.

Level

    
<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

Name

Type

Servers

    Create, Read, Update, Delete (CRUD)

    Name

    IP Address

    Description

      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.

      description

      anchor link to top of page