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.

Tile

The bb-tile directive creates a collapsible container and is the bulding block for pages and forms in a Sky UX application. The bb-tile-section directive is used to create padded sections inside a bb-tile element. Additionally, the bb-tile-header-content directive may be placed inside the bb-tile directive to add summary information to the tile. If you simply need to show a check mark indicating the tile has data, you can add a bb-tile-header-check element to the bb-tile-header-content element.

When used on forms, it automatically adjusts the background color on the form and shrinks the tile header.

Tile settings

  • bb-tile-header — The header text for the tile.
  • bb-tile-help-click — A function to call when the user clicks the help button (indicated by a question-circle icon) in the tile header. If not specified, the help button is not displayed.
  • bb-tile-settings-click — A function to call when the user clicks the settings button (indicated by a wrench icon) in the tile header. If not specified, the settings button is not displayed.
  • bb-tile-collapsed — (optional) binds to the collapsed state of the tile so that the tile can respond to user setting collapsed state.
  • bb-tile-show-help — (optional) Indicates whether to display a help button in the tile's header. To display the button, you must also supply a bb-tile-help-click function. (Default: true)
  • bb-tile-show-settings — (optional) Indicates whether to display a settings button in the tile's header. To display the button, you must also supply a bb-tile-settings-click function. (Default: true)

Tile dashboard directive

The bb-tile-dashboard directive allows you to have a set of tiles within a page which have controllable layouts and collapsed states. It depends on angular-ui router to define states that map to tile controllers and templates.

Tile dashboard settings

  • bb-tiles — An array of tile objects to be contained in the dashboard. Contains the following object:
    • id — Unique ID for the tile.
    • view_name — The name of the view for the tile defined in the ui-router $stateProvider.
    • collapsed — True if the tile should be collapsed, false otherwise.
    • collapsed_small — True if the tile should be collapsed in small screen state, false otherwise.
  • bb-layout — An object containing information about how the tiles should be organized within the tile dashboard. Contains the following:
    • one_column_layout — Array of tile ids that correspond with how the tiles should be ordered in a one column layout (small screen) ex: layout.one_column_layout = ['Tile1', 'Tile2'];.
    • two_column_layout — Array that corresponds with how tiles should be ordered in a two column layout. ex: layout.two_column_layout = [['Tile1'], ['Tile2']]; where Tile1 is in the left hand column and Tile2 is in the right hand column.
  • bb-tile-dashboard-all-collapsed — If set to true, then collapses all tiles in the dashboard, if set to false, expands all tiles in the dashboard.

Demo

Tiles on pages

Markup

<div ng-controller="TileTestController as tileCtrl">
    <h3>Tiles on pages</h3>
    <div class="row" style="margin-top: 15px;">
        <div class="col-md-6">
            <button class="btn bb-btn-secondary" ng-click="tileCtrl.open()" type="button">Open modal with tile</button>
            <button class="btn bb-btn-secondary" ng-click="tileCtrl.collapseAll()" type="button">Collapse</button>
            <button class="btn bb-btn-secondary" ng-click="tileCtrl.expandAll()" type="button">Expand</button>
        </div>
    </div>
    <div style="background-color: #f2f2f2; margin-top: 15px; padding: 15px">
        <bb-tile-dashboard bb-layout="tileCtrl.layout" bb-tiles="tileCtrl.tiles" bb-tile-dashboard-all-collapsed="tileCtrl.allCollapsed"></bb-tile-dashboard>
    </div>
</div>

<script type="text/ng-template" id="demo/tile/tile1.html">
    <bb-tile
        bb-tile-header="tile1Ctrl.resources.tile_header"
        bb-tile-collapsed="tile1Ctrl.is_collapsed"
        bb-tile-help-click="tile1Ctrl.openHelp()"
        bb-tile-settings-click="tile1Ctrl.openSettings()"
        bb-tile-show-settings="tile1Ctrl.showSettings"
        bb-tile-show-help="tile1Ctrl.showHelp"
    >
        <bb-tile-header-content>
            {{123456789 | bbAutonumeric:'money':true}}
        </bb-tile-header-content>
        <div bb-tile-section>
            Test.
            <button
              class="btn bb-btn-secondary"
              ng-click="tile1Ctrl.showSettings = !tile1Ctrl.showSettings"
            >
              Toggle settings button
            </button>
            <button
              class="btn bb-btn-secondary"
              ng-click="tile1Ctrl.showHelp = !tile1Ctrl.showHelp"
            >
              Toggle help button
            </button>
        </div>
    </bb-tile>
</script>

<script type="text/ng-template" id="demo/tile/tile2.html">
    <bb-tile bb-tile-header="'Tile with check'">
        <bb-tile-header-content>
            <bb-tile-header-check></bb-tile-header-check>
        </bb-tile-header-content>
        <div bb-tile-section>
            Test 2.
        </div>
        <div bb-tile-section>
          Test 3. 
        </div>
    </bb-tile>
</script>

JavaScript

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

    function TileDashboardConfig($stateProvider) {
        $stateProvider
        .state('tiledashboard', {
            url: '',
            views: {
                'tile1': {
                    controller: 'Tile1Controller as tile1Ctrl',
                    templateUrl: 'demo/tile/tile1.html'
                },
                'tile2': {
                    controller: 'Tile2Controller',
                    templateUrl: 'demo/tile/tile2.html'
                }
            }
        });
    }

    function Tile1Controller() {
        var self = this;

        self.resources = {
            tile_header: 'Tile header'
        };

        self.showHelp = false;
        self.showSettings = false;

        self.openSettings = function () {
            alert('Settings invoked!');
        };

        self.openHelp = function () {
            alert('Help invoked!');
        };
    }

    function TileTestController(bbModal) {
        var self = this;


        function collapseAll() {
            self.allCollapsed = true;
        }

        self.collapseAll = collapseAll;

        function expandAll() {
            self.allCollapsed = false;
        }

        self.expandAll = expandAll;

        self.open = function () {
            bbModal.open({
                template: '<bb-modal>' +
                      '    <div class="modal-form">' +
                      '        <bb-modal-header bb-modal-help-key="\'bb-security-users.html\'">Form Header</bb-modal-header>' +
                      '        <div class="bb-modal-body-tiled" bb-modal-body>' +
                      '            <bb-tile bb-tile-header="\'Tile header\'" bb-tile-collapsed="true">' +
                      '                <div bb-tile-section>' +
                      '                    Test.' +
                      '                </div>' +
                      '            </bb-tile>' +
                      '        </div>' +
                      '        <bb-modal-footer>' +
                      '            <bb-modal-footer-button-primary></bb-modal-footer-button-primary>' +
                      '            <bb-modal-footer-button-cancel></bb-modal-footer-button-cancel>' +
                      '        </bb-modal-footer>' +
                      '    </div>' +
                      '</bb-modal>'
            });
        };

        self.tiles = [
            {
                id: 'Tile1',
                view_name: 'tile1',
                collapsed: false,
                collapsed_small: true
            },
            {
                id: 'Tile2',
                view_name: 'tile2',
                collapsed: 'true',
                collapsed_small: true
            }
        ];

        self.layout = {
            one_column_layout: [
                'Tile1',
                'Tile2'
            ],
            two_column_layout: [
                [
                    'Tile1'
                ],
                [
                    'Tile2'
                ]

            ]
        };

    }

    TileDashboardConfig.$inject = ['$stateProvider'];
    TileTestController.$inject = ['bbModal'];


    angular.module('stache')
    .config(TileDashboardConfig)
    .controller('TileTestController', TileTestController)
    .controller('Tile1Controller', Tile1Controller)
    .controller('Tile2Controller', angular.noop);
}());