Develop an Angular app that uses the Genesys Cloud Platform SDK

This Genesys Cloud Developer Blueprint demonstrates how to to include the Genesys Cloud Javascript Platform SDK in an Angular project. The blueprint includes a sample Angular project that uses the Genesys Cloud API for supervisor functionalities like searching and setting the status of users. The blueprint also shows how to configure the SDK for a new or existing Angular project.

• Solution components
• Prerequisites
• Sample Angular app
• Implementation steps
• Additional resources

• Genesys Cloud - A suite of Genesys cloud services for enterprise-grade communications, collaboration, and contact center management. In this solution, a Genesys Cloud user account is required in order for the Angular app to be authorized to integrate with Genesys Cloud.
• Angular CLI - A command line tool that facilitates the use of the Angular development framework for building single-page applications. The sample app in this solution was built with Angular 17 CLI.

• Genesys Cloud Platfrom API SDK - Client libraries used to simplify application integration with Genesys Cloud by handling low-level HTTP requests. In this solution, the SDK authorizes the user and performs the API calls required to execute the supervisor features.

• Administrator-level knowledge of Genesys Cloud
• Experience using the Genesys Cloud Platform API
• Experience using Angular or the Angular CLI 

• A Genesys Cloud license. For more information on licensing, see Genesys Cloud Pricing.
• (Recommended) The Master Admin role in Genesys Cloud. For more information, see Roles and permissions overview in the Genesys Cloud Resource Center.

This solution includes a sample Angular app that uses the Genesys Cloud Javascript Platform SDK to display and update data for Genesys Cloud users.

From the sample Angular app, you can update some user data, and that updated data is returned to Genesys Cloud in real-time. Specifically:

• The User page displays data from your Genesys Cloud user account. It also contains a presence-picker component, which allows you to change your presence or routing status.
• The User Search page allows you to search for other users in your Genesys Cloud org.
• The Queues List page allows you to see Observation Query details for each queue. Within the Angular app, you can log out all of the agents on a particular queue, which is helpful if those agents cannot log out of their stations after their shift is over.

The sample Angular app includes the genesys-cloud service, which contains the Genesys Cloud-related functionality that is supported by the Angular app.

All of the API methods return a promise, but if you want to work with observables instead, you can easily convert the promises by using the from operator. For example:

  getUserDetails(id: string): Observable<platformClient.Models.User> {
    return from(this.usersApi.getUser(id, {
        expand: ['routingStatus', 'presence'],
      }));
  }

You can run the sample Angular app locally or from the blueprint repo.

To run the sample Angular app from the blueprint repo:

1. Click here.
2. If you're on a different region than us-east-1 (mypurecloud.com), add an environment query parameter to the URL and enter your Genesys Cloud environment.

For example:

https://genesyscloudblueprints.github.io/angular-app-with-genesys-cloud-sdk/?environment=mypurecloud.com.au

For more information, see Platform API.

1. Clone the blueprint repo to your local machine:

git clone https://github.com/GenesysCloudBlueprints/angular-app-with-genesys-cloud-sdk.git

2. Go to the genesys-cloud-sample project directory.

cd genesys-cloud-sample

3. Modify the client ID and redirect URI values in the environment files.

i. Go to the src>environments directory.

ii. Modify the production environment.prod.ts file:

export const environment = {
  production: true,
  GENESYS_CLOUD_CLIENT_ID: '<YOUR CLIENT ID HERE>',
  REDIRECT_URI: '<YOUR PRODUCTION URI HERE>',
};

iii. Modify the test environment.ts: file:

export const environment = {
  production: false,
  GENESYS_CLOUD_CLIENT_ID: '<YOUR CLIENT ID HERE>',
  REDIRECT_URI: 'http://localhost:4200',
};

4. Serve the Angular app locally:

ng serve

Follow these instructions to include the Genesys Cloud Javascript Platform SDK in your own Angular project.

1. To authorize your app with the Genesys Cloud SDK, create an Implicit Grant (Browser) client with the following settings:
• Authorized redirect URIs (one per line):
• Your production URI
• http://localhost:4200/ (to test locally)
• Scope:
• analytics
• authorization
• presence
• routing
• users

For more information, see Create an OAuth client in the Genesys Cloud Resource Center.

1. Install the Angular CLI:

npm install -g @angular/cli

2. Create a new Angular 12 project:

ng new name-of-your-app

1. Install the Genesys Cloud platform client:

npm install purecloud-platform-client-v2

2. Install the custom-webpack library:

npm i @angular-builders/custom-webpack --save-dev

1. In the root of your Angular project, create a file with a meaningful name. For example, extra-webpack.config.js
2. Add the following content to the file:

module.exports = {
  externals: {
    'purecloud-platform-client-v2': "require('platformClient')",
  },
}

3. In the root of the project, open the angular.json file and find the architect property. Then modify the builder targets, which are found under the build property:

i. Change the builder property to: @angular-builders/custom-webpack:browser

ii. Under the options property, add a new customWebpackConfig object. Refer to the following code block for details.

iii. In the scripts property add node_modules/purecloud-platform-client-v2/dist/web-cjs/purecloud-platform-client-v2.min.js

iv. Change the key of the browser entry to main.

The modified build property should look like this:

 "build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
     ...,
     "main": "src/main.ts",
     "customWebpackConfig": {
       "path": "./extra-webpack.config.js",
       "mergeRules": { "externals": "prepend" }
     },
     "scripts": [..., "node_modules/purecloud-platform-client-v2/dist/web-cjs/purecloud-platform-client-v2.min.js"]
   }
 }

4. Modify the serve property:

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  ...
}

5. Modify the test property:

i. If you're using Karma for Angular testing, change the builder property to: @angular-builders/custom-webpack:karma.

ii. Under the options property, add a new customWebpackConfig object. Refer to the following code block for details.

iii. In the scripts property add node_modules/purecloud-platform-client-v2/dist/web-cjs/purecloud-platform-client-v2.min.js

The modified build property should look something like this:

 "build": {
   "builder": "@angular-builders/custom-webpack:karma",
   "options": {
     ...,
     "customWebpackConfig": {
       "path": "./extra-webpack.config.js",
       "mergeRules": { "externals": "prepend" }
     },
     "scripts": [..., "node_modules/purecloud-platform-client-v2/dist/web-cjs/purecloud-platform-client-v2.min.js"]
   }
 }

6. Finally, in your tsconfig.json, disable noImplicitAny in the compilerOptions:

{
  ...
  "compilerOptions": {
    ...
    "noImplicitAny": false,
  },
}

1. Import and use the Genesys Cloud platform client in your Angular code. For example:

import { Component, OnInit } from '@angular/core';
import * as platformClient from 'purecloud-platform-client-v2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'sample-app';
  ngOnInit() {
    console.log(platformClient);
  }
}

• Genesys Cloud Platform SDK - Javascript
• Angular Builders - Custom Webpack in the npm website
• angular-app-with-genesys-cloud-sdk repository in Github
• Sample Angular app