how-to-modify-layout.md

SCION Workbench	Projects Overview	Changelog	Contributing	Sponsoring

SCION Workbench > How To Guides > Layout

The workbench layout is a grid of parts. Parts are aligned relative to each other. A part is a stack of views. Content is displayed in views.

How to modify the workbench layout

The workbench layout can be modified using the navigate method of the WorkbenchRouter by passing a function. The router will invoke this function with the current workbench layout. The layout has methods for modifying it. The layout is immutable, so each modification creates a new instance. Use the instance for further modifications and finally return it.

The following example adds a part to the left of the main area, inserts a view and navigates it.

import {inject} from '@angular/core';
import {MAIN_AREA, WorkbenchRouter} from '@scion/workbench';

inject(WorkbenchRouter).navigate(layout => layout
  .addPart('left', {relativeTo: MAIN_AREA, align: 'left'})
  .addView('navigator', {partId: 'left'})
  .navigateView('navigator', ['path/to/view'])
  .activateView('navigator')
);

The function can call inject to get any required dependencies.