Extension Configuration (Fusion)

Overview

The VB Studio developer adds two pieces to your Service Center extension: the Quiq side pane, which shows the agent's conversation list, and the Quiq Service Request section, which shows the conversation linked to that SR. Both load your Quiq site inside Oracle's UI Events container.

Before You Start

1. Work in a workspace on its own branch. In your VB Studio project, open Workspaces. To start a new one, click Clone From Git, select your extension's repository, choose main as the parent branch, check New branch from selected, name the branch, and select your Fusion environment. Don't use New: it creates a separate extension and repository.

2. Add Service Center as a dependency. A new branch doesn't list Oracle's App UIs until you do. In the left navigator, open Dependencies, expand Available > Customer Experience (CX), and click the add icon next to Service Center. VB Studio adds the extensions it depends on as well.

3. Open the container page: App UIs > Customer Experience (CX) > Service Center > service > ec > container. Switch the canvas to Design before you edit.

1: Turn On the Advanced Side Pane

1. In the properties panel on the right, open the Constants tab and set showAdvancedSidePane = true

🚧

NOTE

Oracle notes that this turns off legacy side-pane customisations. Check you have none before you publish.

2: Add the Quiq Button and Styles

One action chain on the container page adds the Quiq button and the styles for both Quiq frames.

1. On the Event Listeners tab, click + Event Listener, select Lifecycle Events > vbEnter, and click Next.

2. Select Create Page Action Chain and click Finish. VB Studio names it vbEnterListener.

3. Open the action chain, switch to Code, and replace its contents with:

define([
  'vb/action/actionChain',
  'vb/action/actions',
  'vb/action/actionUtils',
], (
  ActionChain,
  Actions,
  ActionUtils
) => {
  'use strict';

  class vbEnterListener extends ActionChain {

    /**
     * @param {Object} context
     */
    async run(context) {
      const { $page, $flow, $application, $base, $extension, $constants, $variables } = context;

      $base.variables.isRightPanelCustomisationEnabled = true;

      // Quiq frame sizing, and a red ring around the Quiq button while Quiq reports pending work (icon carries quiq-pending)
      if (!document.getElementById('quiq-side-pane-style')) {
        document.head.appendChild(Object.assign(document.createElement('style'), {
          id: 'quiq-side-pane-style',
          textContent: `
            .quiq-frame { display: block; width: 100%; height: 100%; min-height: 600px; }
            .quiq-frame iframe { width: 100%; height: 100%; min-height: 600px; border: 0; }
            .quiq-pending { color: #c74634 !important; }
            :is(button, oj-button):has(.quiq-pending) {
              box-shadow: 0 0 0 2px #c74634 !important;
              border-radius: 6px;
            }`,
        }));
      }

      // Keeps Oracle's own side pane buttons and adds Quiq once
      $base.variables.sidePaneButtons = ($base.variables.sidePaneButtons || [])
        .filter(b => b.buttonId !== 'quiq-btn' && b.sectionId !== 'quiq')
        .concat([{
          buttonId: 'quiq-btn', sectionId: 'quiq', label: 'Quiq', icon: 'oj-ux-ico-chat',
          tooltip: 'Quiq Messaging', ariaText: 'Open Quiq Messaging',
          visibility: true,
        }]);
    }
  }

  return vbEnterListener;
});

4. Switch back to Design. The chain shows two Assign Variable actions with an If between them, and no errors.

🚧

NOTE

Keep buttonId = quiq-btn. Quiq uses it to open the pane and change the button icon.

Use the Code view rather than the expression editor (fx). Pasting the button list into the expression editor saves it as text, and the action chain reports an error.

VB Studio reports inline style attributes as a CSP violation, so the frame sizes are set here rather than on the frames. While an agent has unread messages, Quiq changes the button icon to a bell and adds the class quiq-pending; the last two rules color it and draw a red ring around the button.

3: Add the Quiq Side Pane

1. On the Page Designer tab, open Structure, filter for dyn, and select Advanced Side Pane Container.

2. Add a Section with ID = quiq. It must match sectionId in step 2.

3. Click Go to Designer, switch to Code, and enter:

<template id="quiq">
  <oj-cx-svc-common-ui-events-container
    url="https://YOUR_QUIQ_TENANT.goquiq.com/app/messaging/integrations/fusionLoader"
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads"
    class="quiq-frame">
  </oj-cx-svc-common-ui-events-container>
</template>

🚧

NOTE

Use oj-cx-svc-common-ui-events-container, not a plain iframe. Fusion only talks to frames this container creates. The quiq-frame class is defined in step 2.

Keep allow-same-origin and both allow-popups values. Without allow-same-origin, Quiq stays on its loading screen.

📘

NOTE

Audits reports one error for each Quiq frame: "oj-cx-svc-common-ui-events-container component is not an approved Redwood component." This is expected. The component is part of Service Center, so it isn't listed in Component Exchange and doesn't need installing, and the error isn't a Stopper.

To try clearing it, declare the component in the page JSON under imports.components: "oj-cx-svc-common-ui-events-container": { "path": "oj-cx-svc-common/ui-events-container/loader" } UNTESTED

4: Add the Quiq Service Request Section

1. In App UIs > Customer Experience (CX) > Service Center, open the Service Request details fragment cx-svc-sr-details, and in Structure select SR Detail Container.

2. Click + Section and set ID = quiqConversation.

3. Click Go to Designer, switch to Code, and enter:

<template id="quiqConversation">
  <oj-cx-svc-common-ui-events-container
    url="[[ $base.variables.SR && $base.variables.SR.SrNumber ? 'https://YOUR_QUIQ_TENANT.goquiq.com/app/messaging/integrations/oraclefusion/serviceRequest/' + $base.variables.SR.SrNumber + '?redirectTo=/app/messaging/widget/full/conversations&gotoRedirectOnNotFound=true' : '' ]]"
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads"
    class="quiq-frame">
  </oj-cx-svc-common-ui-events-container>
</template>

🚧

NOTE

The template id must be the camelCased section ID.

Quiq finds the conversation by SR number (for example SR0000000001), not the internal SR ID. The url waits for the page's SR number, so the section stays empty until the Service Request has loaded.

📘

NOTE

This shows the agent's conversation list beside the conversation. To show only the conversation, set redirectTo=/app/messaging/widget/conversation.

A Service Request with no linked conversation shows the conversation list. The agent can start a conversation there with +, and Quiq links it to that Service Request automatically.

5: Preview

Click Preview (▶) at the top right. Fusion opens on the home page with your branch's changes, marked by vbdt:preferExtensionVersion=… in the address. Keep that parameter when you go to Service Center, or the page shows the published version. If Service Center loses it, add &vbdt:preferExtensionVersion=… with the same value to the Service Center address. Each new Preview has a new value.

Check that the Quiq button shows in the side pane bar and the conversation list loads, then open a Service Request and check the Quiq section.

🚧

NOTE

Use Preview, not Live or Design mode in Page Designer. Those modes can render the container page twice.

6: Publish

Click Publish. By default, VB Studio publishes directly to your development environment (Settings > Building and Publishing, with Enable CI/CD pipeline off). If your project publishes through a CI/CD pipeline, publish as you normally would. Once published, Quiq shows for every Service Center user.