KB-1080 Embedded interface overrides site style

Parmida Borhani — Mon, 30 Jul 2018 03:56:43 GMT

Current Revision posted to Appian Knowledge Base by Parmida Borhani on 7/30/2018 3:56:43 AM

Symptoms

When using an embedded interface in an external site where you do not control the style source (CSS), the styling on the site gets modified and causes undesirable behavior.

Users may experience one or more of the following symptoms using SharePoint specifically:

The font size changes in the main site containing the embedded interface.
Some links change color.
The spaces between words change.
In IE9, the SharePoint menu is removed
In IE10, the interface will not load after a refresh

Other sites may cause different, undesirable behavior.

Cause

The site hosting the embedded interface is not properly isolating the input HTML/JS/CSS.

Action

Isolate the embedded interface by wrapping the HTML/JS/CSS in an iframe.

An example of an iframe is as follows:

<pre>
<!DOCTYPE html>
<html>
   <head>
      <script>
         function render() {
         var scriptFrame = document.createElement('iframe');
         scriptFrame.id = "embedded-iframe";
         scriptFrame.src = 'javascript:""';
         scriptFrame.style.width = "100%";
         scriptFrame.style.height = "750px";
         content.appendChild(scriptFrame);
         
         frameDoc = scriptFrame.contentDocument;
         if (!frameDoc) {
         frameDoc = scriptFrame.contentWindow.document;
         }
         
         var html = '<html>\n<head></head>\n<body style='height: 725px;'>\n<script src='YOUR_APPIAN_URL/suite/tempo/tempo.nocache.js'' + '></scrip' + 't>\n<appian-task taskId='PUT_YOUR_APPIAN_TASK_ID_HERE' />\n</body></html>';
         
         frameDoc.open();
         frameDoc.write(html);
         frameDoc.close();
         }
      </script>
   </head>
   <body>
      <div id='content' style='max-width: 1200px;' />
      <script>
         render();
      </script>
   </body>
</html>

Note: The height of the iframe needs to be static. You can change the size in scriptFrame.style.height and in the HTML variable. The value in the HTML variable needs to be smaller than what is specified for scriptFrame.style.height.

Affected Versions

This article applies to all versions of Appian.

Last Reviewed: February 2017

Tags: embedded interfaces, third-party, integration, application design