Skip to main content

UI Integration

Use 3rd party components as part of integrated tSM UI Portal, e.g.:

  • dedicated external app in tSM Menu / Frame
  • Customer detail screen from legacy application as part of tSM Customer screen
  • stock level screen from ERP system as part of service fulfillment order

tSM Widget

  • 3rd party component is registered as a custom component within tSM Form Designer. Usage is then similar to tSM native components.
  • communication between components using tSM Form Runtime
  • authentication based on JWT token, SSO (Single Sign On) or tSM Auth Object

Multiple levels of integration and supported technologies:

  • iframe - generate URL to include any external webapp
  • iframe (postMessage) - 3rd party tSM-aware application with two-way communication
  • Angular
  • React
  • Web Elements

Iframe integration​

<iframe src="https://www.example.com" width="600" height="400">
</iframe>

External pages with iframes can be inserted into a widget supporting Iframe in TSM Form Designer.

Angular integration​

Components created in Angular.

Integration of angular components can be through Typescript without additional compilation, but we support both. It can be a standalone Angular component or module.

The preferred way is:

  • Standalone Angular component (Angular version 18+)
  • Can be shared through NPM
  • TSM widget will lazily load such component

React integration​

Components created in React.

Compiled Part​

A built React component in the form of compiled scripts (can be shared through NPM):

[
    "/assets/react-app/runtime.54e36ebee261465d.js",
    "/assets/react-app/polyfills.9f973cbb3f245ea9.js",
    "/assets/react-app/main.957033f32e913221.js"
]

The component can define a set of inputs (props) and outputs (functions).

TS (TypeScript) Part​

The component can define a TypeScript library that specifies a set of inputs and outputs:

export interface ReactLibraryProps {
    myProp?: number;
    myPropChange: (counter: number) => void;
}

With this interface, an Angular application knows what inputs/outputs the compiled component has and can thus communicate with it.

Upon attach(), the React component registers (the scripts mentioned above are inserted into the DOM) with default inputs, and functions for output and subsequent communication with the component are registered.

It is recommended to keep communication with the component at a basic level.

Web Elements integration​

Web elements contain compiled source code that can be inserted into any page or framework.

[
    "/assets/react-app/styles.54e36ebee261465d.css",
    "/assets/react-app/polyfills.9f973cbb3f245ea9.js",
    "/assets/react-app/main.957033f32e913221.js"
]

Web components use custom events for outputs and properties for inputs. It is recommended to keep communication with the component at a basic level.