This site describes our support for the AngularJS (1.x) framework. Visit developer.blackbaud.com/skyux for information on our latest version.

Create a record page

Now that you've learned how to get a SKY UX app up and running, let's build a page with some content. SKY UX applications feature two common page types: record pages and tabbed pages.

Record pages usually display information about specific records in two distinct sections: a summary section and a tiles section.

Summary section

The summary section resides at the top of the page to provide a general overview of a record. For example, it can display information such as a record name, description, and profile picture. To add a summary section to your page, use the page summary directive. Here's an example of a summary section with a name, description, and profile photo:

Robert Hernandez CEO, Barkbaud, Inc. Robert Hernandez is an important member of our organization.

<bb-page-summary>
  <bb-page-summary-image>
    <bb-avatar
      bb-avatar-src="'/assets/img/hernandez.jpg'">
    </bb-avatar>
  </bb-page-summary-image>
  <bb-page-summary-title>
    Robert Hernandez
  </bb-page-summary-title>
  <bb-page-summary-subtitle>
    CEO, Barkbaud, Inc.
  </bb-page-summary-subtitle>
  <bb-page-summary-content>
    Robert Hernandez is an important member of our organization.
  </bb-page-summary-content>
</bb-page-summary>

Tiles section

The tiles section usually consists of two columns of tiles (or one column for extra-small screen sizes like mobile phones) that displays more information about a record in logical sections. Each tile includes a header and body for the tile's title and content. Tiles are collapsible, and if they are used in conjunction with a tiles dashboard, users can rearrange them.

This example shows a page with a static tile layout. To define a dynamic tile layout from a configuration object such as user preferences, you can use the tile dashboard directive.

Address

410 17th Street
Denver, CO 80202-4402

$1.4k

Given to Building Fund
10/21/2015
<div class="container-fluid">
  <div class="row bb-page-content-multicolumn">
    <div class="col-md-6 bb-page-content-tile-column">
      <bb-tile bb-tile-header="'Personal information'">
        <div bb-tile-section>
            <h4>Address</h4>
            410 17th Street
            <br>
            Denver, CO 80202-4402
        </div>
      </bb-tile>
    </div>
    <div class="col-md-6 bb-page-content-tile-column">
      <bb-tile bb-tile-header="'Latest gift'">
        <div bb-tile-section>
            <h4>$1.4k</h4>
            Given to Building Fund
            <br>
            10/21/2015
        </div>
      </bb-tile>
    </div>
  </div>
</div>

Tiles can display data in all kinds of formats, including a list of fields with their values, a repeater view of records, a chart, or anything else you can imagine. You can find more information about common data elements in tiles in the Components section, but for now let's move on to tabbed pages.


Next step: Create a tabbed page »