Active Avatar

YDS

E

A customizable user avatar, complemented with a popover pane offering detail and collaboration options.

<yds-active-avatar user-id="[userSysId]" size="small"></yds-active-avatar>
<yds-active-avatar user-id="[userSysId]" size="medium"></yds-active-avatar>
<yds-active-avatar user-id="[userSysId]" size="large"></yds-active-avatar>

Alerts

YDS

W

A smart alerting engine utilizing the Flex Banner element. Alerts provide flexibility in how you notify your end users of announcements, outages, and more. Features include:

• Customized styling for color, icon, and sizing
• Fully internationalized for global audiences
• Flexible behavior for persistence, user dismissal, or timed dismissal of alerts
• Targeted alerts based on user, group, department, location or everyone
• Real-time delivery to ensure alerts are seen as soon as they are available

prev

next

Approvals

SP

W

A widget for displaying the logged-in user's requested approvals.

prev

next

Badge

BS

E

The standard Bootstrap badge, with styling tailored for Service Portal.

<a href="">New Incidents <span class="badge">8</span></a>
<a href="">Open Incidents <span class="badge">32</span></a>
<a href="">Closed Incidents <span class="badge">78</span></a>

Banner (Alert)

SP

E

The standard Service Portal alert, based on Bootstrap alert styling.

spUtil.addInfoMessage('Your request was successfully submitted.');
spUtil.addErrorMessage('Something went wrong. Please try again later.');

Banner (Flex)

YDS

E

A flexible banner at top or bottom of your Service Portal page - perfect for displaying news, alerts, outages, and more!

$scope.setBannerTop = function(){
  $scope.bannerValueTop = "An upgrade of the ServiceNow platform will occur this weekend. We will be installing the Yansa Design System in order to provide you with a superior Service Portal experience!";
};

$scope.setBannerBottom = function(){
  $scope.bannerValueBottom = "A meet & greet with the founders of Yansa Labs will be held in the staff lounge at 5 PM today.";
};

<yds-banner icon="fa fa-bell" value="bannerValueTop" background-color="success"></yds-banner>
<yds-banner icon="fa fa-glass" value="bannerValueBottom" position="bottom"></yds-banner>

<button class="btn btn-primary" ng-click="setBannerTop()">Click to Test Top Banner</button>
<button class="btn btn-primary" ng-click="setBannerBottom()">Click to Test Bottom Banner</button>

Button (Standard)

BS

E

The standard Bootstrap button, with styling tailored for Service Portal.

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-default btn-xs">X-Small</button>
<button class="btn btn-default btn-sm">Small</button>
<button class="btn btn-default btn-lg">Large</button>

Button (Promise)

YDS

E

A button that indicates progress and completion of a task upon click.

$scope.promFn = function(returnVal) {
  var myPromise = $timeout(function(){
    //Expects return value of 'success', 'error', or 'failure'
    return returnVal;
  }, 1000);

  //To react to results of promise externally, attach .then function
  myPromise.then(function(response){
    console.log('Promise completed with result of ' + response);
  });

  return myPromise;
};

<button class="btn btn-lg btn-default" return-to-initial=1000 yds-button-promise="promFn('SUCCESS')">Submit w/ Success</button>
<button class="btn btn-lg btn-default" return-to-initial=1000 yds-button-promise="promFn('ERROR')">Submit w/ Error</button>

Calendar

YDS

W

An interactive, mobile-friendly calendar widget for working with time-based data. Features include:

• Year, month, week, and day views
• Multiple time series from multiple tables available on the same calendar
• Colorized differentiation of time series
• Detailed views load in modal directly from calendar

prev

next

Callout

YDS

E

A colorized callout for highlighting a block of content or presenting a dismissable alert.

<yds-callout color="danger" border-color="#8d8d8d" dismissable=true>
  This is some important information I want you to know!
</yds-callout>
<p>This is normal paragraph text</p>
<yds-callout color="success">
  <h4>This is a callout headline</h4>
  This is normal callout text
</yds-callout>
<p>And here is some more normal paragraph text</p>

Catalog Item

YDS

W

An enhanced version of the Service Catalog Item view:

• Display items in the standard platform layout, maintaining all variable set and container configurations - an enhanced iFrame solution with native styling and no scrollbars
• Display additional fields for reference & list collector variables
• Allow ordering of large quantities of items

prev

next

Catalog Order Guide

YDS

W

An enhanced version of the Service Catalog Order Guide view:

• Display items in the standard platform layout, maintaining classic order guide appearance, variable sets, and container configurations - an enhanced iFrame solution with native styling and no scrollbars

prev

next

Charts

SHR

W

The Highcharts Widget by Darrin Achtman, for creating highly customizable advanced charts.

prev

next

Checkbox Group

YDS

E

A group of checkboxes for selecting multiple options.

$scope.checkChoices = ['Corfu', 'Hydra', 'Ios', 'Mykonos', 'Santorini'];

<yds-checkbox-group choices=checkChoices ng-model="checkVar"></yds-checkbox-group>

Count Panel

YDS

W

Add clickable record count panels to any page

prev

next

Date Picker

YDS

E

A date picker built for simple deployment and automatic adjustment for the logged-in user's preferred date format. Utilizes MomentJS for formatting.

<yds-datepicker ng-model="datePickerVar"></yds-datepicker>

Date & Time Picker

YDS

E

A date/time picker built for simple deployment and automatic adjustment for the logged-in user's preferred date/time format. Utilizes MomentJS for formatting.

<yds-datetimepicker ng-model="dateTimePickerVar"></yds-datetimepicker>

Dropdown

BS

E

The standard Bootstrap dropdown, with styling tailored for Service Portal.

<div class="btn-group">
  <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
    Options&nbsp;&nbsp;<span class="fa fa-caret-down"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="">Knowledge Base</a></li>
    <li><a href="">Service Catalog</a></li>
    <li><a href="">Speak w/ an Agent</a></li>
    <li class="divider"></li>
    <li><a href="">Logout</a></li>
  </ul>
</div>

Favorites

YDS

W

Allow users to 'favorite' any item for quick access via a homepage widget or the portal header

• Favorites can be record-based or URL-based
• Create global Favorites to appear for all users
• Configure Favorite Maps to format display with appropriate labels, descriptions, icons, and links
• Users can easily customize the order/appearance of their favorites directly in the widget
• Add a Favorites toggle to any page or widget using the included YDS Favorites Toggle widget and directive

prev

next

Feedback

YDS

W

Display a subtle, clickable tag on the right side of each portal page - a quick & easy way for users to provide portal feedback.

prev

next

Form

YDS

W

An enhanced version of the Form view:

• Display additional fields for reference & list variables in a pleasing layout with no stacking

prev

next

Form & Field Validation

YDS

E

Validation functionality for forms & field values. Works for fields of type: Input, Select, Date/Time Picker, Radio Button Group, Checkbox Group, and Switch Group.

$scope.monthChoices = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novemeber', 'December'];

<form name="myForm">
  <label for="monthField">Choose a month</label>
  <yds-select id="monthField" choices="monthChoices" name="myMonth" ng-model="myMonth" ng-required=true yds-validate></yds-select>
  <label for="yearField">Choose a year <span style="color:red" ng-if="!myForm.myYear.$valid && myForm.myYear.$dirty">(Must be 4 digits)</span></label>
  <input id="yearField" class="form-control" name="myYear" ng-model="myYear" ng-required=true ng-minlength=4 ng-maxlength=4 yds-validate>
  <button class="btn btn-primary pull-right" ng-disabled="!myForm.$valid">Submit</button>
</form>

Form Fields

YDS

W

A ServiceNow-form style multiple field display

prev

next

Hero Banner

SHR

W

The Cool Video/Carousel Widget by Sush Chandrashekar, for displaying a highly customizable hero banner.

prev

next

Icon

FA

E

Standard Font Awesome icon.

<i class="fa fa-thumbs-o-up"></i>
<i class="fa fa-thumbs-o-up fa-2x"></i>
<i class="fa fa-thumbs-o-up fa-3x"></i>
<i class="fa fa-thumbs-o-up fa-4x"></i>
<i class="fa fa-thumbs-o-up fa-5x"></i>
<i class="fa fa-thumbs-o-up fa-5x fa-rotate-90"></i>
<i class="fa fa-thumbs-o-up fa-5x fa-rotate-180"></i>
<i class="fa fa-thumbs-o-up fa-5x fa-rotate-270"></i>
<i class="fa fa-thumbs-o-up fa-5x fa-spin"></i>

Icon Link

SP

W

A widget for displaying a single icon that links to a destination.

prev

next

Input (Icon)

YDS

E

Commonly used for search inputs, a customizable input box with text clear capability.

<yds-icon-input ng-model="iconInputVar" size="lg"></yds-icon-input>

Input (Small)

BS

E

The standard Bootstrap input, with styling tailored for Service Portal.

<input type="text" class="form-control">

Input (Large)

BS

E

The standard Bootstrap textarea, with styling tailored for Service Portal.

<textarea class="form-control" rows=5></textarea>

Level Select

YDS

E

A slider input for selecting values across a range of options.

<yds-level-select ng-model="levelSelectVar" choices="['32GB','64GB','128GB']" value="64GB"></yds-level-select>

Managed Callout

YDS

W

A widgetized version of the Callout element, perfect for highlighting important information or alerts:

• Create and style content in a simple interface
• Make content viewable and editable by role. Delegated editors work directly from the portal via a widget overlay.
• Appeal to a global user base with full internationalization.

prev

next

Managed Carousel

YDS

W

A robust carousel widget to display images with clickable links:

• Create carousels with one to many images and varying behavior & styles.
• Quickly add images, labels, and links to slides via a form interface.
• Carousels are mobile responsive and support touch interaction.
• Make content viewable and editable by role. Delegated editors work directly from the portal via a widget overlay.

prev

next

Managed Content

YDS

W

This widget makes it easy to display & manage rich content in Service Portal:

• Create content in the rich text editor and have it display in your portal - what you see is what you get!
• Make content viewable and editable by role. Delegated editors work directly from the portal via a widget overlay.
• Appeal to a global user base with full internationalization.

prev

next

Managed Jumbotron

YDS

W

The Bootstrap jumbotron is an oversized banner for drawing attention to special content:

• Create and style content in a simple interface
• Make content viewable and editable by role. Delegated editors work directly from the portal via a widget overlay.
• Appeal to a global user base with full internationalization.

prev

next

Managed Panel

YDS

W

The Bootstrap panel is a bordered box with header, footer, and main content areas, great for highlighting organized information:

• Create and style content in a simple interface
• Make content viewable and editable by role. Delegated editors work directly from the portal via a widget overlay.
• Appeal to a global user base with full internationalization.

prev

next

Managed Video

YDS

W

This widget makes it easy to display responsive video content in Service Portal:

• Display responsive video content from YouTube or Vimeo directly in your Service Portal.
• Make content viewable and editable by role. Delegated editors work directly from the portal via a widget overlay.

prev

next

Managed Well

YDS

W

The Bootstrap well highlights information with a subtle sunken effect:

• Create and style content in a simple interface
• Make content viewable and editable by role. Delegated editors work directly from the portal via a widget overlay.
• Appeal to a global user base with full internationalization.

prev

next

Match Height

YDS

W

An invisible widget that forces matching height across UI elements (such as panels on a homepage) for a consistent, balanced appearance

prev

next

Modal

UIB

E

The UI Bootstrap modal window, with styling tailored for Service Portal.

//Set modal options
var modalOptions = {
  templateUrl:'myModal.html', //Template URL, as indicated in HTML <script> tag for modal content
  scope:$scope //For simplicity, share parent scope - Use separate scope/controller for complex cases
};

//Open modal window & instantiate modal object
$scope.openModal = function(){
  $scope.modalInstance = $uibModal.open(modalOptions);
};

//Close modal window
$scope.closeModal = function(){
  $scope.modalInstance.close();
};

<!-- Modal Content -->
<script type="text/ng-template" id="myModal.html">
  <div class="modal-header">
    <h3 class="modal-title">Modal Header</h3>
  </div>
  <div class="modal-body">
    Modal Body
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="closeModal()">OK</button>
  </div>
</script>

<!-- Non-Modal Content -->
<button type="button" class="btn btn-primary btn-lg" ng-click="openModal()">Open Modal</button>

Multistage

YDS

EW

An element and widget to display the current stage in a process. Can be used 1) with an array of stages and a current stage to manually render or 2) with record identifiers to automatically render for a specific record. The widget may be dropped directly onto the existing Form page with no inputs - it will attempt to render correctly for the current table.

$scope.multiStages = ['Ordered', 'Fulfillment', 'Shipping', 'Delivered'];
$scope.currentStage = 'Fulfillment';

<yds-multistage stages="multiStages" current-stage="currentStage"></yds-multistage>

Pagination

UIB

E

The UI Bootstrap paginator, with styling tailored for Service Portal.

$scope.totalItems = 450;
$scope.pageChanged = function(){
  //Fetch new page results and assign to array of results being displayed
};

<ul uib-pagination total-items="totalItems" items-per-page="20" max-size="5" ng-model="currentPage" ng-change="pageChanged()" force-ellipses="true" previous-text="&lsaquo;" next-text="&rsaquo;"></ul>

Performance Analytics

YDS

W

Display any Performance Analytics widget within Service Portal, with refresh capability.

prev

next

Popover

UIB

E

The UI Bootstrap popover, with styling tailored for Service Portal. Can be used on any element type.

<button uib-popover="I'm a fancy popover!" popover-placement="auto right" popover-trigger="outsideClick" type="button" class="btn btn-primary btn-lg">Click Me</button>

Profile Header

YDS

W

A simple and user-friendly profile widget

prev

next

Progress Bar

UIB

E

The UI Bootstrap progress bar, with styling tailored for Service Portal.

$scope.percent_complete = 0;
makeProgress();

function makeProgress(){
  if ($scope.percent_complete > 100)
    $scope.percent_complete = 0;
  $timeout(function(){
    $scope.percent_complete = $scope.percent_complete + Math.floor(Math.random()*10);
    makeProgress();
  }, 300);
}

<uib-progressbar value="percent_complete"></uib-progressbar>
<uib-progressbar type="success" class="progress-striped active" value="percent_complete">{{percent_complete}}% Complete</uib-progressbar>

Radio Button Group

YDS

E

A group of radio buttons for selecting a single option from many.

$scope.radChoices = ['Barra', 'Iona', 'Islay', 'Jura', 'Skye'];

<yds-radio-button-group choices=radChoices ng-model="radioVar" orientation="horizontal"></yds-radio-button-group>

Reports

YDS

W

Display any ServiceNow report within Service Portal, with refresh capability.

prev

next

Reservation Booking

YDS

W

A widget for the Reservation Booking System, available on Share.

prev

next

Select (Simple)

YDS

E

A select box for displaying a searchable list of choosable options. Capable of full customization according to the underlying Select2 library.

$scope.selectSimpleChoices = ['Appalachian', 'Himalayan', 'Andes', 'Rockies', 'Karakoram', 'Sierra Madre', 'Appenine', 'Hindu Kush', 'Ural', 'Tian Shan'];

<yds-select ng-model="selectSimpleVar" choices=selectSimpleChoices></yds-select>

Select (Multiple)

YDS

E

A select box for searching, displaying, and choosing multiple items. Capable of full customization according to the underlying Select2 library.

$scope.selectMultipleChoices = ['Appalachian', 'Himalayan', 'Andes', 'Rockies', 'Karakoram', 'Sierra Madre', 'Appenine', 'Hindu Kush', 'Ural', 'Tian Shan'];

<yds-select ng-model="selectMultipleVar" choices=selectMultipleChoices allow-multiple=true>
</yds-select>

Select (Reference)

YDS

E

A select box for searching, displaying, and choosing items from any ServiceNow table. Allows full customization of behavior and appearance of results.

<yds-select-reference ng-model="selectReferenceVar" table="cmn_location" search-fields="street,city,state,zip" display-field="street" display-fields="city,state,zip"></yds-select-reference>

Select (User)

YDS

E

A tailored select box for searching, displaying, and choosing one or many users. Customized select boxes like this can be created for any type of data!

<yds-select-reference-user ng-model="selectUserVar" search-fields="name"></yds-select-reference-user>

Select (Quantity)

YDS

E

A select box for selecting a numeric quantity.

$scope.selectQuantityChoices = [1, 2, 3, 4, 5, 6, 7];

<yds-select ng-model="qSelected" choices=selectQuantityChoices style="width:65px" value="1" options="{allowClear:false,minimumResultsForSearch:'Infinity'}"></yds-select>

Signature Pad

YDS

W

A signature pad widget, enabling simple e-signature & image attachment to records in ServiceNow.

prev

next

Simple Fields

YDS

W

A simply styled multiple field display

prev

next

Slider

YDS

E

A slider input for selecting integer values across a range.

<yds-slider ng-model="sliderVar" value="20" min="0" max="100"></yds-slider>

Smart Table

YDS

W

The table widget you have been waiting for!

• Point-and-click customization of table, query, view, count, order, and more
• Override existing column headers & templates to customize table appearance
• Add new table columns with custom data gathering scripts & html templates for completely customizable views

prev

next

Switch Group

YDS

E

A group of toggle switches for selecting multiple options.

$scope.switchChoices = ['Corfu', 'Hydra', 'Ios'];

<yds-switch-group choices=switchChoices ng-model="switchVar"></yds-switch-group>

Table Saw

YDS

W

A fresh take on the popular Table Saw application, built specially for Service Portal. Table Saw provides infinite customizability in intelligent, filterable data views.

• Quickly define filter emitters with desired filtering capabilities
• Fully customize the look/feel of the filter widget and the data displayed
• Add user-friendly filtering to the standard Data Table widget

prev

next

Tile Navigator

YDS

W

A table-driven, tile-based UI providing hierarchical link content for internal or external resources.

• Works great as an interactive hero banner or a custom UI element providing curated link content
• Provide an unlimited number of top-level tiles w/ custom images
• Provide unlimited levels of links & categories of links beneath each tile
• Role-based & script-based security limits visibility to tile & link content

prev

next

Tooltip

UIB

E

The UI Bootstrap tooltip, with styling tailored for Service Portal. Can be used on any element type.

<button uib-tooltip="I'm a Fancy Tooltip!" type="button" class="btn btn-primary btn-lg">Hover Me</button>

Translation

YDS

E

A translation service providing on-the-fly translation of any text to/from any language. Utilizes the ServiceNow Messages table and/or Google Translate to provide translations in real-time for capabilities ranging from portal localization to real-time chat translation. This includes an AngularJS directive and a service so that it is accessible within both HTML and client scripts.

$scope.textToTranslate = "Welcome to our design system!";

<p><b>English: </b>{{textToTranslate}}</p>
<p><b>Spanish: </b><yds-translate to-language="es">{{textToTranslate}}</yds-translate></p>
<p><b>Arabic: </b><yds-translate to-language="ar">{{textToTranslate}}</yds-translate></p>
<p><b>Chinese: </b><yds-translate to-language="zh-TW">{{textToTranslate}}</yds-translate></p>

Typeahead

UIB

E

The UI Bootstrap typeahead, with styling tailored for Service Portal. Can be used with static values or server-side values with the asynchronous $http service. For selecting records or values from a table, try the Select (Reference) element.

$scope.taChoices = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

<input type="text" ng-model="taSelected" uib-typeahead="choice for choice in taChoices | filter:$viewValue | limitTo:10" class="form-control">

Widget Accordion

YDS

W

Display any combination of widgets in a Bootstrap accordion

prev

next

Widget Tabs

YDS

W

Display any combination of widgets in Bootstrap tabs

prev

next

Wonder List

YDS

W

The only list widget you'll ever need.

• Point-and-click creation of customizable, paginated lists gathered from one or many tables
• Sort uniformly on a common field, keeping pertinent information up-top, regardless of data source
• Choose from several list styles, ranging from classic panels to tiles
• Examples of uses include
  • Interleave your users' tasks & requests into a single handy list
  • Consolidate popular Links, News, Knowledge, and more
  • Create data-driven navigation panes for your portal

prev

next

Word Cloud

YDS

W

A lightweight word cloud widget that contains weighted terms that may optionally link to content like KB Articles, Records, etc

prev

next