Skip to main content

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.

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

​
Activating

  1. Download and set up the latest version of the starter application. See the tutorial here.
  2. To activate , make the following changes: In package.json: 
    "dependencies": {
+   "@activeviam/{serverName}-sdk": {latestRelease},
+   "@tanstack/react-query": ^5.8.1,
...
  }
    In index.tsx: 
    + 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 server with the key ""
    These elements could refer to the same server. For example: 
    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 features enabled.

​
Configuring

The example above activates 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 “host application”. It is supplied to the activate function that modifies it to add the 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 {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 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/{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 servers, you need to pass a settings object for each of the server keys that identifies each server like so: 
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:

​
Combining with other solutions or modules

To combine multiple solutions and modules, simply repeat the steps in the combined SDK’s “Activating” section.
You can only combine solution SDKs that have an peer dependency equal to 5.1.*.
Example: 
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 });
  },
};