Extending the UI integration for additional business objects

With "Oracle Fusion Applications Social Network Integration" Oracle provides a new way for social collaboration by integrating Microsoft Teams into Oracle Fusion Applications.

This software package can be downloaded from https://www.oracle.com/middleware/technologies/fusion-applications-downloads.html and already provides installation steps for a predefined set of Fusion Applications business objects.

However, the integration is not limited to those business objects, but can be extended with additional business objects by leveraging the same integration approach as for the predefined objects.

The work for this extension is split into an Oracle Integration Cloud part and an Oracle Fusion Applications UI integration part. For learning more about the Oracle Integration Cloud part refer back to the <extensibility introduction>. Make sure you implement the Oracle Integration Cloud part first as some of the outcomes like object types and object id's are needed as input for the UI integration part.

For a general understanding how the social collaboration gets integrated into the Fusion Applications UI please refer to the "Oracle Fusion Applications Social Network Integration Installation Guide" in the software package above (especially the chapters "Installation in Fusion Cloud Applications", "Page Composer Customizations" and "Application Composer Based Objects").

The rest of this blog will concentrate on specific details on how to extend the UI integration for additional business objects.

Identifying the Fusion Applications UI integration type

There are two extensibility tools which Fusion Applications (FA) provide for the UI extension purpose:

• Application Composer
• Page Composer

Some FA pages get extended with Application Composer, other pages get extended with Page Composer.

To identify which tool to use first check if the business object is enabled in Application Composer. Only if it doesn't exist there use Page Composer. If you attempt to add Page Composer-enabled configurations to existing Application Composer-enabled pages, such configurations can break during an update.

Embedding the social collaboration UI via Application Composer

Overall the same Application Composer integration approach as described in the installation guide is used for extensibility.

Additional notes:

1. Registering a new web application in "Mashup Content" is not needed as the web application already exists.
2. Create a new "Mashup Content" subtab in the additional business object's details page.

The Groovy script to be added for this subtab looks like

return "/ic/builder/rt/FusionCollaboration/live/webApps/fusioncollaborationui/?fusionObjectType=<OBJECT_TYPE>&fusionObjectId=" + <OBJECT_ID>

<OBJECT_TYPE> needs to be replaced with the object type defined in the Oracle Integration Cloud part.

<OBJECT_ID> needs to be replaced with the name of the object field expected as the object identifier by the Oracle Integration Cloud part.

Embedding the social collaboration UI via Page Composer

Again, overall the same Page Composer integration approach as described in the installation guide is used for extensibility.

Additional notes:

1. The following code snippet can be used as a starting HTML code template for the "HTML Markup" component within the business object's page. It contains everything needed for extending the "Microsoft Teams" integration for a new FA business object: a "Microsoft Teams" button, the social collaboration popup sidebar and CSS styling information for both HTML elements:

<div class="msteamsbutton">
  <a class="msteamslink" onclick="openFASNI('<OBJECT_TYPE>','<OBJECT_ID>')>
    Microsoft Teams
  </a>
</div>

<OBJECT_TYPE> needs to be replaced with the object type defined in the Oracle Integration Cloud part.

<OBJECT_ID> needs to be replaced with the Page Composer expression for the object field expected as the object identifier by the Oracle Integration Cloud part (ie. '#{bindings.RequisitionHeaderId.inputValue}').

Available object fields and the corresponding Page Composer expression can be found in the Expression Editor within the "HTML Markup" component. Here some navigations hints how to get there:

1. Open Page Composer on the related page
2. Open the Component properties of the "HTML Markup" component created for the integration
3. Open the popup menu on the right side of the "Value" field
4. Open Expression Builder

5. The Expression Editor dialog shows you all available object fields as "Binding Parameters". When selecting one of the fields the associated Page Composer expression also shows beneath it.

Please note:

1. Dependent on the specific location of the "Microsoft Teams" button on the page it might be necessary to use a new CSS styling classes to properly display the button. As a web developer use the browser's developer tool to find out how to adjust the CSS styling for the button. New styling classes can be added in the fasni.css file hosted by the "FusionCollaborationJS" VB app (see section 'Adding new CSS styling class for the "Microsoft Teams" button' below). Afterwards change the CSS classes of the <div> or <a> tags appropiately.
2. In case the appropriate object field is not exposed as a binding parameter it might be necessary to implement some sort of HTML screen scraping logic for more complicated id lookups (see section 'Deploying more extensive Javascript code' below).

(Optional) Adding new CSS styling classes for the "Microsoft Teams" button in the integration's VB application

In case you need a different CSS styling for the "Microsoft Teams" button to properly display the button you can add new CSS classes to the already existing fasni.css file in the Resources/css folder of the Oracle Visual Builder application "FusionCollaborationJS".

Steps to deploy new CSS styling classes in the Oracle Visual Builder application "FusionCollaborationJS":

1. Prepare the "FusionCollaborationJS" VB application for changes
   1. 1. Go to your Visual Builder Cloud Service instance using your VB developer credentials
      2. Create a new version of the "FusionCollaborationJS" VB application
2. Add your new CSS classes to the Resources/js/fasni.css file within the "FusionCollaborationJS" VB application
3. Publish your changes
   1. 1. Stage and publish the new application version
      2. Afterwards update the application version number in the URL of the javascript <script> and css <link> tags referenced by the "HTML Markup" component in the Global Page Template.

Please be aware that every time you publish a new application version Visual Builder creates a new version number which needs to be updated in the Global Page Template. You can easily look up this version number in the UI of the "FusionCollaborationJS" VB application (for this see also "Installing Global Tenmplate" in the installation guide).

(Optional) Deploying more extensive Javascript code in the integration's VB application

In case you need more extensive Javascript code it might be appropriate to externalize the code. The fasni.js file in the Resources/js folder of the Oracle Visual Builder application "FusionCollaborationJS" already provides this externalization mechanism and additional javascript functions can be added to this file. The code can then be called as a global function from within the "HTML Markup" components. fasni.js is also included in the software package for your reference under src/fa/fasni.js.

Steps to deploy new javascript code in the Oracle Visual Builder application "FusionCollaborationJS":

1. Prepare the "FusionCollaborationJS" VB application for changes
   1. 1. Go to your Visual Builder Cloud Service instance using your VB developer credentials
      2. Create a new version of the "FusionCollaborationJS" VB application
2. Add your new javascript function to the Resources/js/fasni.js file within the "FusionCollaborationJS" VB application ie.

const myExternalizedLogic = function(param1, param2) {
  // place any more extensive Javascript code here
  // this function can be called ie. in a click handler within a "HTML Markup" component as myExternalizedLogic(param1, param2)
}

3. Publish your changes
   1. 1. Stage and publish the new application version
      2. Afterwards update the application version number in the URL of the javascript <script> and css <link> tags referenced by the "HTML Markup" component in the Global Page Template.

Please be aware that every time you publish a new application version Visual Builder creates a new version number which needs to be updated in the Global Page Template. You can easily look up this version number in the UI of the "FusionCollaborationJS" VB application (for this see also "Installing Global Tenmplate" in the installation guide).

If you're done with the Application Composer or Page Composer configuration for your additional business objects publish the Fusion Applications sandbox.