Service Portal Advanced

This two-day interactive course takes attendees on a Service Portal and Widget development deep-dive. Participants learn how to use their existing AngularJS, Bootstrap, CSS, HTML, and ServiceNow API (JavaScript) skills to create custom Widgets and advanced Search Sources.
Attendees will:

• Review the Widget Editor.
• Discuss Widget development strategies.
• Learn how to use built-in AngularJS directives, services and ServiceNow s Service Portal APIs.
• Explore Widget properties.
• Develop their own custom Widgets.
• Learn which 3rd party libraries and resources are installed in the platform.
• Develop re-usable Widget Dependencies, Angular Providers, and Angular ngtemplates.
• Discuss how to embed a Widget in another Widget.
• Review different ways for Widgets to communicate with one another.
• Explore how Widgets send/receive information.

These objectives are achieved through a combination of demos, lecture, and group
discussions. Lab exercises woven throughout the class walk students through practicing every technique discussed.

Module 1: Service Portal Review

• This module is a high-level review of the components from the Service Portal Fundamentals course that are relevant for this class.

Objectives:

• Define a Service Portal.
• Review the fundamentals.

Labs:

• Lab 1.1 Create a Service Portal

Module 2: Widget Development 100

• Learn how to develop Widgets using the fields accessible via the Widget Editor.

Objectives:

• Introduce a Widget development strategy.
• Understand how a Widget transfers data between the server and the client.
• Learn how to use built-in AngularJS directives, services and ServiceNow s Service
• Portal APIs.
• Discuss Widget debugging strategies.

Labs:

• Lab 2.1 Load Initial Data from the Server
• Lab 2.2 Display Initial Data to the User
• Lab 2.3 Accept and Process User Input

Module 3: Widget Development 200

• Review the remaining fields in the Widget record (accessed via the Form view in the Platform UI).

Objectives:

• Explore AngularJS expressions.
• Review how to apply style to Widgets.
• Discover how to add and use Widget Options.
• Learn how to manipulate the DOM using a Link Function.

Labs:

• Lab 3.1 Using Expressions
• Lab 3.2 Sorting Lists and Using recordWatch()
• Lab 3.3 Widget Options
• Lab 3.4 Custom Widget Options (Optional)
• Lab 3.5 Write a Link Function

Module 4: Widget Development 300

• Focuses on reviewing each of the Widget record s Related Lists.

Objectives:

• Explore additionally installed external libraries.
• Discuss Widget Dependencies.
• Learn about Angular Providers.
• Review Angular ng-templates.

Labs:

• Lab 4.1 Explore AngularJS and UI Bootstrap Directives
• Lab 4.2 Dependencies and 3rd Party Directives
• Lab 4.3 Create a Custom Directive
• Lab 4.4 Create a Custom Service

Module 5: Widgets Working Together

• Focuses on how Widgets can be embedded and communicate internally and externally.

Objectives:

• Discuss how Widgets can be embedded within another Widget.
• Review how Widgets Communicate.
• Explore how Widgets send/receive information.

Labs:

• Lab 5.1 Embed the 'form' Widget in a Modal
• Lab 5.2 Communication Between Widgets
• Lab 5.3 Make a REST API Call

This course is designed for pro-code System Administrators and Application Developers who want to learn how to develop advanced Service Portals components. You will be expected to script.