Set Up and Try UI Events Framework

In this section, you'll learn how to set up a new Customer App and integrate it into the the Fusion application application.

This section covers only a basic setup, along with an example of a basic publish operation and a subscribe to an event use case.

Here's what we'll look at:

Setting TypeScript in your third-party application.
Add UI Events Framework library to your third party application.
Load the your application in the Fusion application.
Subscribe to a Tab Change event.
Publish a Set Field Value operation.

Set Up Your Third-Party Application

This example uses TypeScript to extend the JavaScript.

Make sure the Node.Js file is installed in your local development directory. The commands mentioned (in bold) can be executed in VS Code terminal.

Create a project folder and open it in any IDE - Recommended VS Code.
Initialize an npm project and install TypeScript and HTTP-server. npm init -y
Install TypeScript transpiler and HTTP-server globally. npm install tsc http-server -g . ' http-server' is used for local deployment.

Now run Create tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "out",
    "sourceMap": false,
    "lib": ["es2015.promise","es6","ES2016","dom"]
  }
}

Now run Create main.ts.

function run(name: string) {
  console.log('Hi ', name)
}

Transpile TypeScript to JavaScript using Command: tsc -w. This creates a file main.js in the out file. (Notice that typedefinition :string in main.ts is removed in main.js).
Create a file index.html. Notice that in index.html, the main.js file is loaded from "out/" directory, which will be generated during transpile.
```
<html>
<head>
  <script src="./out/main.js"></script>
</head>
<body>
  <button onclick="run('uef')">run</button>
</body>
</html>
```

The host index.html and out/main.js and go to the hosted URL in the browser.

Add the UEF Library to Your Application

The library name is ui-events-framework-client.js

A client application can be embedded in the the Fusion application application in 4 different ways:

Load the client application in an IFrame
Custom js in-app pages
JavaScript in custom pages
Custom Component CCA

Here's an example of how you load the application in an iFrame.

You add the ui-events-framework-client.js file to the script section of index.html file.

<head>
<script src="https://static.oracle.com/cdn/ui-events-framework/libs/ui-events-framework-client.js"></script>
<script s

Load the Third-Party Application Inside the Fusion application

You use the <oj-cx-svc-common-ui-events-container> component to load external applications in the Fusion application. You install the component from Oracle Component Exchange and configure it in the Fusion application according to the instructions in the included Readme file. Its url attribute should point to the application that we've hosted locally. It can be hard coded or added through page-level variables.

Here's an example:

<oj-cx-svc-common-ui-events-container url="[[ $page.variables.url ]]"></oj-cx-svc-common-ui-events-container>

Subscribe to the Tab Change Event

Update the run() function in main.ts file with code to handle the Tab Change event. Now the code will look like the example which follows. More details are available in description of the Subscribe API in Invoke the APIs.

Add uiEventsFramework.d.ts to main.ts as shown in the following example:

/// <reference path="uiEventsFramework.d.ts"/> // Adding the type definitions for type checking
async function run () {
    // Creating an instance of UEF. This should be done only once in an app - usually during 
the app's initialization.
    const frameworkProvider: IUiEventsFrameworkProvider = await 
CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
 
    // getting global context. GlobalContext has information about......
    const globalContext: IGlobalContext = await frameworkProvider.getGlobalContext();
 
    // Currently, we can subscribe to ContextClose, ContextOpen, DataLoad, FieldValueChange, OnAfterSave, 
OnBeforeSave, TabChange, TabClose, TabOpen
    const eventRequest: IEventRequest = 
frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusTabChangeEvent');
 
    // registering a subscription in the globalContext
    globalContext.subscribe(eventRequest, (response: IEventResponse) => {
        let responseData = response as ITabChangeEventResponse;
        let tabChangeResponse: ITabChangeResponse = responseData.getResponseData();
        let currentTabContext: ITabContext = tabChangeResponse.getCurrentTab();
        let previousTabContext: ITabContext = tabChangeResponse.getPreviousTab();
        console.log(tabChangeResponse, currentTabContext, previousTabContext);
    });
}

Because the compiler is started in watch mode (tsc -w), the main.js file will be autogenerated on saving main.ts. Reload the client application by right-clicking it and selecting Reload Frame from the drop-down list.

To test go to the Fusion application home page and a service request. Keep the developer console open. Now switch the MSI tabs. The tabChangeResponse, currentTabContext, and previousTabContext details will be logged into the console on the tab switch.

Publish the Set Field Value Operation

Update the request type and subscription in the above code as given in the following example. Then, transpile the code and reload the iFrame.

async function run() {
    const frameworkProvider: IUiEventsFrameworkProvider = await 
CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appName', 'v1');
    const tabContext: ITabContext = await frameworkProvider.getTabContext();
    const recordContext: IRecordContext = await tabContext.getActiveRecord();
    const requestObject: ISetFieldValueOperationRequest = 
(frameworkProvider.requestHelper.createPublishRequest('cxEventBusSetFieldValueOperation') as 
ISetFieldValueOperationRequest);
    requestObject.field().setValue('ServiceRequest.Title', 'New Title');
    // publish event is happening here.
    // The result of the async operation is available on then(for success) and on catch ( for failure)
    recordContext.publish(requestObject).then((message) => {
        const response = message as ISetFieldValueResponse;
        console.log(response);
    }).catch((error: IErrorData) => {
        console.log(error);
    });
}