Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs - Netwoven

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

By Seshavalli Pullipati  •  June 14, 2022  •  1459 Views

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

Introduction:

We received a requirement from a customer on the intranet portal dashboard, they wanted to have an Adaptive Card to show the ServiceNow Incidents information. This blog takes you through in detail the steps we followed to implement the above requirement: 

  • Configuration Activities from ServiceNow
    • Configure App Registry 
    • Generate OAuth Token 
  • Create a custom Adaptive Card Extension using SPFx 
  • Passing OAuth token from your SPFx code 

Configuration Activities from ServiceNow

Follow the steps below to configure App Registry 

  • Go to ‘Application Registry’ in your service management 
  • Click on ‘New’ button on the right top 
  • Select ‘Create an OAuth API endpoint for external client’ 
Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs
  • Enter the name you would like to have for your reference 
  • The Client ID will be generated automatically, therefore nothing needs to be done. 
  • Provide the Client Secret and note for your reference which will be required while generating OAuth token 
  • Points to note:
    • Refresh token Lifespan to be given for 100 days 
    • Access token Lifespan to be given for 30 minutes 
    • For security reasons, ServiceNow gives the above timespan for these tokens, by default. Based on your requirement and preferences you may need to change the duration or implementation to generate the token dynamically. 
Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs
  • Click ‘Save’. 

Generate OAuth Token 

Below are the steps to generate OAuth Token: 

The following URL helps to generate OAuth token and where we need to pass the required parameters- https://docs.servicenow.com/bundle/sandiego-platform-administration/page/administer/security/reference/r_OAuthAPIRequestParameters.html

  • POSTMAN was used to hit this URL to generate the token. Here is the screenshot: 
Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs
  • Click on ‘Send’ to return the refresh and access token. 

Take note of these two tokens 

  • Access token – used for API authorization 
  • Refresh token- used for generating the fresh access token. 
Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

You may like to read our blog : ServiceNow Integration with SharePoint Online using Microsoft Graph

Create custom Adaptive Card Extension using SPFx 

Follow these steps to create a SPFx solution and select ’Adaptive Card Extension’ option for the client-side component 

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

Once the solution is created, open code in VS code and call the API using ‘httpClient’ object as show below. 

  const requestHeaders: Headers = new Headers();
        requestHeaders.append('Content-type', 'application/json');
        requestHeaders.append('Accept', 'application/json');
        requestHeaders.append('Access-Control-Allow-Origin', '*');
        //For an OAuth token
        requestHeaders.append('Authorization', 'Bearer ' + this.SNOAuthToken);
        
        const httpClientOptions: IHttpClientOptions = {
          headers: requestHeaders,
          method: 'GET',          
        };

        this._httpClient
          .get(
            'https://dev79909.service-now.com/api/now/table/incident?',
            HttpClient.configurations.v1,
            httpClientOptions
          )
          .then((response: HttpClientResponse) => {
            
            if (response.ok) {
              return response.json();
            } else {
              return null;              
            }
          })

Once coding is complete, deploy the solution.  

Here is the Adaptive Card that interacts with ServiceNow API to pull the incidents information on Intranet portal dashboard for your reference. 

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

Click on View Tickets to show ‘Quick View’. 

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

Click on the incident to show basic details of ‘Incidents’. 

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

Click on ‘Raise Ticket’ to raise a new incident in ServiceNow. 

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

The new incident will show on view tickets quick view. 

Microsoft 365 Custom Adaptive Card Interacting with ServiceNow APIs

Likewise, you can do all CRUD operations. 

We hope you found this blog useful in learning how to get an Adaptive Card to show the ServiceNow Incidents information. Please reach out to us so that we can put our decades of Microsoft 365 expertise and experience to work for your organization’s Digital Transformation journey. 

Leave a comment

Your email address will not be published. Required fields are marked *

Dublin Chamber of Commerce
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Fast Track
Microsoft Partner
MISA
MISA
Unravel The Complex
Stay Connected

Subscribe and receive the latest insights

Netwoven Inc. - Microsoft Solutions Partner

Get involved by tagging Netwoven experiences using our official hashtag #UnravelTheComplex