> ## Documentation Index
> Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI activation

> “How to activate and configure the Atoti Sign-Off UI module within an Atoti UI application, including dependency setup, environment configuration, optional server availability checks, and combining with other modules.”

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.

## Activate Atoti Sign-Off

<Warning>
  Atoti Sign-Off is only compatible with versions of Atoti UI greater than or equal to 5.2.6.
</Warning>

1. Download and set up the Atoti UI \~5.2.6 starter application.

<Info>
  See the [Atoti UI tutorial](https://docs.activeviam.com/products/atoti/ui/5.2/developer-guide/install-and-start/set-up/) on how to set up the UI.
</Info>

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

   In `package.json`:

```diff theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
"dependencies": {
+   "@activeviam/signoff-sdk": 6.2.0,
+   "@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](./ui-settings#cube-specific-module-settings):

```diff theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
+ 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:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
window.env = {
   contentServer: {
      url: "http://localhost:10010/mr-application",
      version: "6.1.0",
   },
   jwtServer: {
      url: "http://localhost:10010/mr-application",
      version: "6.1.0",
   },
   atotiServers: {
      MR: {
         url: "http://localhost:10010/mr-application",
         version: "6.1.0",
      },
      SignOff: {
         url: "http://localhost:9090",
         version: "6.1.0",
      }
   }
};
```

3. Build and run the starter, now with the Atoti Sign-Off features enabled.
   Each Atoti Business Solution comes with an `activate` function built to work seamlessly with the standard Atoti UI App. These `activate` functions accept the `configuration` object from the Atoti UI App, and mutate it to include all the features from that specific solution.

### Optional activation

In addition to this, you have the option to use the `activateIfServerIsAvailable` helper function from `@activiam/activation` (> 5.2.0) in conjunction with the `activate` function. This optional helper function will first attempt to ping the associated server before activating the solution. It can also run additional code in case the server is unreachable, using the `onServerNotReached` optional callback.

Additionally, you can provide your own call to action message to be displayed using the optional `callToActionMessage` property on `activateIfServerIsAvailable`. In particular, if you implement a specific response to the server being unavailable, the steps a user need or need not take will be different from the default call to action.

Below is an example of how to use `activateIfServerIsAvailable` alongside the `activate` function:

```javascript theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import {
  Configuration,
  ExtensionModule,
} from "@activeviam/atoti-ui-sdk";
import { activate } from "@activeviam/signoff-sdk";
import { activateIfServerIsAvailable } from "@activeviam/activation";

const extension: ExtensionModule = {
  activate: async (configuration: Configuration) => {
    await activateIfServerIsAvailable({
      configuration,
      activateFn: () => {
        activate({
         configuration,
         moduleSettings: {
          // add module settings here.
         },
        });
      },
      serverKey: "SignOff",
      onServerNotReached: () => {
        //If the server at serverKey "FRTB" is not available, this function will run.
      },
      callToActionMessage:
        "Custom error notification text to be displayed if the server is unavailable.",
    });
  }
}
```

## Configure 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`](https://docs.activeviam.com/products/atoti/ui/5.2/docs/api/types#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:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
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:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
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](./ui-settings).
* BAS settings, see [UI Components](https://docs.activeviam.com/products/tools/ui-components/5.2.16/online-help/).

## Combine 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.

<Warning>
  You can only combine solution SDKs that have an Atoti UI peer dependency greater than or equal to 5.2.6.
</Warning>

Example:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
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 });
  },
};
```