The Embedded Content tab allows administrators to configure a URL template that retrieves and displays HTML content in an iframe directly within the Details page. Depending on the specified URL template, the tab can render a page from an external source or display dynamic data from STEP using internal servlets that serve HTML pages. Examples of STEP services that can render pages in the embedded tab include the HTML proof view of the current node via XSLT, and the HTML Function, which uses a business function to render HTML content in the tab through the HTML Function servlet.
Configuring Embedded Content tab
To configure the Embedded Content tab:
-
To add a tab in configuration tool, navigate to the configuration tool > Add a new tab of type Embedded Content > Provide a name and display conditions as needed.
-
In the Embedded content section, enter the URL template that should be rendered inside the tab.
The tab will remain empty until a valid URL is provided. The URL can include dynamic parameters such as Node ID, Context ID, Workspace ID, Locale, User ID, etc., to personalize the embedded view. Details about the supported placeholders are provided below.
-
Save the changes
URL template in Embedded Content tab
The URL Template is a dynamic configuration feature within the Embedded Content tab that allows administrators to embed external web pages tailored to the current STEP context. This template supports placeholders that are automatically replaced with real-time values when the tab is rendered.
Supported Placeholders
The below mentioned placeholders allow the embedded URL to be context-aware, enabling personalized or node-specific content to be displayed directly within the Details page.
|
Placeholder |
Description |
|---|---|
| {nodeId} | Returns the ID of the current node |
| {nodeType} | Returns the type of the node (e.g., Product, Classification, Entity, Asset) |
| {contextId} | Returns the ID of the current context |
| {workspaceId} | Returns the ID of the current workspace |
| {userId} | Returns the ID of the current user |
| {attr:attributeId} | Returns the value of the attribute with ID = attributeId |
| {workflowId} | Returns the ID of the current workflow if node is accessed via a task perspective. |
| {stateId} | Returns the ID of the current state if node is accessed via a task perspective. |
HTML proof view
The Embedded Content tab can also be used to provide an HTML proof view, allowing users to preview content in a format that approximates how it will appear on a web page. The proof view is powered by an XML document that includes the XML-formatted values of a STEP object, combined with an XSLT stylesheet transformation.
The URL template for this is:
/webui/proofview/products/{nodeId}?xslt=[xslt asset ID]&context={contextId}&workspace={workspaceId}
In the above URL, the following are to be considered:
-
Xslt: The ID of an asset in STEP that contains the XSLT stylesheet as its asset content.
Below is an example URL:
/webui/proofview/products/{nodeId}?xslt=ProofViewXSLT&context={contextId}&workspace={workspaceId}
Note: Embedding Web UI screens directly via the Embedded Content tab is restricted by default. If a specific use case requires embedding a Web UI screen, customers should contact their account manager.
Rendering HTML from business functions
You can configure an Embedded Content Tab to render HTML Functions (business functions that return HTML) via a specific URL template. This allows you to display read-only, formatted data from multiple sources directly within Instrument UI, using the same tab framework as for external URLs. When configured, the tab retrieves the HTML output using the specified business function ID and node parameters, applies Instrument UI’s default styling, and preserves any inline styles defined in the business function.
To render HTML functions specify a URL template that invokes your business function in the Embedded Content section. Use placeholders such as {nodeId} and {nodeType} to pass context. When the tab is rendered, UI executes the business function, retrieves the HTML, and displays it within the tab.
Note: This feature supports only read-only HTML rendering. Ensure the HTML returned by the business function is well-structured. Instrument styling is applied by default, but inline styles from the function are also taken into consideration.
Below is an example URL template:
/instrument-service/htmlFunction?functionId=[business function ID]&nodeId={nodeId}&nodeType={nodeType}&context={contextId}&workspace={workspaceId}
In the above URL, the following are to be considered:
-
Business function: The ID of a business function in STEP that have Node as input parameter and String as return type.stylesheet as its asset content.
Below is an example URL:
/instrument-service/htmlFunction?functionId=MyHTMLFunction&nodeId={nodeId}&nodeType={nodeType}&context={contextId}&workspace={workspaceId}
You can control whether the standard Instrument styling is applied to the rendered HTML by specifying "ods" as the class attribute in the <body> tag of the HTML returned by the business function.
Example output from the business function:
<body class="ods">
<h1>This is a styled header</h1>
<p>This is a styled paragraph</p>
</body>
When the "ods" class is used, Instrument applies its default styling to the HTML content.
Important Considerations
The iframe used to display embedded content is allowed to run scripts but for security reason restricted to not allow popups, modals, file downloads, top-level navigation etc. Even though the iframe is allowed to run scripts, the content loaded inside the iframe may have stricter policies.
Fetching external content: The external URL must support iframe embedding. If the target site blocks iframe usage (e.g., via X-Frame-Options or Content Security Policy headers), the content will not render correctly.
HTML functions: The default content security policy for the instrument-service used for the HTML function servlet does not allow script evaluation.
If script evaluation is required then the policy can be changed through a STEP configuration property. It can be changed for all of STEP or more locally for the Instrument web context (instrument-service).
Content Security Policy (CSP) configuration for external content: If external content needs to be loaded in an embedded tab, either for a page hosted outside of STEP or from a page created through a business function, the source of that content needs to be white-listed via the standard CSP relevant STEP configuration properties. This ensures that only trusted external content can be embedded.
Depending on whether the content needs to be loaded as source of the embedded tab directly or as part of a page created through a business function, different directives might be needed in the CSP configuration. To load a page from an external source directly in an embedded tab, the directive frame-src needs to be used to white-list the src. To load content such as images as part of the HTML created through a business function, different directives need to be used, such as image-src.