From 3abdf8fbe4af69a233bca1fb2527b4fc8181c5dd Mon Sep 17 00:00:00 2001 From: Jonathan Diehl <1334574+jdiehl@users.noreply.github.co> Date: Fri, 19 Jun 2026 10:16:50 +0000 Subject: [PATCH 1/5] Document Mendix inside Teamcenter (public Beta, 11.12) --- .../refguide/runtime/mendix-client/_index.md | 2 + .../mendix-client/mendix-inside-teamcenter.md | 205 ++++++++++++++++++ 2 files changed, 207 insertions(+) create mode 100644 content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md diff --git a/content/en/docs/refguide/runtime/mendix-client/_index.md b/content/en/docs/refguide/runtime/mendix-client/_index.md index c7fafd036a0..47973660a81 100644 --- a/content/en/docs/refguide/runtime/mendix-client/_index.md +++ b/content/en/docs/refguide/runtime/mendix-client/_index.md @@ -19,6 +19,8 @@ The React client replaces [Dojo](https://dojotoolkit.org/) with [React](https:// Other components of the Mendix Client are the same in both the React and Dojo client. See [Mendix React Client](/refguide/mendix-client/react/) for more information. {{% /alert %}} +For information about embedding a Mendix web app as a native component inside Siemens Teamcenter Active Workspace, see [Mendix inside Teamcenter](/refguide/mendix-client/mendix-inside-teamcenter/). + ## Description {#description} The Mendix Client is a part of every application built with Mendix: both web and mobile. diff --git a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md new file mode 100644 index 00000000000..459b1bdf64b --- /dev/null +++ b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md @@ -0,0 +1,205 @@ +--- +title: "Mendix inside Teamcenter" +url: /refguide/mendix-client/mendix-inside-teamcenter/ +description: "Describes how to embed a Mendix web app as a native component inside Siemens Teamcenter Active Workspace using the embedded client." +weight: 40 +beta: true +--- + +## Introduction + +Mendix inside Teamcenter lets you embed a Mendix web app as a native component inside Siemens Teamcenter Active Workspace (AWC). The Mendix app runs directly in the AWC page as a micro-frontend using the [Embedded Client](/refguide/mendix-client/embedding-the-client/) feature. + +This integration requires the [Teamcenter Connector](/appstore/modules/siemens-plm/teamcenter-connector/) to connect the Mendix app to Teamcenter data and to handle authentication. + +{{% alert color="info" %}} +Mendix inside Teamcenter is in public Beta. See the [prerequisites](#prerequisites) for required versions. +{{% /alert %}} + +## Prerequisites {#prerequisites} + +The following versions are required: + +| | Mendix | Teamcenter | Teamcenter Connector | +| --- | --- | --- | --- | +| **Beta** | 11.12 | 2512 | 2512.1.0 or above | +| **GA (planned)** | 11.18 | 2612 | TBD | + +In addition, the following requirements must be met: + +* The Teamcenter Active Workspace instance is customizable and can be rebuilt and redeployed. +* The Teamcenter Content Security Policy (CSP) is configurable. +* The Mendix app is registered with the identity provider used by Teamcenter Security Services (TcSS). +* The browser allows cross-site cookies for the Mendix domain. This can be configured per-domain via organization policy (for example, using Intune). +* There is bidirectional network connectivity between the user's browser and both the Mendix runtime and the Teamcenter server. + +For Teamcenter Connector prerequisites, see [Teamcenter Connector](/appstore/modules/siemens-plm/teamcenter-connector/). + +## Setting Up the Mendix App + +### Adding an Embedded Navigation Profile + +The Mendix app must have an Embedded navigation profile. When this profile exists, the Mendix runtime exposes the `/dist/embedded-index.js` bundle that Active Workspace loads. + +To add an Embedded navigation profile: + +1. In Studio Pro, go to **App** > **Navigation**. +2. Click **Add navigation profile**. +3. Select **Embedded** and click **OK**. +4. Configure the **Default home page** for the embedded app. + +For more information about navigation profiles, see [Setting Up the Navigation Structure](/refguide/setting-up-the-navigation-structure/). + +### Configuring CORS + +The Mendix app must allow cross-origin requests from Active Workspace, because the browser loads the Mendix client bundle from the Mendix runtime origin while the page is served from the Teamcenter origin. + +Configure the following [custom runtime settings](/refguide/custom-settings/). Replace `https://your-teamcenter.example.com` with the actual origin of your Active Workspace deployment, including scheme and port if applicable. + +#### Runtime Settings + +| Name | Value | +| --- | --- | +| `com.mendix.core.SameSiteCookies` | `None` | + +#### Custom HTTP Response Headers + +| Header | Value | +| --- | --- | +| `Access-Control-Allow-Credentials` | `true` | +| `Access-Control-Allow-Headers` | `Content-Type, x-csrf-token` | +| `Access-Control-Allow-Methods` | `POST, GET, OPTIONS` | +| `Access-Control-Allow-Origin` | `https://your-teamcenter.example.com` | + +{{% alert color="info" %}} +Both the Mendix runtime and the Active Workspace server must be served over HTTPS. When `SameSiteCookies` is set to `None`, the `Secure` attribute is automatically added to cookies, which requires HTTPS on both origins. +{{% /alert %}} + +Restart the Mendix app after changing these settings. For background on how CORS works in the Mendix runtime, see [Configuring CORS](/refguide/configure-cors/). + +## Installing the Mendix Component in Active Workspace + +The Mendix-inside-Teamcenter AWC component (`MendixEmbedded`) is a custom Active Workspace web component that loads the Mendix embedded client bundle and mounts the Mendix app inside the AWC page. + +### Adding the Component to Active Workspace + +1. Obtain the `MendixEmbedded` component from [GitHub](TBD). +2. Install the component into your Active Workspace stage repository under `src/repo`. +3. Configure the component with the URL of your Mendix runtime. +4. Optionally, set up context passing. For more information, see [Passing Context from Teamcenter](#passing-context). +5. Rebuild Active Workspace. + +To verify the component was picked up correctly, check that its view model entry exists in the `pathMap.json` registry file in the build output. + +### Registering the Component on a Page + +To display the Mendix app on an Active Workspace page, add a card definition for it to the relevant `layoutsViewModel.json` file in your AWC stage repository. Set `declarativeKeyContext` to the URL of your Mendix runtime: + +```json +"Mendix": { + "title": "Mendix", + "view": "MendixEmbedded", + "anchor": "", + "props": { + "subPanelContext": { + "declarativeKeyContext": "https://your-mendix-runtime.example.com" + } + } +} +``` + +Add `"Mendix"` to the relevant layout handler grid and rebuild Active Workspace. If the Mendix card does not appear after rebuilding, clear the browser cache to ensure the new chunk is loaded. + +Detailed AWC customization and build steps are outside the scope of this documentation. Refer to the Siemens Active Workspace documentation for instructions. + +## Configuring the Content Security Policy in Teamcenter + +Active Workspace enforces a Content Security Policy that must be updated to allow Mendix content to load. + +In your Teamcenter gateway configuration (`gateway/config.json`), add the Mendix runtime URL to the following directives: + +* `script-src` +* `script-src-elem` +* `font-src` +* `connect-src` +* `img-src` +* `style-src` + +Use the browser console CSP errors to identify any additional directives that still need the Mendix origin for your specific setup. + +After updating the CSP, restart the Teamcenter Process Manager for the changes to take effect. + +{{% alert color="warning" %}} +If Teamcenter returns `HTTP 401 Unauthorized` with a JWT signature error after restarting the Process Manager, restart the entire Teamcenter server. +{{% /alert %}} + +## Configuring Authentication {#authentication} + +During Beta, authentication uses the Teamcenter Connector's Teamcenter SSO flow. The Mendix app login page shows an SSO button. When a user clicks it, they are redirected to Teamcenter Security Services (TcSS) for authentication. After a successful login, TcSS redirects back to the Mendix app, where the user is provisioned or matched to an existing Mendix account and a Teamcenter Connector session is established. + +{{% alert color="info" %}} +Because the Mendix app runs inside Active Workspace, the SSO redirect opens in a popup window. The popup can be automated to require zero additional clicks after the user is already signed in to TcSS. The planned GA release targets a fully invisible authentication flow with no popup. +{{% /alert %}} + +Follow these steps to configure authentication. Steps 1–3 require Teamcenter administrator access. + +1. **Register the Mendix App with Teamcenter Security Services**: + + Register the Mendix app in the Teamcenter Deployment Center so TcSS can authenticate it. For instructions, see [Registering Your App for Teamcenter SSO](/appstore/modules/siemens-plm/configuring-connection-2512/#register-your-app-for-teamcenter-sso). + +1. **Configure the Teamcenter Connector Connection**: + + In your Mendix app, configure a Teamcenter Connector connection using **Teamcenter SSO** as the authentication method. For instructions, see [Configuring the Connection to Teamcenter](/appstore/modules/siemens-plm/configuring-connection-2512/). + +1. **Configure User Provisioning**: + + Set up user provisioning so that Mendix accounts are matched to Teamcenter users on login. For instructions, see [User Provisioning for SSO](/appstore/modules/siemens-plm/configuring-connection-2512/#user-provisioning-for-sso). + +1. **Add an SSO Login Button to the Login Page**: + + Add a Teamcenter SSO login button to the Mendix app's `login.html` so users can initiate the TcSS authentication flow. For instructions, see [Adding an SSO Login Button to Your Login Page](/appstore/modules/siemens-plm/configuring-connection-2512/#add-sso-login-button). Optionally, use JavaScript to trigger the authentication automatically. Note that browsers may block the popup unless it is triggered directly by a user action. + +## Passing Context from Teamcenter {#passing-context} + +The `MendixEmbedded` AWC component passes Teamcenter object context to the Mendix app as startup parameters. These are configured in the AWC component and forwarded to the Mendix `render()` call as the `parameters` object. + +The following example shows how the AWC component passes a selected Teamcenter item UID to the Mendix app: + +```js +const MENDIX_URL = "https://your-mendix-runtime.example.com/"; + +export async function mountMendixInTeamcenter(container, tcContext) { + const embeddedModule = await import(`${MENDIX_URL}dist/embedded-index.js`); + return embeddedModule.render(container, { + remoteUrl: MENDIX_URL, + minHeight: "620px", + parameters: { + itemUID: tcContext.selected.uid + } + }); +} +``` + +The `parameters` object is available to the Mendix app at startup. Use a JavaScript action on the home page to read parameters and pass them to your application logic. + +For the full `render()` API, see [Embedding the Client](/refguide/mendix-client/embedding-the-client/). + +### Best Practices for Context Parameters + +* **Use persistable object IDs only.** Pass Item UIDs or ItemRevision UIDs. These are stable and unique across sessions. +* **Avoid non-persistable IDs.** BOM line IDs are runtime calculation results that lose synchronization when Teamcenter configuration rules change. Do not use them as parameters. +* **Prefer Item IDs over ItemRevision IDs** where possible. Item IDs are context-independent and do not depend on the revision rule in effect. +* **Discover available parameters** by referring to the Active Workspace documentation for a list of available context parameters. + +## Known Limitations (Beta) + +* **Cross-site cookies:** The browser must allow cross-site cookies for the Mendix domain. This is required because the Mendix app runs on a different origin than Active Workspace. Configure this per-domain via organization policy (for example, Intune). +* **Authentication popup:** During Beta, the Teamcenter Connector SSO flow opens a popup window. This can be automated to require zero additional clicks after the user is already authenticated with TcSS. +* **Optional parameters fallback:** If an optional startup parameter is omitted, the embedded client shows the fallback page rather than using the parameter's default value. This is a known limitation of the embedded client. See [Embedding the Client](/refguide/mendix-client/embedding-the-client/). + +## Read More + +* [Embedding the Client](/refguide/mendix-client/embedding-the-client/) +* [Teamcenter Connector](/appstore/modules/siemens-plm/teamcenter-connector/) +* [Setting Up the Navigation Structure](/refguide/setting-up-the-navigation-structure/) +* [Configure CORS](/refguide/configure-cors/) From 4b0e8835086dda98b631e711d36bc24458f2a635 Mon Sep 17 00:00:00 2001 From: MarkvanMents Date: Fri, 26 Jun 2026 15:52:27 +0200 Subject: [PATCH 2/5] Small Prrofread --- .../refguide/runtime/mendix-client/_index.md | 2 +- .../mendix-client/mendix-inside-teamcenter.md | 36 ++++++++++--------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/content/en/docs/refguide/runtime/mendix-client/_index.md b/content/en/docs/refguide/runtime/mendix-client/_index.md index 47973660a81..4c4bddd76e9 100644 --- a/content/en/docs/refguide/runtime/mendix-client/_index.md +++ b/content/en/docs/refguide/runtime/mendix-client/_index.md @@ -19,7 +19,7 @@ The React client replaces [Dojo](https://dojotoolkit.org/) with [React](https:// Other components of the Mendix Client are the same in both the React and Dojo client. See [Mendix React Client](/refguide/mendix-client/react/) for more information. {{% /alert %}} -For information about embedding a Mendix web app as a native component inside Siemens Teamcenter Active Workspace, see [Mendix inside Teamcenter](/refguide/mendix-client/mendix-inside-teamcenter/). +For information about embedding a Mendix web app as a native component inside Siemens Teamcenter Active Workspace, see [Mendix Inside Teamcenter](/refguide/mendix-client/mendix-inside-teamcenter/). This requires you to be using Mendix version 11.12.0 or above. ## Description {#description} diff --git a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md index 459b1bdf64b..3b250769c02 100644 --- a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md +++ b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md @@ -1,5 +1,5 @@ --- -title: "Mendix inside Teamcenter" +title: "Mendix Inside Teamcenter" url: /refguide/mendix-client/mendix-inside-teamcenter/ description: "Describes how to embed a Mendix web app as a native component inside Siemens Teamcenter Active Workspace using the embedded client." weight: 40 @@ -8,14 +8,14 @@ beta: true ## Introduction -Mendix inside Teamcenter lets you embed a Mendix web app as a native component inside Siemens Teamcenter Active Workspace (AWC). The Mendix app runs directly in the AWC page as a micro-frontend using the [Embedded Client](/refguide/mendix-client/embedding-the-client/) feature. - -This integration requires the [Teamcenter Connector](/appstore/modules/siemens-plm/teamcenter-connector/) to connect the Mendix app to Teamcenter data and to handle authentication. - {{% alert color="info" %}} -Mendix inside Teamcenter is in public Beta. See the [prerequisites](#prerequisites) for required versions. +Mendix inside Teamcenter is available in Mendix version 11.12.0 and above and is currently in public Beta. See the [prerequisites](#prerequisites) for more version requirements. {{% /alert %}} +Mendix inside Teamcenter lets you embed a Mendix web app as a native component inside Siemens Teamcenter Active Workspace. The Mendix app runs directly in the Active Workspace page as a micro-frontend using the [Embedded Client](/refguide/mendix-client/embedding-the-client/) feature. + +This integration requires the [Teamcenter Connector](/appstore/modules/siemens-plm/teamcenter-connector/) to connect the Mendix app to Teamcenter data and to handle authentication. + ## Prerequisites {#prerequisites} The following versions are required: @@ -48,22 +48,26 @@ To add an Embedded navigation profile: 3. Select **Embedded** and click **OK**. 4. Configure the **Default home page** for the embedded app. -For more information about navigation profiles, see [Setting Up the Navigation Structure](/refguide/setting-up-the-navigation-structure/). +For more information about navigation profiles, see [Setting Up Navigation](/refguide/setting-up-the-navigation-structure/). + +### Configuring Cross-Origin Resource Sharing (CORS) -### Configuring CORS +The Mendix app must allow cross-origin resource sharing (CORS) from Active Workspace. This allows the browser to load the Mendix client bundle from the Mendix runtime origin from a page that is served from the Teamcenter origin. You will need to set up the following: -The Mendix app must allow cross-origin requests from Active Workspace, because the browser loads the Mendix client bundle from the Mendix runtime origin while the page is served from the Teamcenter origin. -Configure the following [custom runtime settings](/refguide/custom-settings/). Replace `https://your-teamcenter.example.com` with the actual origin of your Active Workspace deployment, including scheme and port if applicable. #### Runtime Settings +Configure the following [custom runtime setting](/refguide/custom-settings/). + | Name | Value | | --- | --- | | `com.mendix.core.SameSiteCookies` | `None` | #### Custom HTTP Response Headers +Configure the following HTTP Response Headers in your [local runtime configuration](/refguide/configurations-tab/#headers) or your cloud environment. Replace `https://your-teamcenter.example.com` with the actual origin of your Active Workspace deployment, including scheme and port if applicable. + | Header | Value | | --- | --- | | `Access-Control-Allow-Credentials` | `true` | @@ -75,11 +79,11 @@ Configure the following [custom runtime settings](/refguide/custom-settings/). R Both the Mendix runtime and the Active Workspace server must be served over HTTPS. When `SameSiteCookies` is set to `None`, the `Secure` attribute is automatically added to cookies, which requires HTTPS on both origins. {{% /alert %}} -Restart the Mendix app after changing these settings. For background on how CORS works in the Mendix runtime, see [Configuring CORS](/refguide/configure-cors/). +Restart the Mendix app after changing these settings. For background on how CORS works in the Mendix runtime, see [Configuring CORS in the Mendix Runtime](https://docs.mendix.com/refguide/configure-cors/). ## Installing the Mendix Component in Active Workspace -The Mendix-inside-Teamcenter AWC component (`MendixEmbedded`) is a custom Active Workspace web component that loads the Mendix embedded client bundle and mounts the Mendix app inside the AWC page. +The Mendix-inside-Teamcenter Active Workspace component (`MendixEmbedded`) is a custom Active Workspace web component that loads the Mendix embedded client bundle and mounts the Mendix app inside the Active Workspace page. ### Adding the Component to Active Workspace @@ -93,7 +97,7 @@ To verify the component was picked up correctly, check that its view model entry ### Registering the Component on a Page -To display the Mendix app on an Active Workspace page, add a card definition for it to the relevant `layoutsViewModel.json` file in your AWC stage repository. Set `declarativeKeyContext` to the URL of your Mendix runtime: +To display the Mendix app on an Active Workspace page, add a card definition for it to the relevant `layoutsViewModel.json` file in your Active Workspace stage repository. Set `declarativeKeyContext` to the URL of your Mendix runtime: ```json "Mendix": { @@ -110,7 +114,7 @@ To display the Mendix app on an Active Workspace page, add a card definition for Add `"Mendix"` to the relevant layout handler grid and rebuild Active Workspace. If the Mendix card does not appear after rebuilding, clear the browser cache to ensure the new chunk is loaded. -Detailed AWC customization and build steps are outside the scope of this documentation. Refer to the Siemens Active Workspace documentation for instructions. +Detailed Active Workspace customization and build steps are outside the scope of this documentation. Refer to the Siemens Active Workspace documentation for instructions. ## Configuring the Content Security Policy in Teamcenter @@ -161,9 +165,9 @@ Follow these steps to configure authentication. Steps 1–3 require Teamcenter a ## Passing Context from Teamcenter {#passing-context} -The `MendixEmbedded` AWC component passes Teamcenter object context to the Mendix app as startup parameters. These are configured in the AWC component and forwarded to the Mendix `render()` call as the `parameters` object. +The `MendixEmbedded` Active Workspace component passes Teamcenter object context to the Mendix app as startup parameters. These are configured in the Active Workspace component and forwarded to the Mendix `render()` call as the `parameters` object. -The following example shows how the AWC component passes a selected Teamcenter item UID to the Mendix app: +The following example shows how the Active Workspace component passes a selected Teamcenter item UID to the Mendix app: ```js const MENDIX_URL = "https://your-mendix-runtime.example.com/"; From 1b33b3e3a566063515f7eaa4ab5651aa0d2e80b2 Mon Sep 17 00:00:00 2001 From: Jonathan Diehl <1334574+jdiehl@users.noreply.github.com> Date: Tue, 30 Jun 2026 14:14:50 +0200 Subject: [PATCH 3/5] addressed feedback --- .../mendix-client/mendix-inside-teamcenter.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md index 3b250769c02..0303d471102 100644 --- a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md +++ b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md @@ -22,7 +22,7 @@ The following versions are required: | | Mendix | Teamcenter | Teamcenter Connector | | --- | --- | --- | --- | -| **Beta** | 11.12 | 2512 | 2512.1.0 or above | +| **Beta** | 11.12 | 2512 | 2606.0.0 or above | | **GA (planned)** | 11.18 | 2612 | TBD | In addition, the following requirements must be met: @@ -74,6 +74,22 @@ Configure the following HTTP Response Headers in your [local runtime configurati | `Access-Control-Allow-Headers` | `Content-Type, x-csrf-token` | | `Access-Control-Allow-Methods` | `POST, GET, OPTIONS` | | `Access-Control-Allow-Origin` | `https://your-teamcenter.example.com` | +{{% alert color="info" %}} +For the Mendix public cloud do not use the HTTP Header configuration in the cloud portal. Instead set the custom runtime configuration setting `Headers` to the following: +```json +{ + "Access-Control-Allow-Credentials": "true", + "Access-Control-Allow-Headers": "Content-Type, x-csrf-token", + "Access-Control-Allow-Methods": "POST, GET, OPTIONS", + "Access-Control-Allow-Origin": "https://your-teamcenter.example.com" +} +``` +See [custom settings](https://docs.mendix.com/refguide/custom-settings/#Headers) for details. +{{% /alert %}} + +{{% alert color="info" %}} +Both the Mendix runtime and the Active Workspace server must be served over HTTPS. When `SameSiteCookies` is set to `None`, the `Secure` attribute is automatically added to cookies, which requires HTTPS on both origins. +{{% /alert %}} {{% alert color="info" %}} Both the Mendix runtime and the Active Workspace server must be served over HTTPS. When `SameSiteCookies` is set to `None`, the `Secure` attribute is automatically added to cookies, which requires HTTPS on both origins. From 32e60571264e6b7fa352f7cd6cf8fd59902bb1ac Mon Sep 17 00:00:00 2001 From: Jonathan Diehl <1334574+jdiehl@users.noreply.github.com> Date: Tue, 30 Jun 2026 17:00:37 +0200 Subject: [PATCH 4/5] addressed feedback --- .../mendix-client/mendix-inside-teamcenter.md | 107 ++++++++++++++---- 1 file changed, 83 insertions(+), 24 deletions(-) diff --git a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md index 0303d471102..d4ec790f165 100644 --- a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md +++ b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md @@ -54,8 +54,6 @@ For more information about navigation profiles, see [Setting Up Navigation](/ref The Mendix app must allow cross-origin resource sharing (CORS) from Active Workspace. This allows the browser to load the Mendix client bundle from the Mendix runtime origin from a page that is served from the Teamcenter origin. You will need to set up the following: - - #### Runtime Settings Configure the following [custom runtime setting](/refguide/custom-settings/). @@ -74,6 +72,7 @@ Configure the following HTTP Response Headers in your [local runtime configurati | `Access-Control-Allow-Headers` | `Content-Type, x-csrf-token` | | `Access-Control-Allow-Methods` | `POST, GET, OPTIONS` | | `Access-Control-Allow-Origin` | `https://your-teamcenter.example.com` | + {{% alert color="info" %}} For the Mendix public cloud do not use the HTTP Header configuration in the cloud portal. Instead set the custom runtime configuration setting `Headers` to the following: ```json @@ -91,9 +90,9 @@ See [custom settings](https://docs.mendix.com/refguide/custom-settings/#Headers) Both the Mendix runtime and the Active Workspace server must be served over HTTPS. When `SameSiteCookies` is set to `None`, the `Secure` attribute is automatically added to cookies, which requires HTTPS on both origins. {{% /alert %}} -{{% alert color="info" %}} -Both the Mendix runtime and the Active Workspace server must be served over HTTPS. When `SameSiteCookies` is set to `None`, the `Secure` attribute is automatically added to cookies, which requires HTTPS on both origins. -{{% /alert %}} +#### CORS for TcSSO Published REST Service + +Configure the [CORS settings](/refguide/cors-settings/) for the TcSSO Published REST Service that is included in the Teamcenter Connector and add your teamcenter host `https://your-teamcenter.example.com` to the Allowed Origins. Restart the Mendix app after changing these settings. For background on how CORS works in the Mendix runtime, see [Configuring CORS in the Mendix Runtime](https://docs.mendix.com/refguide/configure-cors/). @@ -107,9 +106,9 @@ The Mendix-inside-Teamcenter Active Workspace component (`MendixEmbedded`) is a 2. Install the component into your Active Workspace stage repository under `src/repo`. 3. Configure the component with the URL of your Mendix runtime. 4. Optionally, set up context passing. For more information, see [Passing Context from Teamcenter](#passing-context). -5. Rebuild Active Workspace. +5. Rebuild Active Workspace using `awbuild.cmd`. -To verify the component was picked up correctly, check that its view model entry exists in the `pathMap.json` registry file in the build output. +To verify the component was picked up correctly, check that its view model entry exists in the `src/repo/out/pathMap.json` registry file in the build output. ### Registering the Component on a Page @@ -155,10 +154,10 @@ If Teamcenter returns `HTTP 401 Unauthorized` with a JWT signature error after r ## Configuring Authentication {#authentication} -During Beta, authentication uses the Teamcenter Connector's Teamcenter SSO flow. The Mendix app login page shows an SSO button. When a user clicks it, they are redirected to Teamcenter Security Services (TcSS) for authentication. After a successful login, TcSS redirects back to the Mendix app, where the user is provisioned or matched to an existing Mendix account and a Teamcenter Connector session is established. +During Beta, authentication uses the Teamcenter Connector's Teamcenter SSO flow. Upon accessing the Mendix application, a popup is opened automatically for authentication. After successful login (which in most cases will happen automatically), the popup is closed and the Mendix application and Teamcenter Connector are authenticated. {{% alert color="info" %}} -Because the Mendix app runs inside Active Workspace, the SSO redirect opens in a popup window. The popup can be automated to require zero additional clicks after the user is already signed in to TcSS. The planned GA release targets a fully invisible authentication flow with no popup. +For the GA release we plan to offer an alternative authentication flow that is fully invisible and does not require a popup. {{% /alert %}} Follow these steps to configure authentication. Steps 1–3 require Teamcenter administrator access. @@ -166,38 +165,98 @@ Follow these steps to configure authentication. Steps 1–3 require Teamcenter a 1. **Register the Mendix App with Teamcenter Security Services**: Register the Mendix app in the Teamcenter Deployment Center so TcSS can authenticate it. For instructions, see [Registering Your App for Teamcenter SSO](/appstore/modules/siemens-plm/configuring-connection-2512/#register-your-app-for-teamcenter-sso). + + This step requires administrator access to Teamcenter. 1. **Configure the Teamcenter Connector Connection**: In your Mendix app, configure a Teamcenter Connector connection using **Teamcenter SSO** as the authentication method. For instructions, see [Configuring the Connection to Teamcenter](/appstore/modules/siemens-plm/configuring-connection-2512/). + This step requires administrator access to your Mendix application. + 1. **Configure User Provisioning**: - Set up user provisioning so that Mendix accounts are matched to Teamcenter users on login. For instructions, see [User Provisioning for SSO](/appstore/modules/siemens-plm/configuring-connection-2512/#user-provisioning-for-sso). + Set up user provisioning by example of the `EXAMPLE_UserProvisioningAnonymous` Microflow so that Mendix accounts are matched to Teamcenter users on login. Anonymous users should be disabled in the Mendix application. For instructions, see [User Provisioning for SSO](/appstore/modules/siemens-plm/configuring-connection-2512/#user-provisioning-for-sso). -1. **Add an SSO Login Button to the Login Page**: +1. **Add the following required customizationss**: - Add a Teamcenter SSO login button to the Mendix app's `login.html` so users can initiate the TcSS authentication flow. For instructions, see [Adding an SSO Login Button to Your Login Page](/appstore/modules/siemens-plm/configuring-connection-2512/#add-sso-login-button). Optionally, use JavaScript to trigger the authentication automatically. Note that browsers may block the popup unless it is triggered directly by a user action. + - Create a JavaScript action called JS_CloseWindow with the following: + ``` + export async function JS_CloseWindow() { + // BEGIN USER CODE + window.close(); + // END USER CODE + } + ``` + - Add a Nanoflow that calls this JavaScript action + - Add an empty page called `AuthSuccess` to the application which contains an `Component load` event that calls this Nanoflow + - Change the `DL_HandleSSOLoginMicroflow` to show `AuthSuccess` instead of the home page as the last action in the Microflow. + - For instructions, see [Adding an SSO Login Button to Your Login Page](/appstore/modules/siemens-plm/configuring-connection-2512/#add-sso-login-button). + - Optionally, use JavaScript to trigger the authentication automatically. Note that browsers may block the popup unless it is triggered directly by a user action. ## Passing Context from Teamcenter {#passing-context} The `MendixEmbedded` Active Workspace component passes Teamcenter object context to the Mendix app as startup parameters. These are configured in the Active Workspace component and forwarded to the Mendix `render()` call as the `parameters` object. -The following example shows how the Active Workspace component passes a selected Teamcenter item UID to the Mendix app: +The following example shows how to change the Active Workspace component to pass the selected Teamcenter item UID to the Mendix app (the required changes are prefixed with `>>`): ```js -const MENDIX_URL = "https://your-mendix-runtime.example.com/"; - -export async function mountMendixInTeamcenter(container, tcContext) { - const embeddedModule = await import(`${MENDIX_URL}dist/embedded-index.js`); - return embeddedModule.render(container, { - remoteUrl: MENDIX_URL, - minHeight: "620px", - parameters: { - itemUID: tcContext.selected.uid +export const mendixRenderFunction = (props) => { + const [error, setError] = useState(null); + >> const selectedItem = props.ctx?.selected?.uid ?? ''; + + const mendixUrl = getMendixUrl(props); + if (mendixUrl === undefined) { + setError('There is no Mendix URL configured. Contact support to resolve this issue.'); + } + + const retryError = () => { + setError(null); + }; + + + const load = useCallback(async (container) => { + mendixCleanupFunction(); + + if (!container) { + return; } - }); -} + + try { + if (REQUIRE_SESSION) { + await ensureHasValidSession(mendixUrl); + } + + const app = await import(/* webpackIgnore: true */ `${mendixUrl}dist/embedded-index.js`); + const cleanup = await app.render(container, { remoteUrl: mendixUrl, minHeight: '100vh', + >> parameters: { SelectedItem: selectedItem } + }); + + const onReload = () => load(container); + container.addEventListener(RELOAD_EVENT, onReload, { once: true }); + + currentMendixCleanup = () => { + container.removeEventListener(RELOAD_EVENT, onReload); + cleanup?.(); + }; + } catch (error) { + setError(error); + } + }, [mendixUrl, + >> selectedItem + ]); + + if (error) { + if (error.code === 'POPUP_BLOCKED') { + return ; + } + + return ; + } + + + return
; +}; ``` The `parameters` object is available to the Mendix app at startup. Use a JavaScript action on the home page to read parameters and pass them to your application logic. From ad233c01b1a964820f38b66f464f9cc0f537db56 Mon Sep 17 00:00:00 2001 From: MarkvanMents Date: Fri, 3 Jul 2026 14:19:17 +0200 Subject: [PATCH 5/5] Proofread and polish Mendix Inside Teamcenter documentation Fixes grammar, punctuation, formatting, and clarity in the Mendix Inside Teamcenter feature documentation and cross-reference in the Teamcenter Connector page. Co-Authored-By: Claude Sonnet 4.5 --- .../siemens/teamcenter-connector/_index.md | 2 + .../mendix-client/mendix-inside-teamcenter.md | 52 +++++++++++-------- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/content/en/docs/marketplace/platform-supported-content/modules/siemens/teamcenter-connector/_index.md b/content/en/docs/marketplace/platform-supported-content/modules/siemens/teamcenter-connector/_index.md index 0df0911a1fa..586f0ce40f6 100644 --- a/content/en/docs/marketplace/platform-supported-content/modules/siemens/teamcenter-connector/_index.md +++ b/content/en/docs/marketplace/platform-supported-content/modules/siemens/teamcenter-connector/_index.md @@ -12,6 +12,8 @@ Teamcenter Connector for Mendix enables Mendix developers to access product data This documentation provides guidance on using Teamcenter Connector for Mendix. It assumes that you are familiar with Mendix concepts, processes, and terminology for application development. +In Mendix version 11.12.0 and above, you can also embed a Mendix web app as a native component inside Siemens Teamcenter Active Workspace. For more information, see [Mendix Inside Teamcenter](/refguide/mendix-client/mendix-inside-teamcenter/). + ## Prerequisites To use Teamcenter Connector for Mendix, you need the following: diff --git a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md index d4ec790f165..db38ce05751 100644 --- a/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md +++ b/content/en/docs/refguide/runtime/mendix-client/mendix-inside-teamcenter.md @@ -22,7 +22,7 @@ The following versions are required: | | Mendix | Teamcenter | Teamcenter Connector | | --- | --- | --- | --- | -| **Beta** | 11.12 | 2512 | 2606.0.0 or above | +| **Beta** | 11.12 or above | 2512 | 2606.0.0 or above | | **GA (planned)** | 11.18 | 2612 | TBD | In addition, the following requirements must be met: @@ -75,6 +75,7 @@ Configure the following HTTP Response Headers in your [local runtime configurati {{% alert color="info" %}} For the Mendix public cloud do not use the HTTP Header configuration in the cloud portal. Instead set the custom runtime configuration setting `Headers` to the following: + ```json { "Access-Control-Allow-Credentials": "true", @@ -83,7 +84,8 @@ For the Mendix public cloud do not use the HTTP Header configuration in the clou "Access-Control-Allow-Origin": "https://your-teamcenter.example.com" } ``` -See [custom settings](https://docs.mendix.com/refguide/custom-settings/#Headers) for details. + +See [custom settings](\/refguide/custom-settings/#Headers) for details. {{% /alert %}} {{% alert color="info" %}} @@ -92,7 +94,7 @@ Both the Mendix runtime and the Active Workspace server must be served over HTTP #### CORS for TcSSO Published REST Service -Configure the [CORS settings](/refguide/cors-settings/) for the TcSSO Published REST Service that is included in the Teamcenter Connector and add your teamcenter host `https://your-teamcenter.example.com` to the Allowed Origins. +Configure the [CORS settings](/refguide/cors-settings/) for the TcSSO Published REST Service that is included in the Teamcenter Connector and add your Teamcenter host `https://your-teamcenter.example.com` to the **Allowed Origins**. Restart the Mendix app after changing these settings. For background on how CORS works in the Mendix runtime, see [Configuring CORS in the Mendix Runtime](https://docs.mendix.com/refguide/configure-cors/). @@ -102,6 +104,8 @@ The Mendix-inside-Teamcenter Active Workspace component (`MendixEmbedded`) is a ### Adding the Component to Active Workspace +{{% todo %}}Need a link to GitHub{{% /todo %}} + 1. Obtain the `MendixEmbedded` component from [GitHub](TBD). 2. Install the component into your Active Workspace stage repository under `src/repo`. 3. Configure the component with the URL of your Mendix runtime. @@ -112,7 +116,7 @@ To verify the component was picked up correctly, check that its view model entry ### Registering the Component on a Page -To display the Mendix app on an Active Workspace page, add a card definition for it to the relevant `layoutsViewModel.json` file in your Active Workspace stage repository. Set `declarativeKeyContext` to the URL of your Mendix runtime: +To display the Mendix app on an Active Workspace page, add its card definition to the relevant `layoutsViewModel.json` file in your Active Workspace stage repository. Set `declarativeKeyContext` to the URL of your Mendix runtime: ```json "Mendix": { @@ -129,9 +133,9 @@ To display the Mendix app on an Active Workspace page, add a card definition for Add `"Mendix"` to the relevant layout handler grid and rebuild Active Workspace. If the Mendix card does not appear after rebuilding, clear the browser cache to ensure the new chunk is loaded. -Detailed Active Workspace customization and build steps are outside the scope of this documentation. Refer to the Siemens Active Workspace documentation for instructions. +Detailed Active Workspace customization and build steps are outside the scope of this documentation. Refer to the Siemens [Active Workspace Customization](https://docs.sw.siemens.com/en-US/doc/282219420/PL20250520748650994.Configuration/yiv1688486682769) documentation for instructions (link requires authentication). -## Configuring the Content Security Policy in Teamcenter +## Configuring the Content Security Policy (CSP) in Teamcenter Active Workspace enforces a Content Security Policy that must be updated to allow Mendix content to load. @@ -154,10 +158,10 @@ If Teamcenter returns `HTTP 401 Unauthorized` with a JWT signature error after r ## Configuring Authentication {#authentication} -During Beta, authentication uses the Teamcenter Connector's Teamcenter SSO flow. Upon accessing the Mendix application, a popup is opened automatically for authentication. After successful login (which in most cases will happen automatically), the popup is closed and the Mendix application and Teamcenter Connector are authenticated. +While Mendix in Teamcenter is in Beta, authentication uses the Teamcenter Connector's Teamcenter Single Sign On (SSO) flow. Upon accessing the Mendix application, a popup is opened automatically for authentication. After successful login (which will usually happen automatically), the popup is closed and the Mendix application and Teamcenter Connector are authenticated. {{% alert color="info" %}} -For the GA release we plan to offer an alternative authentication flow that is fully invisible and does not require a popup. +In the GA release an alternative authentication flow that is invisible to the end-user is planned. {{% /alert %}} Follow these steps to configure authentication. Steps 1–3 require Teamcenter administrator access. @@ -176,31 +180,37 @@ Follow these steps to configure authentication. Steps 1–3 require Teamcenter a 1. **Configure User Provisioning**: - Set up user provisioning by example of the `EXAMPLE_UserProvisioningAnonymous` Microflow so that Mendix accounts are matched to Teamcenter users on login. Anonymous users should be disabled in the Mendix application. For instructions, see [User Provisioning for SSO](/appstore/modules/siemens-plm/configuring-connection-2512/#user-provisioning-for-sso). + Set up user provisioning by example of the `EXAMPLE_UserProvisioningAnonymous` microflow so that Mendix accounts are matched to Teamcenter users on login. Anonymous users should be disabled in the Mendix application. For instructions, see [User Provisioning for SSO](/appstore/modules/siemens-plm/configuring-connection-2512/#user-provisioning-for-sso). -1. **Add the following required customizationss**: +1. **Add the following required customizations**: - - Create a JavaScript action called JS_CloseWindow with the following: - ``` + 1. Create a JavaScript action called JS_CloseWindow containing the following code: + + ```javascript export async function JS_CloseWindow() { // BEGIN USER CODE window.close(); // END USER CODE } ``` - - Add a Nanoflow that calls this JavaScript action - - Add an empty page called `AuthSuccess` to the application which contains an `Component load` event that calls this Nanoflow - - Change the `DL_HandleSSOLoginMicroflow` to show `AuthSuccess` instead of the home page as the last action in the Microflow. - - For instructions, see [Adding an SSO Login Button to Your Login Page](/appstore/modules/siemens-plm/configuring-connection-2512/#add-sso-login-button). - - Optionally, use JavaScript to trigger the authentication automatically. Note that browsers may block the popup unless it is triggered directly by a user action. + + 1. Add a nanoflow that calls this JavaScript action. + 1. Add an empty page called `AuthSuccess` to the application which contains an `Component load` event that calls this nanoflow. + 1. Change the `DL_HandleSSOLoginMicroflow` to show the `AuthSuccess` page instead of the home page as the last action in the microflow. + + For instructions, see the [Adding an SSO Login Button to Your Login Page](/appstore/modules/siemens-plm/configuring-connection-2512/#add-sso-login-button) section of *Configuring the Connection to Teamcenter with Teamcenter Connector 2512.0.0 and Above*. + + 1. Optionally, use JavaScript to trigger the authentication automatically. + + {{% alert color="warning" %}}Browsers may block the popup if it is not triggered directly by a user action.{{% /alert %}} ## Passing Context from Teamcenter {#passing-context} The `MendixEmbedded` Active Workspace component passes Teamcenter object context to the Mendix app as startup parameters. These are configured in the Active Workspace component and forwarded to the Mendix `render()` call as the `parameters` object. -The following example shows how to change the Active Workspace component to pass the selected Teamcenter item UID to the Mendix app (the required changes are prefixed with `>>`): +The following example shows how to change the Active Workspace component to pass the selected Teamcenter item UID to the Mendix app (the required changes are highlighted and prefixed with `>>`): -```js +```js {hl_lines=[3,29, 43]} export const mendixRenderFunction = (props) => { const [error, setError] = useState(null); >> const selectedItem = props.ctx?.selected?.uid ?? ''; @@ -265,9 +275,9 @@ For the full `render()` API, see [Embedding the Client](/refguide/mendix-client/ ### Best Practices for Context Parameters -* **Use persistable object IDs only.** Pass Item UIDs or ItemRevision UIDs. These are stable and unique across sessions. +* **Use persistable object IDs only.** Pass `Item` UIDs or `ItemRevision` UIDs. These are stable and unique across sessions. * **Avoid non-persistable IDs.** BOM line IDs are runtime calculation results that lose synchronization when Teamcenter configuration rules change. Do not use them as parameters. -* **Prefer Item IDs over ItemRevision IDs** where possible. Item IDs are context-independent and do not depend on the revision rule in effect. +* **Prefer `Item` IDs over `ItemRevision` IDs** where possible. `Item` IDs are context-independent and do not depend on the revision rule in effect. * **Discover available parameters** by referring to the Active Workspace documentation for a list of available context parameters. ## Known Limitations (Beta)