Service

Portal: Transform Your User Experience

Jonatan ‘Jonny’ Jardi
Technical Product Manager (Platform)
ServiceNow

© 2016 ServiceNow All Rights Reserved

Who Am I?

Jonatan “Jonny” Jardi

• Technical Product Manager (Platform)
• Over 4 years working for ServiceNow
• Almost 7 years working with ServiceNow
• Presenter @ K14, K15 and K16
• Integrations and Custom App Dev Fanatic
• Service Portal Evangelist J
• Born and raised in Argentina, living in Brisbane AU

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

2
Agenda
• What is Service Portal?
• Service Portal Architecture
• Portal Personas
• Customizations Features
• Lab Time!
• Wrap up / Q&A

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

3
@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

4
@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

5
@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

6
What is Service Portal?
• Service Portal is a new feature in Helsinki
• CMS evolution Service Portal
• Easily customizable design and branding Design
• Modular with ready-to-use widgets
– 100+ widgets OOB

• Used to build portals and dashboards

Flexibility Technology
• Built on industry standard technologies
(Angular/Bootstrap/SASS)

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

7
What is Service Portal?

Full Integration with the Platform

• ServiceNow components
• Flexible APIs
• Web Services for third-party access
• Security
• Authentication
• Internationalization
• Performance

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

8
What is Service Portal?
• Modular
• Themeable
• Single-page application experience
-No more iFrames!
• Event driven through Client scripts
and AMB
• Supports unauthenticated users

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

9
What is Service Portal? The Difference
• Industry standard code base – Jelly free
• Complete control over pixel-perfect layout
and brand
• Integrated with platform search capabilities
• Separation of content (no code),
configuration (low code) and development
(pro code)
• Share services (build once, use many)

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

10
Service Portal Architecture

Theme

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

11
Service Portal: Personas

Low Code

No Code: A basic admin needs to Low Code: Those who want to dig Pro Code: Developers who
change the title of a menu item or deeper, this developer would have desire deep access to platform
heading, can do so immediately access at a minimal level to update CSS, functionality and data can build
without needing to code anything or JS or HTML as well as any content their own widgets with a
contact IT for help. Can also add within articles, pages or widgets. They mixture of service side scripting
widgets to pages, build pages and can also modify their own instance of a and Angular JS to achieve goals.
move customize using drag-and-drop widget for use within other Portals. These widgets can then be used
functionality. in other Portals.

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

12
Service Portal: Customization Features

• Customization can be accomplished through simple or advanced Service Portal

configuration:
• Look and Feel
– Branding Editor
– Designer
– Themes

• Content
– Widget Options
– Widget Editor

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

13
Service Portal: Customization Features

• The entry point to

customize and configure
Portals, Pages and Widgets:
sp_config

• It is accessible only through

users with sp_admin role

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

14
Service Portal: Customization Features

• Branding Editor is used to

give a portal your own look
and feel
• Great way for non-technical
users to configure the look
and feel in a matter of
minutes

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

15
Service Portal: Customization Features

• Designer is used to create

and customizes pages
• Create and modify page
layouts with simple drag-n-
drop functionality
• Add, remove and configure
widgets right from the
designer
• Preview in different form
factors (Desktop, Mobile,
Tablet)
@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

16
Service Portal: Customization Features

• Widget Editor is used to

create new widgets or
customize and extend
existing ones
• Access HTML, CSS (SASS),
Client and Server scripts
• OOTB widgets need to be
cloned first
– So you always get the best and
latest during upgrades!

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

17
Lab Time!
Need a soft copy?

https://servicenow.box.com/v/NOW16-SPLabGuide

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

18
Top Takeaways

1. Use Service Portal to create delightful experiences for your end users
2. Use out-of-the-box components as much as possible, but don’t be afraid to
create your own J

3. Anyone can now easily create portals, sites and applications on top
of the ServiceNow Platform

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

19
Useful Resources
• Documentation
– https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-
portal/concept/c_ServicePortal.html

• Videos and Demos

– https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-
portal/concept/c_Videos.html

• Tutorials / Other Resources

– http://serviceportal.io*
– https://github.com/service-portal/documentation
– Knowledge16 Labs and Sessions Decks:
• https://community.servicenow.com/community/on-demand-library
* All credits to Nathan Firth from NewRocket, Inc

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

20
Appendix: Advanced Customization Features
• Widget Development is broken down into 4 layers
- Hide if it’s too advanced for you!
• HTML, Scoped CSS (SASS), Client and Server Scripts
• Comprehensible library of GlideScriptable Server available
- Did you expect anything less?
• Standard Platform localization support with ${key name}
• AngularJS events to send messages up and down the stack
• Sync or Async data loading
• Supports AMB
• Supports dependency injection (Factories, Services and Directives)

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

21
 Take the Survey
Please take a moment to complete a session survey in the NowForum app.

Thank You
Jonatan ‘Jonny’ Jardi
Technical Product Manager (Platform)
ServiceNow
Jonatan.Jardi@servicenow.com

@enojardi | #NowForum

© 2016 ServiceNow All Rights Reserved

22