List View

Basic Markup

The basic markup for a list view looks like this:

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

Which renders this:

Empty List View

Simple 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 alerts 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 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 three distinct row types for list view.

    
<div class="new-list-view-header">
  <h3 class="col col-100">Row Type</h3>
</div>
<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-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>
    
  

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

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

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.