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


An Angular service with the following functions:

  • setWindowTitle(title) — Changes the browser window's title. If a product name is specified in bbWindowConfig, then the product name will be appended to the passed title.
  • getScrollbarWidth — Calculates and returns the width of the scrollbar for the current browser.
  • isIosUserAgent — Uses window navigator user agent to determine if current user agent is an iPod, iPad, or iPhone.


Current browser scrollbar width is: {{windowCtrl.scrollbarWidth}}px
This is not an iOS device


<div ng-controller="WindowServiceController as windowCtrl">
    <div class="row">
        <div class="col-md-6">
            <label>Change window title</label>
            <input ng-model="windowCtrl.windowTitle" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"/>
    <div class="row">
        <div class="col-md-6">
            <div>Current browser scrollbar width is: {{windowCtrl.scrollbarWidth}}px</div>
    <div class="row">
        <div class="col-md-6">
            <div>This is <span ng-show="!windowCtrl.isIosUserAgent">not </span>an iOS device</div>


/*global angular */

(function () {
    'use strict';

    function WindowServiceController($scope, bbWindow) {
        var self = this;

        self.windowTitle = '';
        self.scrollbarWidth = null;

        self.scrollbarWidth = bbWindow.getScrollbarWidth();

        self.isIosUserAgent = bbWindow.isIosUserAgent();

        $scope.$watch(function () {
            return self.windowTitle;
        }, function () {
            if (self.windowTitle) {

    WindowServiceController.$inject = ['$scope', 'bbWindow'];

        .controller('WindowServiceController', WindowServiceController);