Oracle Service Cloud

BUI CTI Simulator

Solution Consultant Implementation Guide

Oracle - Confidential BUI CTI Simulator 1

Table of Contents
Document Versions ....................................................................................................................................3
Introduction ................................................................................................................................................4
Simulator Technology ...................................................................................................................... 4
Compiling BUI Extensions ........................................................................................................................5
Tool Installation ...................................................................................................................... 5
Obtaining the Source Code .............................................................................................................. 5
................................................................................................................................................ 6
Changing the Source Code ..................................................................................................... 6
Compiling the Extensions ................................................................................................................ 6
List Gradle Commands ........................................................................................................... 7
Summarized Steps to Compile Extensions....................................................................................... 8
Configure Extensions .................................................................................................................................9
Agent Console .................................................................................................................................. 9
Custom Objects....................................................................................................................... 9
Steps to Manage Custom Objects ........................................................................................... 9
Extension Configuration ....................................................................................................... 10
Configure Customer Portal............................................................................................................. 11
Custom Controllers and Models ........................................................................................... 11
Steps to Deploy Customer Portal Files ................................................................................. 12
Testing the Simulator ..................................................................................................................... 13

Oracle - Confidential BUI CTI Simulator 2

Document Versions
Version Date Author Notes
Pre-release implementation guide for knowledge
sharing. This document should not be used for any
.1 01/10/2017 Scott Harwell
deployment or demo until legal approval for libraries
used is completed.
.2 01/17/2017 Scott Harwell Editing changes and document organization.

Oracle - Confidential BUI CTI Simulator 3

Introduction
The new Browser UI-based call simulator is a new set of extensions for Oracle Service Cloud.
Extensions are the analogous term to add-ins within the agent console; though, the functionality does
differ between the two types of components. Extensions leverage common web technologies like
HTML, CSS, and JavaScript, which can implement BUI-specific, third-party, or custom code.
Implementing the BUI CTI simulator will consist of several steps to move from obtaining the code
through OSvC configuration. Once these steps have been completed, you will be able to use the
simulator on any 16.11+ site with AgentWeb enabled.

Simulator Technology
The call simulator extensions were written using the same development methodologies that the BUI
development team uses. Primarily, these technologies include TypeScript (a superset of JavaScript that
makes writing enterprise JavaScript applications easier), Node.JS, jQuery, and Oracle Jet.
The extensions are written using HTML, CSS, and TypeScript. Third-party JavaScript libraries are
included in folders that the extensions can leverage. Upon the need to test or deploy an extension, the
extensions are compiled so that the TypeScript is converted into JavaScript and the extension folder
structure is automatically generated.
The output of the development process is a folder of HTML, CSS, and JavaScript files. This folder is
automatically compressed into a zip, which can be uploaded into OSvC for use.

Oracle - Confidential BUI CTI Simulator 4

Compiling BUI Extensions
The following section focuses on configuring your system for compiling the extensions from source
code. If you do not need to compile the extensions, and you have the pre-generated zip files already on
your PC, then you can skip to the configuration section of this document. If your PC is already setup
with the build tools, then you can skip to compiling the extensions for quick steps to perform the
compilation process.

Tool Installation
The BUI CTI simulator is built with a number of open-source tools and libraries. You will need to
install the following tools in order for the build process to work. Installation instructions differ based
on your OS, but they are available for Windows, Mac OS, and Linux.

 Node.JS

 NPM (Installed as part of Node.JS)

 Gradle

Installation on the Oracle Network

Node.JS and NPM communicate over the Internet to download and retrieve packages, especially on
first installation. If you are having trouble installing these tools, then either configuring them for the
Oracle Proxy PAC or installing off the Oracle VPN should resolve those issues.

Obtaining the Source Code

Source code for the BUI CTI simulator is not public and should only remain internal to Oracle. A CTI
accelerator that leverages the Twilio service will be published to GitHub as open-source code that can
be referenced by customers and partners. The current date of delivery for that GitHub accelerator is
expected to be March - April 2017. If you have any question about the source code and how you may
leverage it, then please contact Scott Harwell for questions.
If you are an Oracle employee with access to the accelerator project on Orahub, then you can download
or clone the repository using Git. The simulator folder is located at the “/servicecloud/cti/simulator/”
path in the repository. If you do not have access to Orahub, then contact Scott Harwell for a copy of
the most recent code.

Oracle - Confidential BUI CTI Simulator 5

Changing the Source Code
You are welcome to change the source code on your own for specific use cases or needs. The
extensions are written in HTML, CSS, and TypeScript. TypeScript is a superset of JavaScript and is
compiled into JavaScript using the TypeScript compiler. You will want to be sure that your code
changes are made to the non-compiled TypeScript-based source code, and then compile your
TypeScript into JavaScript. Changes made to the machine-generated (compiled) JavaScript cannot be
easily merged back into the original source code, and recompiling your TypeScript will overwrite
generated JavaScript.

Compiling the Extensions

Gradle is a tool used to build the extensions used in BUI. It is not used for standard OSvC components
like Customer Portal or Custom objects. You will need to install Gradle on your PC prior to attempting
to build the accelerators.
Gradle can be exposed in both UI and command line tools. In this documentation, we will use
command line tools, but the same actions can be run from any Gradle-compatible tool (Gradle UI,
jDeveloper, Sublime Text, etc.).

Gradle Proxy Configuration

The compile process will operate differently if you are on the Oracle VPN or not. By default, the build
process assumes that you are on the Oracle VPN. If you wish to compile the extensions when outside
of the Oracle VPN, then the following changes must be made to the code.

Oracle - Confidential BUI CTI Simulator 6

  .npmrc : This file needs to be removed/deleted.

 gradle.properties : All the proxy settings in the first four lines of the file need to be commented
out or removed.

List Gradle Commands

Before using Gradle, be sure that you have navigated to the “/serviceloud/cti/simulator/bui” folder in
the source code folder/repository in either your command line or your Gradle GUI tool.
A Gradle script exists in the “bui” folder, which contains a number of actions for building the
components. These can be listed by running “gradle tasks”. The Gradle tasks will display as per the
image below.

The important command for building the extensions is “buildToolZip”. This will perform all of the
compile tasks, collect external dependencies, and then package the extensions into zip files that can be

Oracle - Confidential BUI CTI Simulator 7

uploaded into the extension manager in the Agent Console. These zips will be compiled to the “build
folder in the project directory.

Summarized Steps to Compile Extensions

Follow these steps to compile the extensions once you have the tools mentioned in previous sections
installed.
1. Obtain the source code / repository and extract the folder(s) on your local PC.
2. Using a command line or Gradle UI tool, navigate to “/serviceloud/cti/simulator/bui”.
3. Run the command “gradle buildToolZip” from the command line, or click the command from
your GUI tool.
4. Navigate to the “/serviceloud/cti/simulator/bui/build” folder. The two zip files will be the two
extensions that we need to upload at a later step. Make note of this location.

Oracle - Confidential BUI CTI Simulator 8

Configure Extensions
This section contains information and steps for how to configure the CTI simulator extensions with
Oracle Service Cloud. These steps may only be followed once you have received a packaged (zipped)
version of the extensions, or after you have compiled them yourself.

Agent Console
There are a number of configuration steps in the agent console in order to manage the call simulator.

Custom Objects
The call simulator contains a custom object in the folder “/servicecloud/cti/simulator/bui/co”. This
object needs to be installed and deployed through the custom object designer. The package contains
new Custom Object tables as well as Custom Attributes for standard objects.

Steps to Manage Custom Objects

1. Login to the Agent Console and navigate to the object designer.
2. Click the “Import” icon in the ribbon.
3. Choose the “Accelerator_CustomObjects.zip” file on your
computer.
4. Click the “Extra Options” icon in the ribbon. Assign CRUD
permissions to any profile that may contain a user demoing from
that profile.
5. Click the “Save” icon in the ribbon.
6. Click “Deploy” in the ribbon and wait for the deploy process to complete.

Oracle - Confidential BUI CTI Simulator 9

Extension Configuration
BUI extensions are managed through the Add-in administration tool in the agent console. Follow these
steps to load the extensions into the add-in manager. The following steps will need to be repeated for
each of the extensions.
1. Using the agent console, navigate to
Configuration > Site Configuration > Add-in
manager
2. Click the chevron next the “Agent Browser UI
Extensions” to expand the list.
3. Click “New” in the ribbon.
4. Select “New Agent Browser UI Extension” and
navigate to the “build” folder that was mentioned
earlier when compiling the BUI extensions.
5. Select one of the two zip files. Click open.

6. Name the extension based on the file that you selected. You can infer the name of the extension
from the name of the zip file that you selected. We typically use the following as names

Oracle - Confidential BUI CTI Simulator 10

 1. BUI CTI Dialer Simulator
2. BUI CTI Console
7. Both extensions are extension type “Console”.
8. Select the “init file” for the extension.
1. The file will be “simulatorDialerInitializer.js” for the CTI Dialer Simulator.
2. The file will be “ctiConsoleAddinIntializer.html” for the CTI Console.

9. Using the ribbon button “Profile Access”, assign the extension to one or more profiles that
should have access to the extension. This will typically match the same profiles that you
assigned to the Custom Object(s) in previous steps.

10. Repeat this process for the other extension in the BUI CTI simulator. Once both extensions
have been configured, you may click “Save and Close” in the ribbon.

Configure Customer Portal

The call simulator uses some files in Customer Portal for functionality. It is recommended that you
deploy any existing changes in your staging environment in Customer Portal before beginning these
steps.

Custom Controllers and Models

The call simulator contains a single custom controller and two custom models as identified in the
screenshot below.

Oracle - Confidential BUI CTI Simulator 11

Steps to Deploy Customer Portal Files
1. Using a WebDAV tool, like CyberDuck, move the aforementioned files into their matching
directory on your demo site. The folder structure in the screenshot matches the same path to the
folders you will need to add these files to in Customer Portal.
2. Navigate to your site’s Customer Portal administration (https://<site>/ci/admin).
3. Push the new changes from your development environment to staging.

Oracle - Confidential BUI CTI Simulator 12

 4. Promote the changes from staging to production.

Testing the Simulator

Once the previous steps have been completed, then the extensions should be ready to use in BUI. To
test, login to BUI using an account that belongs to one of the profiles that you assigned to the
extensions.
The CTI Simulator icon may have a slight delay before loading as it performs checks prior to being
initialized.

Oracle - Confidential BUI CTI Simulator 13

You should now be able to click the headphone icon to launch the call simulator tool. The on/off
switch will control your CTI tools. Demos and information about using the simulator tools may be
found at this confluence page.

Oracle - Confidential BUI CTI Simulator 14