Knowledge is right around the corner and we only have a few meeting spots left. Contact us today to secure a time to meet and learn more about NewRocket and how we can take your Service Portal experience to the next level. [contact-form-7 id="3227" title="Let's Meet 2017"]
CSS Utility Classes in Service Portal
Included with Service Portal are a variety of different CSS utility classes loosely based on some of Bootstraps utility classes. For many of the classes below, you will see a format similar to: "m-t-lg", this stands for "margin top large". As I'm sure you can guess, there is also a classes for bottom, left, right, small (sm), medium (md), etc. and all the various combinations thereof. This allows you to easily add consistent margins, padding, colors, etc. without creating custom styles within the widget. Here is a list we've compiled of some of the most common utility classes: Padding: wrapper, wrapper-xs, wrapper-sm, wrapper-md, wrapper-lg, wrapper-xl Horizontal Padding: padder, padder-xs, padder-md, padder-lg, padder-xl Vertical Padding: padder-v, padder-v-md, padder-v-lg, padder-v-xl Top Padding: padder-t, padding-top-s, padding-top-m, padding-top-lg, padder-t-lg, padder-t-xl Right Padding: pad-right Bottom Padding: padder-b-none, padder-b, padder-b-md, padder-b-lg, padder-b-xl Left Padding: N/A Top Margin: m-t, m-t-none, m-t-xxs, m-t-xs, m-t-sm, m-t-lg, m-t-xl, m-t-n-xs, m-t-n-lg Right Margin: m-r, m-r-none, m-r-xs, m-r-sm, m-r-lg, m-r-n Bottom Margin: m-b, m-b-none, m-b-xs, m-b-sm, m-b-lg, m-b-xl, m-b-n Left Margin: m-l, m-l-none, m-l-xs, m-l-sm, m-l-lg, m-l-n Text Color: text-muted, text-primary, text-success, text-info, text-warning, text-danger Background Color: bg-primary, bg-success, bg-info, bg-warning, bg-danger Float Elements pull-left - Floats an element to the left pull-right - Floats an element to the right Clearing Floats clearfix - Clears floats Display & Margin center-block - Sets an element to display:block with margin-right:auto and margin-left:auto Visibility show - Forces an element to be shown (display:block) hidden - Forces an element to be hidden (display:none) invisible - Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible sr-only - Hides an element to all devices except screen readers sr-only-focusable - Combine with "sr-only" to show the element again when it is focused (e.g. by a keyboard-only user) text-hide - Helps replace an element's text content with a background image close - Indicates a close icon caret - Indicates dropdown functionality (will reverse automatically in dropup menus) Hide visible-xs, visible-sm, visible-md, visible-lg Show hidden-xs, hidden-sm, hidden-md, hidden-lg For more details on CSS in Service Portal, you can check out the unofficial documentation on Github: https://github.com/service-portal/documentation/blob/master/documentation/css.md#page
Announcing the Contextual Search Results Widget
UPDATE: Now with updated pricing! Available now in the ServiceNow app store! With the NewRocket Contextual Search Results Widget your company can achieve incident deflection in the Service Portal. As self-service users enter details about their issue, search results appear within the form, allowing the user to view relevant knowledge articles, catalog items, or social Q&A thread instead of submitting an incident. The result: less incidents submitted and more satisfied users. Key Features - Integrates with existing record producers - View search results while typing - View individual result items without navigating to a new page - Simple to configure to show relevant knowledge articles, pinned articles, social Q&A and/or catalog items https://www.youtube.com/watch?v=HodilTSd6rg Click here for more details and pricing information!
Communicating between the Client Script and the Server Script of a widget
We've had a lot of questions about how the client side and server side of a widget can communicate, so this week I thought it would be a good idea to offer a quick demonstration. In this tutorial we will create a widget that allows the user to add or remove items from a list. In this case it's just a simple Array, but it could just as easily be using GlideRecord against a table. Here is the sample code used in the video: HTML: [crayon-6629b260721e1238795255/] Server Script: [crayon-6629b260721f1233127615/] Client Script: [crayon-6629b260721f6591030260/]
Free Widget of the Month
To help contribute back to the community, we’re going to try to develop and give away one new widget per month. For January we have developed the “Related List” widget, which allows you to display related lists on the form page in Service Portal. Example below from a service catalog request: Please let us know what you think in the comments below or by tweeting at us at: @newrocketinc
New Features of Istanbul
Istanbul is the next release of ServiceNow and with it many new fixes and additions are being included for ServicePortal, including more than 200 bug fixes, localization improvements, and widget editor improvements. But the most exciting thing in Istanbul are some of the new Service Portal features: Search Sources The search has been greatly improved with the new "search sources" feature which adds greater flexibility and extensibility to the search widgets. A search source will describe the behavior and source data Ability to configure the behavior of search in portals without having to write, edit or clone any widgets SC Shopping Cart The shopping cart has been one of the most highly anticipated new features, and greatly enhances the shopping capabilities of the Service Catalog in Service Portal. Support for ordering quantities of items (where permitted) Adding ordered items to a cart (stored in the sc_cart table) Setting "Requested For" field and order details Ability to edit the variables of a cart item after it has been added to the cart Support for saved carts with the ability for later use Respects most Service Catalog properties Omit cart Omit quantity Catalog variable 2-column layouts This is another huge improvement over Helsinki, adding support for 2-column layouts for variables in Service Catalog. Improvements to the Widget Editor New hotkey bindings Dependencies are able to be viewed and edited alongside a widget Localization Improvements All strings have been translated Extended translation to the widget client script Use of ${My key} Widget Options Schema Improvements Declare parameters for widget Users can now have hints Default values are able to be provided Bug Fixes Istanbul also includes some notable bug fixes, including: The variables max_length being inconsistent with normal Catalog UI Certain $sp api's don't work in scoped applications Order guide variables don't cascade Cannot redirect to the correct location after login Help and Tooltips don't appear on forms Branding editor unable to load without a default portal specified Unable to hide "Label" variables in Service Catalog using UI Policy Actions Service catalog doesn't nest categories - page takes long time to show when there are a lot of categories Forms not displaying -- NONE -- in dependent choice list field Simple support for catalog item variable 2-column layouts
Create custom action buttons in Service Portal
A common feature request for Service Portal is to be able to add custom buttons to the sc_request or ticket page similar to the way you could add UI actions to a form. This functionality is not available out-of-box, but here is a quick example on how you could create a custom widget to display some buttons to mimic the UI Actions on a form. In this example, we will create a "Resolve Incident" button to place on the incident "ticket" page. HTML: [crayon-6629b26077b1b460190270/] Client Script: [crayon-6629b26077b28768122527/] Server Script: [crayon-6629b26077b2c810484566/] The resulting widget should look something like this: This is far from the complete solution, but will hopefully provide a good example to work off of.
Using Events to Communicate Between Widgets
Following the principle of “separation of concerns”, it is good practice for your portal or application to be made up of self contained functional components, also known as widgets in Service Portal. However sometimes these widgets need to communicate with one another. Thanks to Angular.js this can be accomplished through the use of $broadcast, $emit, and $on methods. $broadcast and $emit allow you to raise an event in your widget. The difference between $broadcast and $emit is that the former sends the event downwards from parent to child controllers, while $emit sends an event upwards from the current controller to all of its parent controllers. Both methods are available on $scope and $rootScope. You can subscribe to an event using the “$on” event handler. In this example we will create two widgets that interact using $broadcast and $on. Widget #1: Create two buttons that upon click, will $broadcast an event called "customEvent" and pass an object. HTML: [crayon-6629b26096af1344620790/] Client Script: [crayon-6629b26096afe426958674/] Widget #2: Listen for the "customEvent" event, and when triggered, the callback function will update the text. HTML: [crayon-6629b26096b02000174643/] Client Script: [crayon-6629b26096b06579796390/] The final results should look like this:
Topics at Knowledge17
We’re working on some ideas for Service Portal related talks at Knowledge17. We have some good ideas for topics, but would love to hear from you: What are some topics or questions that you would love to see presented at K17? Here are some of the ideas we came up with: Developing custom apps in Service Portal Creating a custom theme Facilitate a great portal user experience Integrating your portal with an external service Creating a single portal serving multiple business units Advanced widget creation with Angular.js What are we missing? Please send us some of your ideas. We would love to hear from you. To submit your ideas, leave a comment below or email us at: info@newrocket.com
Founder of 