Embedding BMC Helix Innovation Studio views in external applications

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

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

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

To embed an BMC Helix Innovation Studio 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 Innovation Studio.  If the embedded view is modified in any way in BMC Helix Innovation Studio, the changes are visible after the page is refreshed in the external application.

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

Workflow to embed BMC Helix Innovation Studio views in external applications

The following table described the actions that an application business analyst and an administrator performs to embed BMC Helix Innovation Studio view in external applications:

Before you begin

Configure Remedy SSO OAuth 2.0 authentication for both BMC Helix Innovation Studio 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 Helix 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 Innovation Studio view to load in iFrame of external application

Specify the trusted URL of an external application, so that the BMC Helix Innovation Studio 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 Integrations > Iframe security.

3. From the Iframe security page, from the Trusted web applications section, enter the address of the external application where you want to embed the BMC Helix Innovation Studio view, and click Add to list.
   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.

4. Click Save.

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

To configure the external application to embed the BMC Helix Innovation Studio view

External applications use inline frame (iFrame) HTML element to launch the embedded BMC Helix Innovation Studio 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 Innovation Studio 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 Innovation Studio view by using JavaScript. 

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

   Click here to know the procedure.

   1. Create a BMC Helix Innovation Studio 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 Innovation Studio 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 Innovation Studio application feature.
7. Place the BMC Helix Innovation Studio 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 Innovation Studio view, see Embedding custom pages from BMC Helix Innovation Studio or external sites.

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 Integrations > Iframe security.

3. From the iframe security page, click the Delete 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 Innovation Studio 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.