Skip to main content
Version: 20.05

Overview

Workspaces 20.05 has a unique take on configuration. We encourage the use of TypeScript to write config definitions, allowing Architects better validation, error handling, keep configruations modular and also make them extendable.

You should not have to write your config files from scratch even if you are developing a new solution. Our template comes with a set of configs that include defaults for the common use cases.

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

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 them was created with a purpose that might be close to the solution you are building.

The best way to start is by having a look at each of them, you can easily change and try a different config by changing the import in index.ts. We have included example mock data for each of the configs too, and it will be up to 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 it's 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 going to be use 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 should reload and your new config should be served.