Product Lifecycle Management Blogs by SAP
Dive into product lifecycle management news, learn about digitalizing PLM for the digital supply chain, and stay informed with product updates from SAP.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Embedding Visualization into SAP Asset Performance Management Step by Step Guide

Nick_Wang
Advisor
Advisor
‎2024 Mar 14 2:24 PM
1,814

This blog will describe how to embed SAP Product Lifecycle Management Visualization into SAP Asset Performance Management. For brevity, SAP Product Lifecycle Management will be referred to as “PLM” and SAP Asset Performance Management will be referred to as APM.

nickwang1_8-1710377268007.png

PLM Visualization can help users such as asset owners, plant managers, and maintenance technicians to improve asset performance, manage asset risk and optimize maintenance strategies, planning and execution.

The August 2023 APM release includes support for SAPUI5 flexibility, enabling UI extension. Using this mechanism, it is possible to embed PLM Visualization inside the APM Explore Technical Object application, which enables users to work with a visual representation of the technical object within its spatial context without leaving the APM application. The visual context for asset risk and criticality, including operational and condition-based data allows users to perform enterprise asset management more easily, which ultimately allowing asset operators to reduce maintenance costs while lowering risk and raising output.

Using the APM UI extension mechanism, a tab containing the PLM Visualization Viewer application can be added to the details page in the APM Explore Technical Object application. The PLM Visualization Viewer application is then loaded in an HTML iframe using a URL that provides the information needed to load the relevant visualization using a particular viewer template. The URL also provides the information needed to select the visual representation of the technical object in the PLM Visualization Viewer viewport. This highlights the visual representation of the technical object and can also allow data related to the technical object to be shown, if configured in the viewer template.

Prerequisites

Some familiarity with APM and PLM Visualization is assumed.
Check the PLM and APM documentation for further information.

The following prerequisites are required for this integration:

  • APM and PLM Visualization are subscribed and configured (preferably in the same BTP subaccount).
  • Visualizations representing functional locations are created in PLM Visualization.
  • Each visualization that represents a functional location is tagged with a usage ID of the same type that contains the Superior Functional Location ID from the APM system.

 

nickwang1_9-1710377268015.png

  • Each object that represents a technical object in these visualizations is tagged with a usage ID of the same type that contains the Technical Object ID from the APM system.

 

nickwang1_10-1710377268041.png

  • APM and PLM Visualization are configured to use the same IdP (Identity Provider).
  • Security has been configured in the IdP and subaccount such that users have the required APM and PLM Visualization role collections mapped (the ContentReader role is needed for PLM Visualization viewing).
  • A SAP Build Workzone site has been created that includes the PLM Visualization applications. The same SAP Build Workzone site can be used for both APM and PLM Visualization if they are in the same subaccount.
  • In the Site Manager for the PLM Visualization SAP Build Workzone site, the content-security-policy header has been configured.
    In the Security Headers tab of the Settings page, use a valid Content-Security-Header (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) that contains a frame-ancestors policy directive that includes 'self' and the origin of the APM application or *.
  • If you are using different subdomains for APM and PLM Visualization, you should configure the domain of the APM application in the trusted domains list in the BTP Cockpit in the Security -> Settings page for the subaccount used for PLM Visualization. See SAP-Note 2912358
  • You should configure the domain of the APM application in the trusted domains for the IAS tenant you are using for the PLM Visualization IdP (which you should also use as the IdP for APM). This can be done in the Tenant Settings -> Customization -> Trusted Domains  page in the admin cockpit for your IAS tenant.

Once the above prerequisites have been met, follow the steps below to generate the PLM Visualization Viewer application URL and configure the UI extension in APM.

Step 1: Generate a Visualization URL

  • Open the PLM Visualization Browse app in the PLM SAP Build Workzone site.
  • Navigate to the folder that contains the visualizations that have been tagged with the APM Superior Functional Location ID.
  • Create a new visualization. Add a usage id of the type you are using to store the APM Superior Functional Location ID. Provide a key value of superiorFunctionalLocationIdToSubstitute (this is a known value that will not be modified by URL encoding that will be replaced later).
  • Click on the … button of the visualization and click the Share Link menu item.

nickwang1_11-1710377268053.png

  • In the Share Link dialog:
    • Select the Usage ID option.
    • Select the usage id that contains the APM Superior Functional Location ID from the Usage Id drop down list.
    • Choose the desired viewer template from the Viewer Template drop-down list.
    • Click Copy URL and paste the URL into a text editor.

nickwang1_12-1710377268067.png

Step 2: Generate a complete URL

Open a web browser developer tools console.

Set the URL copied from the Share Link Dialog in a baseUrl variable:
nickwang1_13-1710377268069.png

Use a technicalObjectUsageId variable to hold a JSON string representing a usage id value of the type you will use to store the APM technical Object ID values.

Usage IDs are represented in the form of a JSON object which has a name field that contains the name of the usage id and a keys field that contains an array of objects which each contain a name and a value field. The name and key name you will need to use will depend on the definition of the usage id you are using. You can check the usage ID definition in the PLM Visualization System Administration application.

Use a key value of technicalObjectIdToSubstitute in your usage id JSON.
nickwang1_14-1710377268070.png

If you only have one IdP configured for login in your subaccount, the entire URL can be constructed as below:

console.dir(baseUrl.replace('superiorFunctionalLocationIdToSubstitute', '{superiorFunctionalLocationId}') + '&selectNodesWithUsageId=' +
encodeURIComponent(encodeURIComponent(technicalObjectUsageId))
.replace('technicalObjectIdToSubstitute', '{technicalObject}')
)

If you have multiple IdPs configured for login in your subaccount (or such a configuration could occur in the future), you will need to ensure that your URL includes a sap_idp query parameter.

In this case you can store the IdP origin key (which can be found in the Trust Configuration page for the subaccount in the BTP Cockpit) in an idpOriginKey variable and construct the complete URL as below:

console.dir(baseUrl
.replace('superiorFunctionalLocationIdToSubstitute', '{superiorFunctionalLocationId}')
.replace('#', '?sap_idp=' + idpOriginKey + '#') + '&selectNodesWithUsageId=' +
encodeURIComponent(encodeURIComponent(technicalObjectUsageId))
.replace('technicalObjectIdToSubstitute', '{technicalObject}')
)

After May 2024, it will be possible to specify hide the shell header of the launchpad that the PLM Visualization launchpad by passing an additional intent parameter with a name of hideShellHeader and a value of true. Below is JavaScript that will create a URL that also includes the intent parameter to hide the shell header:

console.dir(baseUrl
.replace('superiorFunctionalLocationIdToSubstitute', '{superiorFunctionalLocationId}')
.replace('#', '?sap_idp=' + idpOriginKey + '#') +
'&hideShellHeader=true' +
'&selectNodesWithUsageId=' +
encodeURIComponent(encodeURIComponent(technicalObjectUsageId))
.replace('technicalObjectIdToSubstitute', '{technicalObject}')
)

Step 3: APM UI Adaptation (see APM Help Documentation)

Prerequisites:

You have the following roles assigned to your user.

  • KeyUser
  • AdminFlexKeyUser
  • FlexKeyUser
  • FlexPublicViewEditor

Steps:

  • Open the Explore Technical Objects application in the APM launchpad.
  • Select one of the Technical Objects that has a corresponding tagged visualization.
  • Click on the user profile on the top right corner that contains your user avatar (initials, photo or user icon) and select Adapt UI.
  • Select “Embed Content: as section” in the appropriate region.
  • In the dialog shown, specify the title for the tab and the width and height of the iframe.
  • Copy the complete URL from Step 2 and paste it in the URL text area.
  • Click Show Preview.
  • You should see a URL with the correct superior functional location id and technical object id the visualization loaded in the viewer and the technical object selected.
  • Click “Save”
  • Clicknickwang1_15-1710377268070.pngbutton to activate the new version.

SAP Asset Performance Management  PLM (Product Lifecycle Management) SAP Enterprise Product Development 

SAP Asset Performance Management
SAP Asset Performance Management
SAP Intelligent Asset Management
PLM (Product Lifecycle Management)
PLM (Product Lifecycle Management)
Software Product Function
SAP Enterprise Product Development
SAP Enterprise Product Development
Product Lifecycle Management