Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.


The page directive handles functionality around loading pages.

Page settings

  • bb-page
    • bb-page-status — Indicates the status of the page.
      • LOADING — Denotes that the page is loading.
      • LOADED — Denotes that the page loaded successfully.
      • NOT_AUTHORIZED — Denotes that the page loaded and displays a message that the user does not have right to view the content on the page.
      • NOT_FOUND — Denotes that the page was not found and redirects to the not-found URL specified in bb-page-config.
    • bb-page-uses-load-manager — Allows the page to use the bb-data load manager to detect when components within bb-page are loading.
  • bb-page-config — A global configuration object that applies options to pages throughout an application.
    • redirectUrl(Optional.) Provides a URL for the NOT_AUTHORIZED redirect button. If you do not specify a URL, the NOT_AUTHORIZED redirect button sends users to the website root.
    • notFoundUrl(Optional.) Provides a URL to set $location.path to when bb-page-status is NOT_FOUND.


This text represents the content on a page, and the buttons simulate loading the page.


<div ng-controller="PageTestController as pageCtrl">
    <bb-page bb-page-status="pageCtrl.pageStatus">   
       This text represents the content on a page, and the buttons simulate loading the page.

<script type="text/ng-template" id="demo/page/notfound.html">
    <bb-error bb-error-type="notFound">
            <button type="button" class="btn-primary btn" ng-click="pageCtrl.returnHome()">Return to another page</button>    
<script type="text/ng-template" id="demo/page/buttons.html">
    <button type="button" class="btn bb-btn-secondary" ng-click="pageCtrl.simulateLoading()">Simulate loading</button>
    <button type="button" class="btn bb-btn-secondary" ng-click="pageCtrl.simulateNotAuthorized()">Simulate not authorized</button>
    <button type="button" class="btn bb-btn-secondary" ng-click="pageCtrl.simulateNotFound()">Simulate not found</button>


/*global angular */
(function () {
    'use strict';

    function PageTestController($scope, $timeout, bbPage, $location) {
        var self = this;

        function simulateLoading() {
            self.pageStatus = bbPage.pageStatuses.LOADING;

            $timeout(function () {
                self.pageStatus = bbPage.pageStatuses.LOADED;
            }, 1500);

        function simulateNotAuthorized() {
            self.pageStatus = bbPage.pageStatuses.NOT_AUTHORIZED;

        function simulateNotFound() {
            self.pageStatus = bbPage.pageStatuses.NOT_FOUND;

        function returnHome() {

        self.pageStatus = bbPage.pageStatuses.LOADED;
        self.simulateLoading = simulateLoading;
        self.simulateNotAuthorized = simulateNotAuthorized;
        self.simulateNotFound = simulateNotFound;
        self.returnHome = returnHome;

    PageTestController.$inject = ['$scope', '$timeout', 'bbPage', '$location'];

    function bbPageSetup(bbPageConfig, $stateProvider, $urlRouterProvider) {
        bbPageConfig.redirectUrl = '/components';
        bbPageConfig.notFoundUrl = '/notfound';

            .state('default', {
                url: '/',
                templateUrl: 'demo/page/buttons.html'
            .state('notFoundState', {
                url: '/notfound',
                templateUrl: 'demo/page/notfound.html'


    bbPageSetup.$inject = ['bbPageConfig', '$stateProvider', '$urlRouterProvider'];

        .controller('PageTestController', PageTestController)