Last week I invited ServiceNow engineer, Darren Richards, to host a dev talk about creating custom components using the Now Experience UI Framework. If you’re interested in creating custom components, understanding ServiceNow’s Now Experience UI Framework, also sometimes known as Seismic, be sure to check out the video and let me know your thoughts below! Additional resources: Now Experience UI Framework Now Experience UI Builder Fundamentals Create Pages in UI Builder Build My First Now Experience UI Framework Custom Component UI Builder - Theming
Overview GraphQL is an open-source data query and manipulation language for APIs. GraphQL offers many benefits over REST API's, including: Fetching data across multiple sources from a single API call Returns only the data that is requested Supports validation and type checking Autogenerating API documentation In this video, I'll show you how to construct a sample GraphQL query to fetch data in ServiceNow and then how we can use GraphQL inside of a ServicePortal widget. GraphiQL To start, I would recommend you download GraphiQL, a GUI for editing and testing GraphQL queries and mutations. You can download it here: https://www.electronjs.org/apps/graphiql The GraphQL Endpoint is: https://instance-name.service-now.com/api/now/graphql Documentation In order to use the documentation and auto-completion, you'll need to enable the glide.graphql.introspection_enabled system property. Service Portal Widget You can download the widget update set here: It's compressed as a ZIP file, so remember to uncompress before uploading. Example GraphQL Query [crayon-614b3d8a9de57575026162/] Further Reading https://graphql.org/ https://www.howtographql.com/ https://docs.servicenow.com/bundle/paris-application-development/page/integrate/graphql/concept/scripted-graph-ql.html If you have any questions or comments, please don't hesitate to comment below.
I get asked a lot about mobile and how to deliver branded mobile experiences on ServiceNow. For years the answer has been to use Service Portal since it's responsive and can be themed to function really well on mobile devices. This has worked quite well for many use-cases, but it still requires accessing through a browser or ServiceNow Classic, and it's still not the same experience that we've all come to expect from a native mobile app. 54% of employees expect their employers to provide mobile-optimized tools Source: https://research.servicenow.com/ Some of this has changed with the release of the Now Mobile app, but it is ServiceNow branded, lives in the app stores under ServiceNow's name, and requires entering of the instance name and credentials. It may be great for roled users, fulfillers, or users at least familiar with ServiceNow, but there are still many use-cases when using the Now Mobile app does not seem ideal. Consider, for example: Local governments or municipalities enabling anonymous citizens to report issues Universities using ServiceNow for managing student requests Product companies offering support via ServiceNow to its customers Enterprise organizations wanting to provide their employees with a tailored and branded experience In many of these cases, it seems the ideal scenario would be a dedicated app, in the app stores, with the organization's branding, and with the specific features for that target audience. This compelled us to explore what it would take to develop cross-platform mobile apps. Apps fully integrated with ServiceNow, with custom branding, feature specific UI's, and taking full advantage of the mobile capabilities such as geolocation, maps, push notifications, and camera features. We've chosen to build our current platform on React Native, as this allows for both iOS and Android apps with a single code base, but we're also exploring a version in Swift and Java. In the video above, you can see some of the example apps that we've been prototyping. The goal of the project has been to follow the same conventions as Now Mobile, leveraging the same APIs, ensuring a sustainable architecture. As of this writing, we have not yet released any publicly available apps into the store... but we are working with some of our early adopter customers on some innovative new mobile solutions. To learn more about these projects and our native mobile capabilities, please contact us or visit newrocket.com for more information. I would love to hear your comments or feedback below. What are some use-cases where a mobile app could really improve the user experience?
Check out our new Service Portal showcase video, featuring some of the 70+ portals we've designed and developed over the past 3 years. If you're interested in talking to us about your Service Portal project, you can book some time on our calendar here: https://calendly.com/newrocket/60min Or visit our website newrocket.com
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-614b3d8a9f2bd982319707/] Client Script: [crayon-614b3d8a9f2cd328192491/] 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-614b3d8a9f2d9048262857/] 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
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
Due to popular demand, here is a quick video highlighting the portal and some of the widgets we showed during our CreatorCon sessions at Knowledge18. We've made the following widgets and applications available for download: Gamification for Service Portal https://serviceportal.io/gamification-in-service-portal/ Unlocking Service Portal Widgets https://serviceportal.io/downloads/k18-creatorcon-example-widgets/ If you've found this content useful or if you have any special requests for upcoming posts, please let me know in the comments below.
NewRocket had the pleasure of collaborating with Scripps Networks Interactive to deliver an IT service portal to support their diverse company. Scripps Networks is a leading developer of lifestyle content for television and the Internet. The company's brands include HGTV, Food Network, Travel Channel, DIY Network, Cooking Channel and Great American Country. The previous Scripps Networks CMS-based portal did not provide the usability they were looking for nor did it align with their new branding guidelines. Improving these key areas was critical for the redesign of the portal. “NewRocket delivered on a portal that not only fit our branding guidelines but packs in functionality with a design aesthetic that is visually inviting. Our end user experience has greatly improved by making our content and catalog offerings forefront and easily searchable all in an appealing display. The team was fantastic to work with and their expertise and guidance helped make our portal successful.” - Judy March, IT Service Delivery Manager Portal Features The new portal provides users with quick access to search, the IT service catalog, frequently asked questions and news. NewRocket embraced the extensive, yet flexible branding guidelines to visually identify different sections of the portal. These visual and structural changes help users quickly understand the page contents and complete the desired task. Some other highlights include: Quick access to open requests, incidents and approvals through My Items mega menu in header Direct access to the top level service catalog categories from the home page Consistent access to support options in footer Several custom developed widgets including news, sub-categories, and knowledge base homepage Responsive layout for mobile and tablet users Watch the video for a quick tour and leave us a comment about what you think of the portal.
I'm always been a fan of creative 404 pages, especially when they include something interactive, like a game (hence the reason I developed the OOB breakout game). So when I saw ServiceNow post a 404 Page challenge, I thought this was the perfect opportunity to create a space/rocket themed 404 game. Given that I don't have a lot of free time, I pulled some of the game logic from a Github tutorial, and then spent the rest of the day integrating it into a Service Portal widget, and adding new functionality such as High Score tracking, and presenting it with some cool graphics. I think it turned out pretty cool for a quick weekend project. The game is live on our demo instance if you want to check it out: https://newrocketdemo1.service-now.com/$sp.do?id=spacerocket It's only been tested on Chrome, Safari, and iOS Safari... so if you find any bugs let me know. To submit your own 404 Page, or see some of the other submissions, head on over to the community: https://community.servicenow.com/message/1261738 Screenshots: