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

export const uiProductName = "Atoti UI";

export const serverNameCaps = "FRTB";

export const serverName = "frtb";

export const productName = "Atoti FRTB";

export const latestRelease = "6.0.9";

export const combinedUiName = "mr";

export const applicationServerUrl = "http://localhost:8080/frtb-starter";

Each UI project is designed as an extension of the {uiProductName} "host application". This section explains how you can easily combine these extensions into a running {productName} application.

## Activating {productName}

1. Download and set up the latest version of the {uiProductName} starter application. See the {uiProductName} tutorial [here](https://docs.activeviam.com/products/atoti/ui/5.2/developer-guide/install-and-start/set-up/).

2. To activate {productName}, make the following changes:

   In `package.json`:

   ```diff theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
   "dependencies": {
   +   "@activeviam/{serverName}-sdk": {latestRelease},
   +   "@tanstack/react-query": ^5.8.1,
   ...
     }
   ```

   In `index.tsx`:

   ```diff theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
   + import { activate } from "@activeviam/{serverName}-sdk";

   const extension: ExtensionModule = {
     activate: async (configuration) => {
       ...
   +    activate({configuration});
     }
   }
   ```

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

   * A server used as the Content Server
   * An {productName} server with the key "{serverNameCaps}"

   These elements could refer to the same server. For example:

   ```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
   window.env = {
     contentServerVersion: "5.10.0",
     contentServerUrl: "{applicationServerUrl}",
     activePivotServers: {
   {serverNameCaps}: {
     url: "{applicationServerUrl}",
     version: "5.10.0",
       },
     },
   };
   ```

3. Build and run the starter, now with the {productName} features enabled.

## Configuring {productName}

The example above activates {productName} 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 {uiProductName} "host application". It is supplied to the `activate` function that modifies it to add the {productName} 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 {productName}
    activate({configuration});
    // Customized application name
    configuration.applicationName = "My {productName}";
  },
};
```

### Change the settings

The `activate` function accepts a `settings` and a `basSettings` argument to let you configure the {productName} 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/{serverName}-sdk";

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

When the UI is connecting to several {productName} servers, you need to pass a `settings` object for each of the server keys that identifies each server like so:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import { activate, settings, basSettings } from "@activeviam/{serverName}-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    ...
    activate({
      configuration,
      settings: {
          {serverNameCaps}1: settings,
          {serverNameCaps}2: settings,
          {serverNameCaps}3: {
          ...settings,
          ...{
            // customize here
          }
      },
      basSettings: {
        ...basSettings,
        ...{
          // customize here
        }
      }
    });
  },
};

```

You can also use this notation if you wish to use a different server key than the default "FRTB" when using a single instance.
For more information:

* {productName} settings, see [UI settings](./ui-settings).
* BAS settings, see [UI Components](https://docs.activeviam.com/products/tools/ui-components/5.2.11/online-help/).

## Combining {productName} 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 {uiProductName} peer dependency equal to 5.1.\*.
</Warning>

Example:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import { activate as {serverName}Activate } from "@activeviam/{serverName}-sdk";
import { activate as {combinedUiName}Activate } from "@activeviam/{combinedUiName}-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    ...
    {serverName}Activate({ configuration });
    {combinedUiName}Activate({ configuration });
  },
};
```