AllAnnouncementsApps & WidgetsCMSDesign & ThemesDocumentationEmployee CenterNow ExperienceTips & TricksTutorialsUncategorizedVideos

Creating a Custom Theme in Service Portal – CreatorCon Breakout

Wondering how to get your service portal to align with your branding guidelines? With the right approach, you can quickly and consistently customize your portal to match the rest of your branding. In this session, you'll learn how to build a custom theme by correctly applying styles at the widget, page, and theme level and utilize all of the potential of this powerful platform. Register for the CreatorCon Breakout: https://knowledge.servicenowevents.com/connect/sessionDetail.ww?SESSION_ID=4221

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  

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-6a08eb816586e578363201/] Client Script: [crayon-6a08eb8165876576484614/] Widget #2: Listen for the "customEvent" event, and when triggered, the callback function will update the text. HTML: [crayon-6a08eb8165878779170529/] Client Script: [crayon-6a08eb816587a882438628/] 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

Shopping Cart Available for Service Portal

We have been hard at work developing tons of new Widget functionality, and as some of you noticed in the recent "Gothenburg Theme" video, that we have developed the shopping cart functionality that has been missing from Service Portal. The good news is that we have now released this as an update set that can be applied to any portal. The cart includes the following functionality: Multiple quantity support for both "Buy Now" and "Add to Cart" Cart preview dropdown in the theme header Customizable URL's for "continue shopping" and "successful order" Ability to save and load a previously saved cart Order on behalf of another user Generate "Deliver to" from requested for users location Many "Instance Options" to customize the widgets Mobile cart icon when viewed on mobile devices Check out some of the screen captures below. If anyone is interested, please email us at info@newrocket.com for more information and pricing.  

Service Portal “Gothenburg” Theme

A quick demo of one of our themes for Service Portal. Features include: Shopping cart Multi-level categories (for both service catalog & knowledge base) Connect chat integration Create incident Contextual search Almost every page and widget has been redesigned to help improve the user experience. Let me know what you guys think.

Reference Fields with the snRecordPicker Directive

One of the very powerful directives available in Service Portal that we will be covering today is the snRecordPicker. This directive generates a field very similar to a reference field in the platform. This is very useful when creating custom widgets that will be interacting with tables and records in ServiceNow. The Directive: [crayon-6a08eb81664e8124739905/] It supports the following properties: Property Description field a JavaScript object consisting of "displayValue", "value" and "name" table the table to pull records from default-query the query to apply to the table display-field (or display-fields) the display field value-field the value field (usually sys_id) search-fields the fields to search page-size number of records to display in dropdown   To use the snRecordPicker you will also need to create the "field" object in your controller as well as listen for the "field.change" event. The Controller: [crayon-6a08eb81664ee576697228/] The Widget: I've created a sample address picker widget that allows the user to select a location, and then retrieves the record from the server and populates several other fields with the information. The widget is available for download here: https://serviceportal.io/downloads/snrecordpicker-example/