Skip to main content

Version: 22.10

Space Configuration

Journey Workspaces takes a bespoke approach to configuration. We encourage the use of TypeScript to write config definitions, providing architects with better validation and error handling, while keeping configurations modular and making them extendable.

The example application template comes with a set of configs that include default values for common use cases, so you don't need to start from scratch when creating your config files even if you are developing a new solution. Nevertheless, it can be helpful to have a high-level understanding of how the configurations are designed and implemented.

Keeping a well maintained configs folder makes it easier for you to modify, extend and upgrade your Journey Workspaces solution.

Structure and Usage​

Inside each sub-folder under src/configs there is an index.ts that imports all the other files in the folder. The example below imports the global config and several space configs. The space configs don't need to be imported using the names shown in the example, but whatever names you use will be the names of the spaces in the app.

src/configs/custom/index.ts
import global from './global';
import manage from './manage';
import process from './process';
import helpdesk from './helpdesk';
import assistedChannel from './assistedChannel';

const spaces = [process, helpdesk, assistedChannel, manage];

export default {
  global,
  spaces,
};

Grouped Spaces​

Spaces can be nested one level deep. In this case, the parent acts simply as a container for its child spaces. An example config with nested spaces is shown below.

src/configs/custom/index.ts
import global from './global';
import manage from './manage';
import business from './business';
import lending from './lending';
import helpdesk from './helpdesk';
import assistedChannel from './assistedChannel';

const spaces = [
  {
    label: 'Process',
    icon: 'BallotOutlined'
    properties: [business, lending],
  },
  helpdesk,
  assistedChannel,
  manage
];

export default {
  global,
  spaces
};

In this example, process, helpdesk, assistedChannel, and manage will appear in the side navigation bar as expected, but the business and lending spaces will be available to choose in a select dropdown under the process space.

note

Permissions can be set on the parent as well as the child space using the existing permissions framework. Failing the permission on the parent hides the element from the side navigation bar.

All exports are lowercase, representing the space IDs to be used by global.ts in its spaces configuration. The global export is the only mandatory export. To learn more about config definitions, see Global Configuration and Current Space Configuration.

Once you have decided what config and fixture best suit your needs, it's time to copy them and create new folders called src/configs/custom and src/fixtures/custom, and import them inside src/index.ts. Your browser will reload, serving your new config.

In this topic