Skip to main content

Version: 20.05 (EOL)

Workspaces Configuration Overview

Workspaces 20.05 has a unique take on configuration. We encourage the use of TypeScript to write config definitions, providing advantages such as allowing better validation (for Architects), error handling, and maintaining modular configurations that are more easy to extend.

We provide a set of templates that come with configs that include defaults for common use cases. This means you don't have to write your config files from scratch even if you are developing a new solution.

However, it can be helpful if you have a high-level understanding of how the configurations are designed and implemented.

info

Keeping a well-maintained configs folder will help you to keep Workspaces easy to modify, easy to extend and easy to upgrade.

Structure and usage​

Our src/index.ts is the entry point of our Form app, and it's where we load the configs we want Workspaces to use. The Workspaces template comes with three configs out of the box: default, development and springboard. Each of these was created to accomodate a common purpose, and one of these might be close to the solution you are building.

A great way to start is to review each of the template configs to see if one of them fits your needs. You can easily try out different template configs by changing the import in index.ts. We have included example mock data for each of the configs too, to help you to decide what works best for you.

Let's review the following example to see how Workspaces configuration works.

src/index.ts
import 'dayjs/locale/en';
import App from '@transact-open-ux/workspaces/dist/App';
import configs from './configs/default';
import messages from './locales/en';

const root = document.getElementById('root');

export default async function init() {
  if (process.env.NODE_ENV === 'development') {
    const { default: fixtures } = await import('./fixtures/default');
    const { default: makeServer } = await import('@transact-open-ux/workspaces/dist/Server');
    // start server
    makeServer({
      fixtures,
    });
  }
  // start only the cleint if production
  App(root, configs, messages, 'en');
}

init();

Inside each sub-folder under src/configs, there is an index.ts that imports all the other files in the folder. This is our root config, and its purpose is to export only the spaces config that we want to use.

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,
};

All exports are lowercase and they represent the space Id that's used by global.ts in its spaces configuration. Note that the global export is the only mandatory export; the others represent different spaces, so names can vary depending on the solution. 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 and your new config is served.

In this topic