478 Views
4 minute read
Categories
Content and Collaboration

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. 

Seshavalli Pullipati

About Seshavalli Pullipati

Seshavalli has around 11 years of extensive Software Application Development, Production and Application Support (L2 and L3) experience in Microsoft Technologies. Also Having 7+ years of experience of SharePoint Administration in 2013/2010/2007 and 5 + years’ experience in K2 Smart Forms and Workflows, SharePoint Designer 2010/2007, InfoPath 2010, ASP.NET, Web Services ,SQL Server, .NET Framework, C#.NET, VB.NET, ASP.NET,ASP.Net WEB API’s, ADO.Net, JavaScript, XML and HTML. In addition, he is conversant with Crystal Reports , Oracle, Applix CRM Tool and SQL Tuning. Prior to joining Netwoven, he was working with ETISALAT Telecom Corporation, Bangalore as Technical Lead.

Seshavalli did his B.Sc (Computer Science) and M.Sc (Computer Science) from Sri Krishna Devaraya University, Andhra Pradesh in the year 2002 and 2004 respectively.

A native of Nandyal, Kurnool, Andhra Pradesh, he is presently living in Bangalore for the past 4 years. During his leisure time, he enjoys long drive, comic movies and spending time with his family. He takes special interest in Painting and Poetry.

LinkedinTwitterFacebook

Leave a Reply

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




Enter Captcha Here :