Document Mendix inside Teamcenter (public Beta, 11.12)

[jdiehl]

Description

New reference page under /refguide/mendix-client/mendix-inside-teamcenter/ documenting how to embed a Mendix web app as a native component inside Siemens Teamcenter Active Workspace using the embedded client.

This builds on the embedded client documentation added by @WimJongeneel in #11204 and is tied to the 11.12 release.

Changes

• New page: refguide/runtime/mendix-client/mendix-inside-teamcenter.md
• Updated refguide/runtime/mendix-client/_index.md with a cross-reference to the new page

Coverage

The new page covers:

• Version prerequisites (Beta: Mendix 11.12 / TC 2512; GA: Mendix 11.18 / TC 2612)
• Adding an Embedded navigation profile in Studio Pro
• Configuring CORS (concrete runtime settings and m2ee.yaml example)
• Installing the MendixEmbedded AWC component and registering it on a page
• Configuring the Teamcenter CSP (gateway/config.json directives)
• Authentication via Teamcenter SSO (links to TC Connector docs)
• Passing Teamcenter context as startup parameters (code example)
• Known Beta limitations

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 3 committers have signed the CLA.

✅ jdiehl
✅ MarkvanMents
❌ Jonathan Diehl

---

Jonathan Diehl seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[wanchoorohan]

Provided few suggestions.

[wanchoorohan]

Don't you need TcC 2606 for the login enhancements? - https://mendix.slack.com/archives/C0B6TMJ3SUC/p1781199462908459

[brambrink]

Yes indeed, the user should use TcC 2606 with the latest changes (which is compatible with 2512 if I understood correctly)

[MarkvanMents]

So the conclusion is

Suggested change

	| **Beta** | 11.12 | 2512 | 2512.1.0 or above |
	| **Beta** | 11.12 | 2512 | 2606.0.0 or above |

I note that this version is not yet available in Marketplace, does this mean this PR should wait until it is released?

[wanchoorohan]

Can we provide the command to do this? Is it awbuild?

[brambrink]

Yes indeed, it is awbuild.cmd. I would assume the user to know this already though, not sure if we need to add it to the docs

[wanchoorohan]

Where does pathmap.json reside? Would the users know this?

[brambrink]

It is located at src/repo/out/pathMap.json, not sure if this is common knowledge. Not sure if this is needed

[wanchoorohan]

Same question for layoutsViewModel.json

[brambrink]

This is located in the src/repo, but depends on which PL Home screen you want to add the card to. Would be nice if there is Teamcenter documentation we can link to, but I cannot find that.

[brambrink]

This example corresponds more to the actual component:

(including PascalCase for parameter key)

 const app = await import(/* webpackIgnore: true */ `${mendixUrl}'dist/embedded-index.js'`);
 cleanup = await app.render(container, {
                remoteUrl: mendixUrl,
                minHeight: '100vh',
                parameters: { 
                      SelectedItem: selectedItem
               }
});

[brambrink]

See above, this should be removed

[brambrink]

User provisioning should be setup with EXAMPLE_UserProvisioningAnonymous. For the Mendix application itself, anonymous users should be disabled

[brambrink]

This part is incorrect. There is no need to add an SSO button, after setting up the Teamcenter connector, the authentication is done with the popup logic in the AW component, which uses the Tc Connector published REST endpoint, no need to change login.html.

[brambrink]

Instead, for now the following needs to be configured (there are plans to improve this):

• Add 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.

[MarkvanMents]

@jdiehl
There still seems to be discussion on the content of this. Can you let me know when it is ready to be reviewed by the technical writers?
Thanks.

[brambrink]

CORS should also be enabled for the TCSSO Published Rest Service, add the Teamcenter origin to the allow origin, as described at CORS Settings for Published REST Services

[MarkvanMents]

This sounds like it needs a third section heading. CORS for Team Center SSO or something.
Is this a configuration which is needed in this app or is it applied somewhere else? I haven't seen a TCSSO published REST Service as a prerequisite for this how-to.

Can you propose something to cover this?

[brambrink]

This would be the actual code snippet needed to pass the uid as a parameter (code that needs to be be added is prefixed with >>):

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 <PopupBlockedView subPanelContext={{ retry: retryError }} />;
        }

        return <GeneralErrorViewModel subPanelContext={{ errorMessage: error.message ?? 'An unexpected error occurred.', retry: retryError }} />;
    }


    return <div ref={load} style={{ width: '100%', height: '100vh' }} />;
};

[MarkvanMents]

I started reviewing this, but realize that there are a lot of things which are still awaiting confirmation/more documentation.

Can you let me know when this is ready for me to do more work on it?

[MarkvanMents]

So the conclusion is

Suggested change

	| **Beta** | 11.12 | 2512 | 2512.1.0 or above |
	| **Beta** | 11.12 | 2512 | 2606.0.0 or above |

I note that this version is not yet available in Marketplace, does this mean this PR should wait until it is released?

[MarkvanMents]

This sounds like it needs a third section heading. CORS for Team Center SSO or something.
Is this a configuration which is needed in this app or is it applied somewhere else? I haven't seen a TCSSO published REST Service as a prerequisite for this how-to.

Can you propose something to cover this?