UI Activation

Each UI project is designed as an extension of the Atoti UI “host application”. This section explains how you can easily combine these extensions into a running Atoti Sign-Off application.

Activating Atoti Sign-Off

1. Download and set up the Atoti UI 5.2.x starter application.
   

   info

   See the Atoti UI tutorial on how to set up the UI.

2. To activate Atoti Sign-Off, make the following changes:

   In package.json:

   "dependencies": {
   +   "@activeviam/signoff-sdk": 5.3.1,
   +   "@tanstack/react-query": ^5.8.1,
    ...
     }
   

   In index.tsx, import and use the activate function, including the Cube-specific and Atoti Sign-Off module settings:

   + import { activate } from "@activeviam/signoff-sdk";
   
   const extension: ExtensionModule = {
     activate: async (configuration) => {
       ...
   +   activate({
   +     configuration,
   +     moduleSettings: {
   +      // add module settings here.
   +     },
        });
     }
   }
   

   In env.development.js and env.production.js, ensure the following exist:

   • A server used as the Content Server
   • An Atoti Sign-Off server with the key “SignOff”
   • All other application servers with their respective keys

   Here is an example of the Atoti Sign-Off module being configured with a Market Risk application server:

   window.env = {
     contentServerVersion: "5.3.1",
     contentServerUrl: "http://localhost:10010/mr-application",
     activePivotServers: {
       MR: {
         url: "http://localhost:10010/mr-application",
         version: "5.3.1",
       },
       SignOff: {
         url: "http://localhost:9090",
         version: "5.3.1",
       },
     },
   };
   

3. Build and run the starter, now with the Atoti Sign-Off features enabled.

Configuring Atoti Sign-Off

The example above activates Atoti Sign-Off with a default configuration and default settings. Here’s how to modify them.

Change the configuration

The configuration parameter is the entry-point to configuring the Atoti UI “host application”. It is supplied to the activate function that modifies it to add the Atoti Sign-Off features. If you want to make changes like adding or removing a plugin, changing the application’s title or adding an HOC, you can modify the configuration object after invoking activate.

For example:

const extension: ExtensionModule = {
  activate: async (configuration) => {
    // default application name
    configuration.applicationName = "AtotiUI";
     ...
    // changes the application name to Atoti Sign-Off
    activate({
       configuration,
       moduleSettings: {
        // module settings go here
       },
    });
    // Customized application name
    configuration.applicationName = "My Atoti Sign-Off";
  },
};

Change the settings

In addition to the required moduleSettings, the activate function accepts an optional settings and basSettings argument to let you configure the Atoti Sign-Off features and the BAS features respectively. You can use the default values exported from the SDK as an override basis:

import { activate, settings, basSettings } from "@activeviam/signoff-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    ...
    activate({
      configuration,
      moduleSettings: {
        // module settings go here
      },
      settings: {
        ...settings,
        ...{
          // customize here
        }
      },
      basSettings: {
        ...basSettings,
        ...{
          // customize here
        }
      }
    });
  },
};

For more information:

• Atoti Sign-Off settings, see UI settings.
• BAS settings, see UI Components.

Combining Atoti Sign-Off with other solutions or modules

To combine multiple solutions and modules, simply repeat the steps in the combined SDK’s “Activating” section.

Example:

import { activate as signoffActivate } from "@activeviam/signoff-sdk";
import { activate as mrActivate } from "@activeviam/mr-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    ...
    signoffActivate(
      configuration,
      moduleSettings: {
        // module settings go here
      }
    );
    mrActivate({ configuration });
  },
};