1. How do I use Computer Telephony Integration (CTI)?
  2. Create a JET application

Create a JET application

The first step toward building your media toolbar application is to create an OJET application with a basic template. Once you finish this step, you'll have a basic OJET application deployed in your Fusion media toolbar.

You can either work through the steps that follow to create the implementation or you can contact Oracle Cloud Customer Connect to access a compressed file which contains the source code for the basic JET application described in this topic. See How to start your OJET application from a compressed file.

Prerequisites

Before you get started, set up the following prerequisites:

Build the CTI Accelerator application

  1. Run the following command:
    ojet create <PROJECT_NAME> --template=basic --typescript
    Note: In place of <PROJECT_NAME> use a name of your choice, such as cti-accelerator.

    See Create an Oracle JET web app by using a starter template for more information.

  2. Once the command is executed a new folder with the project name will appear. Open the folder in your favorite editor.

    As part of the basic template, you'll see some extra UI elements such as footer, and app name label in your application once it's started. We don't need these elements for this overview, so you can remove them by doing the following:

    1. Remove the Menu button components and footer tag by opening the src/index.html file and removing the following content from the <oj-toolbar> tag. Leave the <oj-toolbar></oj-toolbar> tag empty. See the following example: 
      <oj-toolbar>
    <!------ START REMOVE FROM HERE ------>
    <oj-menu-button id="userMenu" display="[[smScreen() ? 'icons' : 'all']]" chroming="borderless">
        <span><oj-bind-text value="[[userLogin]]"></oj-bind-text></span>
        <span slot="endIcon" :class="[[{'oj-icon demo-appheader-avatar': smScreen(), 'oj-component-icon oj-button-menu-dropdown-icon': !smScreen()}]]"></span>
        <oj-menu id="menu1" slot="menu">
            <oj-option id="pref" value="pref">Preferences</oj-option>
            <oj-option id="help" value="help">Help</oj-option>
            <oj-option id="about" value="about">About</oj-option>
            <oj-option id="out" value="out">Sign Out</oj-option>
        </oj-menu>
    </oj-menu-button>
    <!------ REMOVE UNTIL HERE ------>
</oj-toolbar>
    2. In the src/index.html file remove <h1></h1> tag also as shown in the following example: 
      <!------ REMOVE THIS LINE FROM <header>  ------>
<h1 class="oj-sm-only-hide oj-web-applayout-header-title" title="Application Name"><oj-bind-text value="[[appName]]"></oj-bind-text></h1>
    3. In src/index.html file remove the <footer></footer> tag also as shown in the following example: 
      <!------ START REMOVE FROM HERE ------>
   <footer class="oj-web-applayout-footer" role="contentinfo">
       <div class="oj-web-applayout-footer-item oj-web-applayout-max-width">
         <ul>
           <oj-bind-for-each data="[[footerLinks]]">
             <template>
               <li>
                 <a :id="[[$current.data.linkId]]" :href="[[$current.data.linkTarget]]">
                   <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
                 </a>
               </li>
             </template>
           </oj-bind-for-each>
         </ul>
       </div>
       <div class="oj-web-applayout-footer-item oj-web-applayout-max-width oj-text-color-secondary oj-typography-body-sm">
         Copyright © 2014, 2024 Oracle and/or its affiliates All rights reserved.
       </div>
     </footer>
   <!------ REMOVE UNTIL HERE ------>
    4. Remove the unused variables from src/ts/appController.ts file as shown in the following example: 
      class RootViewModel {
  // REMOVE BELOW VARIABLES
  smScreen: ko.Observable<boolean>|undefined;
  appName: ko.Observable<string>;
  userLogin: ko.Observable<string>;
  footerLinks: Array<object>;
  // REMOVE UNTIL HERE
 
    constructor() {
        //.....
        // REMOVE BELOW VARIABLES
        let smQuery: string | null = ResponsiveUtils.getFrameworkQuery("sm-only");
        if (smQuery) {
            this.smScreen = ResponsiveKnockoutUtils.createMediaQueryObservable(smQuery);
         }
 
        // header
 
        // application Name used in Branding Area
        this.appName = ko.observable("App Name");
 
        // user Info used in Global Navigation area
        this.userLogin = ko.observable("john.hancock@oracle.com");
 
        // footer
        this.footerLinks = [
            { name: 'About Oracle', linkId: 'aboutOracle', linkTarget:'http://www.oracle.com/us/corporate/index.html#menu-about'},
            { name: "Contact Us", id: "contactUs", linkTarget: "http://www.oracle.com/us/corporate/contact/index.html" },
            { name: "Legal Notices", id: "legalNotices", linkTarget: "http://www.oracle.com/us/legal/index.html" },
            { name: "Terms Of Use", id: "termsOfUse", linkTarget: "http://www.oracle.com/us/legal/terms/index.html" },
            { name: "Your Privacy Rights", id: "yourPrivacyRights", linkTarget: "http://www.oracle.com/us/legal/privacy/index.html" },
        ];
         // REMOVE UNTIL HERE
    }
}

Bootstrap the OJET application

  1. From the Project root directory run the following command: ojet serve

    The command opens a new window in your browser and loads the default page of the OJET application.

    By default, the application starts in port 8000, and you can access the application at http://localhost:8000/. To change the port, you can pass the following argument --server-port <port>.

Start the application with a self signed certificate

To configure this app URL on the media toolbar we need to start the application in https. For this we need to serve the Web Application to an HTTPS Server Using a Self-Signed Certificate.

First you'll need to install a certificate in the web application directory. Then you'll configure the before_serve.js hook to do the following:
  1. Create an instance of Express to host the served web application.
  2. Set up HTTPS on the Express instance that you’ve created. To specify the HTTPS protocol, identify the location of the self-signed certificate that you placed in the application directory, and specify a password.
  3. Pass the changed Express instance and the SSL-enabled server to the JET tooling so that OJET server uses your middleware configuration rather than the ready-to-use middleware configuration provided by the Oracle JET tooling.
  4. To ensure that active reloads work when your web application is served to the HTTPS server, you’ll also create an instance of the active reload server and configure it to use SSL.

If you can’t use a certificate issued by a certificate authority, you can create your certificate (a self-signed certificate). You can use tools such as OpenSSL, Keychain Access on Mac, and the Java Development Kit’s key tool utility do this this task. For example, using the Git Bash shell that comes with Git for Windows, you can run the following command to create a self-signed certificate with the OpenSSL tool: 

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

This creates the cert.pem and key.pem files and copies the files to the project root directory.

Once you've installed the self-signed certificates in your app, you configure the script for the before_serve hook point.

Do the following:

  1. Open the AppRootDir/scripts/hooks/before_serve.js and make the following changes

    'use strict';
 
module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running before_serve hook.");
 
    // Create an instance of Express, the Node.js web app framework that Oracle
    // JET tooling uses to host the web apps that you serve using ojet serve
    const express = require("express");
 
    // Set up HTTPS
    const fs = require("fs");
    const https = require("https");
     
    // Specify the self-signed certificates. In our example, these files exist
    // in the root directory of our project.
    const key = fs.readFileSync("./key.pem");
    const cert = fs.readFileSync("./cert.pem");
    // If the self-signed certificate that you created or use requires a
    // password, specify it here:
    const passphrase = "1234";
 
    const app = express();
 
    // Pass the modified Express instance and the SSL-enabled server to the Oracle JET tooling
    configObj['express'] = app;
    configObj['urlPrefix'] = 'https';
    configObj['server'] = https.createServer({
      key: key,
      cert: cert,
      passphrase: passphrase
    }, app);
 
    // Enable the Oracle JET live reload option using its default port number so that
    // any changes you make to app code are immediately reflected in the browser after you
    // serve it
    const tinylr = require("tiny-lr");
    const lrPort = "35729";
 
    // Configure the live reload server to also use SSL
    configObj["liveReloadServer"] = tinylr({ lrPort, key, cert, passphrase });
 
    resolve(configObj);
  });
};
  2. Once you've finished these configuration steps, run the series of commands (ojet build and ojet serve, for example) that you typically run to build and serve your web app.
  3. As the certificate that you're using is a self-signed certificate rather than a certificate issued by a certificate authority, the browser that you use to access the web app displays a warning the first time that you access the web app. Acknowledge the warning and click the options that allow you to access your web app. On Google Chrome, for example, you click Advanced and Proceed to localhost (unsafe) if your web app is being served to https://localhost:8000/.

    For more information, see Serve a Web App to a HTTPS Server Using a Self-signed Certificate.

Load the application in the media toolbar of your Fusion application

See Configure the Media Toolbar.

Once you load the application in your media toolbar, sign in to your Fusion application and click the phone icon to open the media toolbar window. You can see that the media toolbar application is loaded with your application.

Verify your progress

Once you load the application in your media toolbar, sign in to your Fusion application and click the Phone icon to open the media toolbar window. You'll see that the media toolbar application is loaded with your application.

References