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.

Summary action bar

The summary action bar contains actions and a responsive summary section.

Summary action bar settings

  • bb-summary-actionbar — Specifies the container for the actions and summary.
    • bb-summary-actionbar-actions — Specifies the container for the actions.
      • bb-summary-actionbar-primary — Specifies a primary action button.
        • bb-summary-action-disabled(Optional.) Specifies whether the action should be disabled.
        • bb-summary-action-click(Optional.) Specifies a callback that will be executed when the action is clicked.
      • bb-summary-actionbar-secondary-actions — Specifies the container for secondary actions. When more than 2 secondary actions exist, or on small screens, the secondary actions become a dropdown.
        • bb-summary-actionbar-secondary — Specifies a secondary action button.
          • bb-summary-action-disabled(Optional.) Specifies whether the action should be disabled.
          • bb-summary-action-click(Optional.) Specifies a callback that will be executed when the action is clicked.
      • bb-summary-actionbar-cancel — Specifies a button with the styling of a cancel button. You need to provide your own click handler for the cancel action.
        • bb-summary-action-disabled(Optional.) Specifies whether the action should be disabled.
        • bb-summary-action-click(Optional.) Specifies a callback that will be executed when the action is clicked.
    • bb-summary-actionbar-summary — Specifies the container for the summary section.

Demo

Primary action Secondary action Secondary action 2 Cancel
$123.00 Field 1 $456.00 Field 2 18 Field 3 $123.00 Field 1 $456.00 Field 2 18 Field 3 $123.00 Field 1 $456.00 Field 2 18 Field 3

Markup

<div ng-controller="SummaryModalButtonController as summaryModalBtnCtrl">
  <button type="button" class="btn btn-primary" ng-click="summaryModalBtnCtrl.open()">Open standard modal</button>
  <button type="button" class="btn btn-primary" ng-click="summaryModalBtnCtrl.open(true)">Open full page modal</button>
  
      <bb-summary-actionbar>
        <bb-summary-actionbar-actions>
            <bb-summary-actionbar-primary>Primary action</bb-summary-actionbar-primary>
            <bb-summary-actionbar-secondary-actions>
                <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action</bb-summary-actionbar-secondary>
                <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action 2</bb-summary-actionbar-secondary>
            </bb-summary-actionbar-secondary-actions>
            <bb-summary-actionbar-cancel ng-click="summaryCtrl.close()">Cancel</bb-summary-actionbar-cancel>
        </bb-summary-actionbar-actions>
        <bb-summary-actionbar-summary>
            <div>
            <bb-key-info>
            <bb-key-info-value>$123.00</bb-key-info-value>
            <bb-key-info-label>Field 1</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$456.00</bb-key-info-value>
            <bb-key-info-label>Field 2</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>18</bb-key-info-value>
            <bb-key-info-label>Field 3</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$123.00</bb-key-info-value>
            <bb-key-info-label>Field 1</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$456.00</bb-key-info-value>
            <bb-key-info-label>Field 2</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>18</bb-key-info-value>
            <bb-key-info-label>Field 3</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$123.00</bb-key-info-value>
            <bb-key-info-label>Field 1</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$456.00</bb-key-info-value>
            <bb-key-info-label>Field 2</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>18</bb-key-info-value>
            <bb-key-info-label>Field 3</bb-key-info-label>
            </bb-key-info>
        </div>
        </bb-summary-actionbar-summary>
    </bb-summary-actionbar>
      
</div>

<script type="text/ng-template" id="demo/summaryactionbar/modalform.html">
    <bb-modal>
        <div class="modal-form">
            <bb-modal-header bb-modal-help-key="'bb-security-users.html'">Modal header</bb-modal-header>
            <div bb-modal-body>
                <form>
                    <div class="form-group">
                        <label for="modal-test-input" class="control-label">Something</label>
                        <input id="modal-test-input" type="text" class="form-control" autofocus />
                    </div>
                </form>
            </div>
            <bb-modal-footer>
                <bb-summary-actionbar>
                    <bb-summary-actionbar-actions>
                        <bb-summary-actionbar-primary>Primary action</bb-summary-actionbar-primary>
                        <bb-summary-actionbar-secondary-actions>
                            <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action</bb-summary-actionbar-secondary>
                            <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action 2</bb-summary-actionbar-secondary>
                            <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action 3</bb-summary-actionbar-secondary>
                        </bb-summary-actionbar-secondary-actions>
                        <bb-summary-actionbar-cancel ng-click="summaryCtrl.close()">Cancel</bb-summary-actionbar-cancel>
                    </bb-summary-actionbar-actions>
                    <bb-summary-actionbar-summary>
                        <div>
                        <bb-key-info>
                        <bb-key-info-value>$123.00</bb-key-info-value>
                        <bb-key-info-label>Field 1</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$456.00</bb-key-info-value>
                        <bb-key-info-label>Field 2</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>18</bb-key-info-value>
                        <bb-key-info-label>Field 3</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$123.00</bb-key-info-value>
                        <bb-key-info-label>Field 1</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$456.00</bb-key-info-value>
                        <bb-key-info-label>Field 2</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>18</bb-key-info-value>
                        <bb-key-info-label>Field 3</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$123.00</bb-key-info-value>
                        <bb-key-info-label>Field 1</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$456.00</bb-key-info-value>
                        <bb-key-info-label>Field 2</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>18</bb-key-info-value>
                        <bb-key-info-label>Field 3</bb-key-info-label>
                        </bb-key-info>
                    </div>
                    </bb-summary-actionbar-summary>
                </bb-summary-actionbar>
            </bb-modal-footer>
        </div>
    </bb-modal>
</script>

JavaScript

/* global angular */

(function () {
    'use strict';

    function SummaryActionbarTestController($uibModalInstance) {
        var ctrl = this;

        function close() {
            $uibModalInstance.close();
        }

        ctrl.close = close;

        function alertEmit(message) {
            alert(message);
        }

        ctrl.alertEmit = alertEmit;
    }

    function SummaryModalButtonController(bbModal) {
        var ctrl = this;
        
        ctrl.open = function (fullPage) {
            bbModal.open(
                {
                    controller: 'SummaryActionbarTestController as summaryCtrl',
                    templateUrl: 'demo/summaryactionbar/modalform.html'
                },
                {
                    fullPage: fullPage
                }
            );
        };
    }

    SummaryModalButtonController.$inject = ['bbModal'];
    SummaryActionbarTestController.$inject = ['$uibModalInstance'];

    angular.module('stache')
        .controller('SummaryModalButtonController', SummaryModalButtonController)
        .controller('SummaryActionbarTestController', SummaryActionbarTestController);

})();