One of the very powerful features of the Service Portal is the "Widget Options Schema" which enables developers to create a set of dynamic options on the widget. This allows for the widget to pull dynamic data from the instance without needing to modify the actual form of the instance. You can define the options schema by either: In the portal, hold [CTRL] + right click on the widget, and select "Widget Options Schema" In the Widget Editor, click the hamburger menu and select "Edit options schema" In the options schema modal, you can create the options by clicking the "+" button and setting the field name, label, and field type. The following types are currently supported: String Boolean Integer Reference Choice Field_name Field_list Once the schema has been defined, you can set the values to be used on the instance by holding down [CTRL] and right clicking the widget in the portal and selecting "Instance Options". Once the Instance Options have been set, you can now access the option values using the "options" object in the widget, which is automatically made available in the Server Script, Client Controller, and HTML. See the following examples: Client Controller: [crayon-69ce8fee885da362125164/] Server Script: [crayon-69ce8fee885df966784924/] HTML: [crayon-69ce8fee885e1248879374/] A good example of this could be as simple as a Title Widget where now the widget can be used all throughout your portal, but the title is different each time it is used since the title is being pulled from the instance. This allows your widgets to be very configurable and reusable. I highly suggest you start using it with your portals and custom widgets today.
Using Custom Fonts In Service Portal
A question that I get asked a lot is how to use custom fonts in Service Portal. Here are the three primary ways: Option 1: The easiest option is through Google Fonts. Select the Google font you want to use. Copy the font's style sheet URL. Go to your theme and add a new CSS Include. Make sure the "Source" is selected to URL and then paste the CSS URL. Click save. Now you can reference the font in your CSS. [crayon-69ce8fee88ef1797715504/] Option 2: You'll need to encode your fonts using base64 and then include them in the CSS Includes of your theme. You can use this free tool by Transfonter: transfonter.org. Use the "expert" option, then you will see an option for base64 encoding in the CSS section. Select "Base64 Encode." Once exported, add the generated code as a CSS include on your theme. For more information see: Learn how to create custom CSS in your theme here. Option 3: Another approach is to upload your font files as attachments to the CSS Includes record and then reference them with "sys_attachment.do?" and passing in the sys_id as a parameter. See the following example: For additional information on CSS fonts, here's an article that I have found to be very helpful. If you find this useful, let me know in the comments below.
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.
Modal Windows in Service Portal
Modal windows in Service Portal are based on the BootstrapUI directives. For further documentation see: https://angular-ui.github.io/bootstrap/#/modal Below is a simple example of how to open up a modal window: Controller: [crayon-69ce8fee89497166762178/] HTML: [crayon-69ce8fee8949b391809015/] Notes: Make sure the $uibModal service and $scope is included in the controller. In this example the modal template is just included in the HTML, but you could also set the "templateURL" property to an ng-template associated with this widget. You can manually pass in the scope to the template using the "scope" property.
Navigating Multiple Service Portals
A common question I get asked is how to link between two portals. Simply linking to the URL will not work due to Angular.js handling the routing. The easiest solution for this is to use target="_self" attribute on all hyperlinks: [crayon-69ce8fee8a0c2295219064/] If you would like to redirect from within a widget client controller, you can use: $window.location.href: HTML: [crayon-69ce8fee8a0c6346710631/] Controller: [crayon-69ce8fee8a0c7963026684/]
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-69ce8fee8a742540314907/] 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-69ce8fee8a746229566744/] 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/
Real Time To Do App using Service Portal & Record Watchers
One of the powerful features of the new Helsinki Service Portal is the integrated "record watcher" capability. This allows widgets to update in near realtime as the data changes in the database. In this tutorial we will build a sample To Do (task ) app that uses two widgets, one for creating records, and the second for showing the list of tasks.
Unofficial Service Portal Documentation Available
This week the Service Portal team has released it's own 'unofficial' documentation which covers a lot of the major topics that were not included in the official documentation. This github repo is being updated regularly so stay tuned for docs regarding the various API's and architecture around portals, themes, pages, and widgets. So if you haven't yet checked it out, head over to the Github account and check out the docs: https://github.com/service-portal/documentation
Founder & CEO of 