TypeScript screen extensions

Add behaviour to platform screens without changing the platform.

Version

A screen extension is a TypeScript class stored with the screen. The runtime compiles it in the browser and calls its lifecycle methods.

Method	When
`beforeFormLoad`	Before the form definition is rendered
`afterFormLoad`	After the form is rendered
`processSubmissionBeforeAssign`	Before loaded data is assigned to the form
`onBeforeSubmit` / `onAfterSubmit`	Around saving
`onChange`	When a value changes
`onCustomEvent`	When a component raises a custom event
`onScreenDestroy`	When the screen closes

Helpers refresh, refreshForm and refreshSubmission redraw the form or its data. Extensions call the platform through TabSdk: records and saved queries, dialogs and navigation, statuses and workflows, files, reports and notifications.

vendor-screen.extension.ts

export class VendorScreenExtension extends IScreenExtensionBaseClass {
  onAfterSubmit(screenParameters: any) {
    TabSdk.ui.showSuccess('Vendor saved');
  }
}

Grids, kanban boards, tree views, image uploaders and the sign-in screen have their own extension points.

Screen extensions in TypeScript

A screen extension is a class that extends the web app's IScreenExtensionBaseClass and overrides the lifecycle methods it needs: beforeFormLoad, afterFormLoad, onChange, onBeforeSubmit, onAfterSubmit, onCustomEvent and others. The base class is already in scope in the web app, so the script imports nothing.

Screen extension

class _Invoice_Detail_Screen extends IScreenExtensionBaseClass {
  beforeFormLoad(screenParameters: any) {
    // Adjust the form definition here, then hand it back to render.
    screenParameters.event.callback(screenParameters.event.form);
  }

  onBeforeSubmit(screenParameters: any) {
    // Validate or reshape the submission, then let it continue.
    screenParameters?.event?.callback(null, screenParameters?.event);
  }
}

Methods that receive an event call its callback to let the screen continue, as the base class does by default. TAF Studio can run these scripts under a debugger with breakpoints; see Scripts and debugging.