NewRocket.com

The GlideForm (g_form) API in Embedded Widgets

Ever wonder how to embed a Service Portal widget into a form and have it access fields in the parent form? GlideForm to the rescue! GlideForm is a client-side JavaScript API that provides methods to customize forms. Use the g_form object to access all of the GlideForm API methods. When using the Service Catalog variable types Macro or "Macro with Label", you can embed a Service Portal widget into the form. Within the client controller of the embedded widget you have access to both g_form and the field object by accessing them from the page object on $scope: $scope.page.field $scope.page.g_form FEATURES GlideForm supports over 50 different methods of accessing and manipulating form fields, in this quick tutorial, we will cover just a few of the most frequently used functions: getValue() setValue() getFieldNames() setVisible() setReadOnly() setMandatory() You can view the full list of supported g_form methods here. WALKTHROUGH To get started: Add a new variable with type “Macro” to a catalog item with a few existing variables From the “Type Specifications” tab, click on the Widget reference field picker and select “New” Name your widget and submit Navigate to “/sp_config/?id=widget_editor” and select your newly created widget Paste in the following code. HTML: [crayon-5bf525dfe002f588764568/] Client Script: [crayon-5bf525dfe003a346701452/] Update the field names (FIELDNAME) in the HTML to match some fields from your form Now if you view the catalog item in the portal, you should see your widget embedded in the form displaying 5 buttons. DEMO   FURTHER READING https://docs.servicenow.com/bundle/london-application-development/page/app-store/dev_portal/API_reference/GlideForm/concept/c_GlideFormAPI.html

Let’s Meet at Now Summit Santa Clara!

I'll be attending Now Summit in Santa Clara next week. If anyone is available and would like to talk Service Portal, I'm leaving some time slots open on my calendar. I'll be available in between and after sessions from Wednesday evening to Thursday at 5pm. Please click the button below to access my calendar. Looking forward to meeting you! Nathan Firth – Meet at Now Summit Santa Clara

Secrets of the Simple List Widget

By now, you've probably already used the Simple List widget. It is one of the default widgets on the OOB portal homepage. Similar to the Data Table widget, it is used to display a list of records from a table. However, there is a lot more to this widget than you might think. In this post, we will cover some of the secrets of the simple list widget. To give you a quick sample of its capabilities, there is an OOB demo page available at: https://yourinstance.service-now.com/sp?id=test_list Features Include: Display records from any table and filter Support for image fields Show primary and multiple secondary fields Limit the height with scrollable body Trigger an event Customizable actions To get started, let's first create a widget which shows the payload of the event that get's triggered when clicking a record. HTML: [crayon-5bf525dfe14b2393374587/] Client Script: [crayon-5bf525dfe14bb758471248/] Now if you place this widget on the same page as the Simple List widget, and if you don't specify a "Link to this page" in the Instance Options, you will see the JSON representing the record you clicked on. With this event, it'll be very easy to trigger a modal window or other user interaction, but for now let's proceed to adding some List Actions. LIST ACTIONS The Simple List widget supports adding additional actions for the records in the list. For some reason this related list is not visible on the form by default, so we'll need to add it: Pull up the Platform View of the Instance Record of the Simple List Click the hamburger icon > “Configure” > “Related Lists” Add "List Action -> Parent List" Now you should see the List Actions Related List When adding List Actions, you are able to include properties from the record in the URL field using double brackets: [crayon-5bf525dfe14c2745645483/] However, there are a couple of unfortunate limitations: You cannot link to an external URL You cannot use URL prefixes such as “mailto:” or “tel:” Clicking a List Action does not trigger an event This limits the List Actions to just linking to other pages, but hopefully this will get fixed in an upcoming release. DEMO Here is a quick video demonstrating how to configure some List Actions on the Simple List widget. FURTHER READING https://docs.servicenow.com/bundle/london-servicenow-platform/page/build/service-portal/concept/simple-list-widget.html

Images and Update Sets – How to Sync Attachments on Widget Instances

It’s a pretty common requirement to include images in your widgets, for example replacing the icons with images in the “Icon Link” widget (available here). However, if you have ever added an image field to one of the instance tables, you may have noticed that the images were not included in the update set. This obviously makes it difficult to migrate the portal between instances. The good news is there is a simple solution. SYNCING ATTACHMENTS First, go to a record within the table where you would like to sync attachments (e.g. sp_instance_link) Right click the heading > Configure > Dictionary Select the record where “Type” is “Collection” Click the “Advanced View” related link Paste the following into the Attributes field: [crayon-5bf525dfe20d8107957889/] When completed, it should look like this: Now, the next time you save or update the instance record, the image data will also get included in the update set. NOTE: If you wish to use the image field on all instance tables, you can create the field on the base “sp_instance” table. However, you will still need to follow the steps above for each one of the extension tables where the image field is used.

Custom Context Menu Options

As most of you know, Service Portal has a pretty handy context menu that you can access by simply holding down CTRL and clicking (right click on PC) on a widget. The context menu provides several shortcuts to some of the frequently used configuration options. Note: the “sp_admin” role is required to see the context menu. Adding custom context menu items But did you know you can also add your own options to the list? Open up the Widget Editor and insert the following JavaScript into the Client Script field. [crayon-5bf525dfe2855795704974/] Now when you view the widget in the portal and you open the context menu, you will see your newly configured menu items.

SCSS Variables in Service Portal

Learn how to streamline your stylesheets in Service Portal by utilizing the full power of SCSS. In this tutorial, I'll walk you through how to use CSS Variables in your widgets, so that they can be overridden in the Theme and Portal records. This is very useful when creating highly reusable widgets, themes or in situations where you have multiple portals sharing a theme. SCSS is a subset of the Syntactically Awesome StyleSheets (Sass) specification and is an extension of CSS. Every valid CSS stylesheet is valid SCSS. SCSS supports the following: Variables Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you want to reuse. SCSS uses the $ symbol to make something a variable. Nesting SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Operators SCSS has a handful of standard math operators like +, -, *, /, and %. Mixins A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can pass in values to make your mixin more flexible. Functions SASS supports the use of functions by providing some keyword arguments, which are specified using normal CSS function syntax. Quick note: The order of CSS that is shown in the video is based on the Kingston release. In Jakarta, the Theme variables were loaded before the Portal variables. For further reading, check out the following resources: https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/scss-primer.html https://sass-lang.com/guide https://devhints.io/sass https://www.tutorialspoint.com/sass/index.htm

Service Portal Features of London

By now all of you should have noticed that you can request a personal developer instance of ServiceNow running the latest London release. Also with the new London release comes several new enhancements to the Service Portal. Here's a quick highlight of some of the new features: Faceted Search The Faceted Search widget replaces the Search Page widget and adds support for: Faceted Search Filters Pagination What's awesome: I love that the facets live as part of  the search source so that we can customize the facets as well as add custom facets to our search sources What could be improved: The whole search page is a giant widget including the typeahead search and the breadcrumbs. This makes it difficult to customize. What if we have a theme without breadcrumbs? What if I want to move the search? Having the whole page be one giant widget is just not a good idea. It does not improve the typeahead results which is how the majority of users use the search Virtual Agent Enable your users to interact with a chatbot or live agent through various Virtual Agent interfaces. What's awesome: Nice modern interface Integrates nicely with Connect Chat What could be improved: It's not free (requires additional licensing) Takes a really long time to load Guided Tours Create a guided tour for a Service Portal page to guide users through the content step by step. What's awesome: Supports auto launch Supports (limited) HTML Easy to use designer interface What could be improved: No support for page overlays (darkens the page behind the dialog) Dialogs don't stay fixed when the user scrolls the page Automated Test Framework Write automated tests to validate Service Portal forms. What's awesome: We now have support for automated tests in Service Portal What could be improved: So far it's just limited to forms and service catalog Validation Scripts Validate user input in a specific field type using a validation script. My thoughts: As far as I can tell, this validates field types and not tied to a specific table, also would not affect catalog items or record producers... so honestly, I'm not really sure when this would be useful. If you know of some common use-cases, I'd love to hear them in the comments.   For further reading, please see the official ServiceNow London Release Notes for Service Portal.

Building a Better Service Portal: Lessons from the Field

Service Portal provides an incredible new opportunity to improve service experience in your organization. It offers a fresh and modern approach to development. But with anything new, there is always a learning curve and some growing pains. Fortunately, with the right knowledge, delivering a new service portal experience to your organization can be a smooth and rewarding journey. After helping dozens of organizations deliver Service Portals, we want to share what works and what doesn't. If you are starting your service portal journey, this session will help you take the right path.

Unlocking Service Portal Widgets

How do you go from hacking a widget together to creating one that is maintainable, easy to understand and performant? You accomplish a lot with Service Portal widgets with a little knowledge of ServiceNow APIs and Angular.js, but too often widget client and server scripts become long and overly complicated. In this session, you will learn practical techniques to make your controller and server scripts more maintainable, flexible and powerful by embracing good coding practices, encapsulation, and decoupling. You can download the widgets used in this video here: https://serviceportal.io/downloads/k18-creatorcon-example-widgets/