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.
Overview spUtil enables you to perform common functions in a Service Portal widget client script. You can access the methods by passing in spUtil as a parameter in your client-script function. Many of these methods have not been documented by ServiceNow, so we have combed through the source code once again to bring you another Service Portal cheatsheet! Save time and maximize your productivity with this quick reference document for you to use day-to-day. Enjoy!
This year's Orlando release is full of great new functionality and updates to the ServiceNow platform. Needless to say, there were a ton of features to cover, so instead of compiling an enormous list, I've put together this video of my personal top 5 features. I bet at least a couple of these will surprise you! Check out the video. Let me know in the comments below if you agree or if you feel there is a big feature that should have made the list. The official release notes can be found here: https://docs.servicenow.com/bundle/orlando-release-notes/page/release-notes/family-release-notes.html
Overview Did you know there are over 60 server-side methods available in GlideSPScriptable ($sp)? Many of these methods are hidden or not documented, so we've combed through all the widgets and source code to provide you with this cheat sheet that includes all of the $sp methods available in Service Portal. Now updated for the New York release. Save time and maximize your productivity with this quick reference document for you to use day-to-day. Enjoy!
We've had a number of clients ask about structuring catalog item forms as more of a "wizard" that only renders one section at a time. After thinking about it for a while, I realized that I could use the GlideForm API to programmatically hide and show the different sections (containers). So over the past couple of weeks, I've been working on a new widget that simply interacts with the out-of-box catalog item widget, and uses the API's to add all of the wizard-like capabilities. I think it turned out pretty cool, it's fully themeable, and best of all, it does not require cloning of any widgets. I still have a few more features to add, and I'm also considering adding an accompanying library of Variable Sets that provide a more graphical UI than the out-of-box catalog variables. If all goes well, I may end up including the widget in our RocketFuel library of widgets, so if you're interested in adding some wizard-like capabilities to your portal, feel free to contact me and we can schedule a demo. I'd love to hear what you guys think in the comments below. Is this a useful widget? Does this improve the user experience of the service catalog item form?
Today I am going to show you how to change the styling of the built-in notifications in Service Portal. The default notifications in Service Portal are based on the Bootstrap Alerts components, but I prefer the smaller "Toast" notifications of Bootstrap 4. Default New Style The following CSS sets a new width and aligns the notifications in the upper right corner of the screen rather than spanning the whole page. You will need to add the following styles into a CSS Include in your theme. CSS [crayon-5ecbc96d19f76398901775/] If you are already on the Madrid release, I recommend replacing the above HEX colors with the $brand-success and $brand-danger variables so that they can be driven by the variables defined on your theme. If you wish to trigger notifications from your own widget, you can trigger notifications using either of the following. Server Side: gs.addInfoMessage("Success goes here"); gs.addErrorMessage("Error goes here"); Controller: spUtil.addInfoMessage("Success goes here"); spUtil.addErrorMessage("Error goes here"); BEFORE AFTER This is just a small example of how you can restyle the default notifications, but there is still plenty of ways this could be improved. If you have some ideas or other styles that you would like to share, feel free to post them in the comments below.
WHAT IS "OUT OF BOX" One of the most common requests we hear when developing a portal is, "stay close to out-of-box". People usually think this means staying close to the look and feel of the Stock theme, in hopes that it will minimize complications with future upgrades. This common misconception has very little to do with the portal theme, and everything to do with how many and which widgets were cloned. Staying out-of-box has nothing to do with the theming, look or feel of the portal, but how many of the widgets were cloned. The real danger of “stay close to out-of-box” is that it leaves little-to-no room for: Adhering to company required branding guidelines Delivering a delightful user experience Meeting business requirements So how do you stay close to out-of-box and ensure a smooth upgrade process without sacrificing the look, feel and functionality of the portal? In this article, we'll outline various approaches to help you deliver a portal without sacrificing the user experience. WHAT NOT TO CLONE Before we talk about what you can safely change, let’s talk about what you shouldn’t change. Changing a ServiceNow widget involves cloning it. When you clone a widget, you become responsible for ensuring your widget continues to function as expected after a ServiceNow upgrade. If a widget with complex logic is cloned and you want to align it with the recent upgrade, you may need to analyze both original and cloned widgets line-by-line to determine what changed and to ensure nothing has stopped working. We know from experience that some widgets tend to change quite often, even within patches and hot fixes! For that reason, we recommend that you avoid cloning any widget with complex logic. Some examples include: Shopping cart Catalog item Approvals Order guide Data table Form Before you clone a widget, consider the additional effort it will require to maintain the widget with each upgrade. In many cases, with a little creativity, it is possible to meet business or branding requirements without cloning. WAYS TO AVOID CLONING A WIDGET We’ve found quite a few ways to avoid cloning while still meeting requirements. Here are some suggestions in a rough order of difficulty. INSTANCE OPTIONS Many widgets already have instance options for configuring the behavior and look of the widget. You can access the options by pressing CTRL + Click on the widget and selecting "Instance Options.” CSS Making changes to CSS outside of a widget will have minimal impact on your ability to upgrade. Same thing applies to your layout. With this in mind, don't be afraid to style and theme your portal to make it more attractive and "on brand." WRAPPING/EMBEDDING WIDGETS In some cases, you just need to augment or slightly modify the behavior of a widget. By embedding a standard widget in a custom one, you take advantage of the standard functionality while gaining the control you need. This is useful, for example, when you need finer control over the instance options that are passed to the standard widget or when you need to adapt URL parameters or events. DIRECTIVES From Angular.js documentation: “At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.” In simpler terms, a directive could allow you to attach behavior to DOM elements inside a widget you don’t “own.” This is an extremely powerful way to adapt widgets without cloning them. While diving into directive development is beyond the scope of this article, keep it in mind as you evaluate your options. IF YOU NEED TO CLONE In some situations, you can't always avoid cloning to achieve the result you want. If that is the case, be sure you: Document the cloned widgets Consider analysis time as part of your upgrade validation process After an upgrade, evaluate the source widgets to determine if you should Keep the clone "as-is" Upgrade it Revert back to the original Remember, Service Portal is a UI framework built to help you create great experiences. Don’t be afraid to deviate from the Stock theme and take full advantage of all its capabilities! ADDITIONAL READING For related information on the topic, check out these articles. Out-of-Box — Widget Library, ServicePortal Widget Cloning — Clone a Widget Modifying — Widget CSS, Embedding Widgets, Configure Widget Instance Options