Skip to main content

Reuse native product surfaces

Native surfaces point the app shell at an existing TWL Tool module with app-scoped resource bindings. They are configuration, not copied frontend code.

Data Workspace view​

{
  key: 'inspiration',
  label: 'Inspiration',
  type: 'dataWorkspaceView',
  table: ref('dataWorkspaceTables', 'inspiration'),
  viewKey: 'gallery',
}

Documents​

{
  key: 'drafts',
  label: 'Drafts',
  type: 'document',
  documentFolder: ref('documentFolders', 'drafts'),
}

A document surface must bind exactly one document or one document folder.

Content scheduler​

{
  key: 'schedule',
  label: 'Schedule',
  type: 'contentScheduler',
  documentFolder: ref('documentFolders', 'drafts'),
  space: ref('spaces', 'root'),
}

Navigate from a custom page​

const host = createAppHostClient();

document.querySelector('[data-open-inspiration]')
  ?.addEventListener('click', () => host.navigate('inspiration'));

Only declared surface keys are valid navigation targets.