UI Bootstrap in Service Portal

servicenow service portal

UI Bootstrap in Service Portal

You may already be familiar with the $uibModal service in Service Portal, but did you know there is a whole library of useful directives and services available in UI Bootstrap? 

UI Bootstrap is a client-side library of Bootstrap components written in AngularJS and contains 20 directives that offer a consistent framework, responsive design, and cross-browser compatibility when developing in Service Portal. Although UI Bootstrap is considered feature-complete and is no longer being maintained, Service Portal currently includes UI Bootstrap version 1.1.2.

Here are the UI Bootstrap directives.

Accordion (ui.bootstrap.accordion)
The accordion directive builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item’s header.

Alert (ui.bootstrap.alert)
This directive can be used both to generate alerts from static and dynamic model data (using the ng-repeat directive).

Buttons (ui.bootstrap.buttons)
With the buttons directive, we can make a group of buttons behave like a set of checkboxes (uib-btn-checkbox) or behave like a set of radio buttons (uib-btn-radio).

Carousel (ui.bootstrap.carousel)
Carousel creates a carousel similar to bootstrap’s image carousel.

Collapse (ui.bootstrap.collapse)
Resize window to less than 768 pixels to display mobile menu toggle button.

Dateparser (ui.bootstrap.dateparser)
The uibDateParser is what the uib-datepicker uses internally to parse the dates. You can use it standalone by injecting the uibDateParser service where you need it.

Datepicker (ui.bootstrap.datepicker)
The datepicker is flexible and fully customizable. You can navigate through days, months and years.

Dropdown (ui.bootstrap.dropdown)
Dropdown is a simple directive that will toggle a dropdown menu on click or programmatically.

Modal (ui.bootstrap.modal)
$uibModal is a service to create modal windows. Creating modals is straightforward: create a template and controller, and reference them when using $uibModal.

Pager (ui.bootstrap.pager)
A lightweight pager directive that is focused on providing previous/next paging functionality.

Pagination (ui.bootstrap.pagination)
A lightweight pagination directive that is focused on providing pagination & will take care of visualizing a pagination bar and enable/disable buttons correctly!

Popover (ui.bootstrap.popover)
A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more.

Position (ui.bootstrap.position)
The $uibPosition service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc…).

Progressbar (ui.bootstrap.progressbar)
A progress bar directive that is focused on providing feedback on the progress of a workflow or action.

Rating (ui.bootstrap.rating)
Rating directive that will take care of visualizing a star rating bar.

Tabs (ui.bootstrap.tabs)
AngularJS version of the tabs directive.

Timepicker (ui.bootstrap.timepicker)
A lightweight & configurable timepicker directive.

Tooltip (ui.bootstrap.tooltip)
A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.

Typeahead (ui.bootstrap.typeahead)
Typeahead is an AngularJS version of Bootstrap v2’s typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input.

Check out the full UI Bootstrap documentation here: https://angular-ui.github.io/bootstrap/

How have you used the UI  Bootstrap directives in your Service Portal projects? Let me know in the comments below.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *