Embedding BMC Helix Platform views in external applications

You can now embed BMC Helix Platform views in external applications that are not running on BMC Helix Platform, for example, BMC Helix Digital Workplace Advanced is considered an external application for BMC Helix Platform. You can embed multiple BMC Helix Platform views in both cloud and on-premises applications of BMC Helix Digital Workplace Advanced. 

Embedding an BMC Helix Platform view in an external application provides the following benefits: 

• Leverages BMC Helix Platform's capabilities in any application that is not running on BMC Helix Platform.
• Provides seamless navigation to BMC Helix Platform.
  If both the external application and BMC Helix Platform use Remedy Single Sign-On (Remedy SSO), users can access the BMC Helix Platform view without providing the login credentials again.

To embed an BMC Helix Platform view in an external application, an HTML Inline Frame element (iFrame) which contains the view is added to a page in the external application. If the embedded view creates or modifies any record instances, they are created or modified in BMC Helix Platform.  If the embedded view is modified in any way in BMC Helix Platform, the changes are visible after the page is refreshed in the external application.

The following image is an example of an BMC Helix Platform view that is launched from the admin console of BMC Helix Digital Workplace Advanced:

Workflow to embed BMC Helix Platform views in external applications

The following table described the actions that a developer and an administrator performs to embed BMC Helix Platform view in external applications:

Before you begin

Configure Remedy SSO OAuth 2.0 authentication for both BMC Helix Platform and your external application, so that the external application's users are automatically authenticated and do not need to log in separately to access the embedded View. 

For configuration information, see Using authorization REST APIs to consume BMC Remedy Single Sign-On.

To prepare a view for external applications

In a codeless application, create a view or use an existing view and customize it to suit your business needs. The view can then be embedded in an external application.

1. Log in to BMC Helix Innovation Studio.

2. For a codeless application, create a view or use an existing view.

   The view can contain both out-of-the-box view components and custom view components. 
   For more information about developing codeless applications, see Developing codeless applications. 

   For more information about creating and customizing views, see Defining the user interface through view definitions.

3. Format the view such that it is consistent with the external application's style.
   For more information about customizing the skin and logo of the view, see Tailoring the application skin and brand.

To enable a BMC Helix Platform view to load in iFrame of external application

Specify the trusted URL of an external application, so that the BMC Helix Platform view can be loaded in the iFrame of an external application. You can add multiple external application URLs to permit multiple applications to contain the embedded views.

1. Log in to BMC Helix Innovation Studio and navigate to the Administration tab. 

2. Select Configure My Server > Helix Platform > Iframe Security.

3. From the Iframe Security page, from the Trusted web applications allowed to display BMC Helix Platform views section, click Add URL, and enter the address of the external application where you want to embed the BMC Helix Platform view.
   The following are a few examples of acceptable URLs for external applications:

   http://host.com, view.host.com:443, https://view.host.com, or http://182.167.1.1 .

   Note

   Do not include any wildcard character, such as asterisk (*) in the URL.

   The following image shows a completed Iframe Security page:
   

4. Click Save.

The BMC Helix Platform view can now be embedded in the external application. If you modify the embedded view in BMC Helix Platform, the changes are available after you refresh the external application's console. Any record instances that get created by using the BMC Helix Platform view from the external application are saved in BMC Helix Platform.

To configure the external application to embed the BMC Helix Platform view

External applications use inline frame (iFrame) HTML element to launch the embedded BMC Helix Platform view, because out-of-the-box BMC Helix Innovation Studio view components cannot be launched from cross-origin requests. By using the iFrame HTML element, BMC Helix Platform communicates with the external application and provides access to the embedded view.

The external application's administrator must perform the following actions:

1. Update the hosts file with tenant Virtual Host Name and map it to IP address of Innovation Studio and IP address of target RSSO, if required.

2. Build the URL for accessing the BMC Helix Platform view by using JavaScript. 

   The JavaScript points to BMC Helix Platform and the contains the BMC Helix Platform view properties.

    Click here to know the procedure.

   1. Create a BMC Helix Platform URL.
      Do not include the Shell navigation items such as the header and navigation, because the external application has its own header and navigation.
      To create the URL, perform the following tasks:
      1. In BMC Helix Innovation Studio, navigate to the view that you want to embed.
      2. Copy the URL of the view from the browser.
      3. Edit the URL by replacing the text view with iview.
         For example, URL https://example.on-bmc.com/innovationsuite/index.html#/com.example.CustomApp/view/com.example.CustomApp:TestRun becomes https://example.on-bmc.com/innovationsuite/index.html#/com.example.CustomApp/iview/com.example.CustomApp:TestRun

   2. Construct the RSSO cross launch URL to use it as the src URL for the iFrame tag.

      The RSSO cross launch URL enables you to use RSSO and authenticate the users that currently logged in to the external application, so that they are not prompted to log in again.

      To construct the RSSO cross launch URL, perform the following tasks:

      1. Follow the instructions on the RSSO Cross Launch Instructions page to construct the RSSO cross-launch URL.
      2. Use the BMC Helix Platform view URL as the goto URL in the RSSO cross-launch URL.
         For example, URL https://rsso-cloud-server/rsso/cross-sso?goto=<view-url>#jwt=<jwt> becomes https://rsso-cloud-server/rsso/cross-sso?goto=https://example.on-bmc.com/innovationsuite/index.html#/com.example.CustomApp/iview/com.example.CustomApp:TestRun#jwt=<jwt>
3. On the page in the external application to which you want to embed the view, add script tags <script></script> within the body of the page.
4. Add the following JavaScript code within the open and close script tags:
   

   <iFrame src=<rsso-cross-launch-url> width="200" height="200">
   </iFrame>

5. Replace the string <rsso-cross-launch-url> with the RSSO cross-launch URL you just constructed.

6. Enable the BMC Helix Platform application feature.
7. Place the BMC Helix Platform view on a custom page of the external application's console.

For information about how to configure the external application for embedding the BMC Helix Platform view, see  Embedding custom pages from BMC Helix Platform .

To remove access to an embedded view

When you remove an external application's URL from the iFrame Security section of the Administration area in BMC Helix Innovation Studio, the embedded views are no longer visible in the external application.

1. Log in to BMC Helix Innovation Studio and navigate to the Administration tab. 
2. Select Configure My Server > Helix Platform > iframe Security.

3. From the iframe Security page, click the Cancel icon  beside the external application's URL for which you want to remove the embedded view.

   The embedded view is removed from the external application. Ensure that you also remove the custom page of external application that connects with the BMC Helix Platform view.

The embedded view is no longer visible in the external application. As a best practice, you must remove the JavaScript code from the external application's page that contains the iFrame code.