This article only applies to Squared Up Version 2.0. If you're looking for help with Squared Up Version 3.0, please visit our new knowledge base

Overview

The Squared Up Web Content (or IFrame) plugin enables you to enrich your dashboards with data from other web pages and custom HTML. This document describes how to get started with the Web Content plugin.

Download the Web Content (IFrame) plugin

This plugin is not installed with Squared Up, please contact Support if you need it.

Configuration


Click the orange + to create a new section within the dashboard designer, and select 'Web content' from the selection gallery.



There are several different ways you can use the Web Content plugin:

A. Add text and links to a dashboard, such as Service Status messages

B. Display a web page within the iframe.

C. Display a Squared Up dashboard within the iframe.

D. Show vertical buttons to hyperlink to another dashboard or an external site.

E. Show horizontal buttons.


A. Add text and links to a dashboard, such as Service Status messages

This short video gives a great run through of using this plugin to add Service Status messages to your dashboards:

https://youtu.be/qrO3rIzi-dM



Here are the steps to add HTML content, such as text and a custom link to your dashboard:

1. Add a new section to your dashboard by clicking the orange + and choose the type 'Web content'.

2. Click on 'HTML'.

3. Paste your HTML into the box:

For example:

<b>A title</b><br>Some information<br>A link for more information <a href="http://support.squaredup.com/support/solutions/articles/206767" target="_blank">How to configure the Web Content Plugin</a>



4. Click 'next'.

5. The display section allows you to change the way the iframe displays, such as the height of the iframe, the zoom level, show a border, enable scrolling and enable an automatic refresh.  When adding HTML you probably only need to adjust the height to ensure all the information is shown.

6. Click 'done'.


B. How to display a web page within the iframe

1. 'Url' is selected by default, so just type in an absolute URL to the web content to be displayed, such as http://www.example.com


Some pages are designed not to work within an iframe and will not display. There is nothing you can do to make them display. In Internet Explorer, you might see a message 'This content cannot be displayed in a frame'. Pressing F12 to view the developer console usually shows an error, e.g. (see below for more information)

2. Click 'next' and adjust the height slider as required to show the whole web page.



3.The zoom allows the content to be scaled up or down within the section, which you might like to adjust if you'd like the page show to be shown smaller.

4. Click 'done'.


Iframes are not supported with Open Access, because in many cases they do not work. Slow webpages will show as blank in Open Access. Webpages requiring authentication will not work on an Open Access page because Open Access does not use any authentication.

C. How to display a Squared Up Dashboard within the iframe

1. In Squared Up browse to the dashboard you want to display in the iframe and note the filename in the URL. To display a Squared Up dashboard you can simply use the dashboard filename, e.g.

servers

or

mydomain.demoadmin-20151230112833


2. It looks better if you remove the navigation bar from the embedded dashboard.  To do this click the 'link' button:

3. Click on 'normal' and then 'embed' and when you click 'generate' ?embed=true will be appending to the URL so that the navigation bar and page title are removed. If you prefer you can use an Open Access URL so users do not need to login to view the static information.  Copy the URL.

4. Add a new section to your dashboard by clicking the orange + and choose the type 'Web content'.

5. 'Url' is selected by default, so just paste in the URL.


In the iframe section of your new dashboard paste in either the whole URL or just the part from the filename onwards e.g.

servers?sectiontitles=false&embed=true

mydomain.demoadmin-20151230112833?embed=true


?embed=true can be appended to the URL to hide the navigation bar and page title.

?fullscreen=true can be appended to the URL to hide the navigation bar.

For more URL options see URL Parameters


6. Click 'next' and adjust the height slider as required to show the whole web page.

7. Click 'done'.

D. Show vertical buttons linking to other content

1. Add a new section to your dashboard by clicking the orange + and choose the type 'Web content'.

2. Click on 'HTML'.

3. Copy the following example HTML and edit the links and button names as required:

    

<ul class="vertical-menu"  style='width:15%'>  
<a href="servers"><li>Dashboard by name only</li></a>
<a href="/SquaredUp/grid/group?objectid=603c9394-cbf5-a5d1-be77-45c0d6755902"><li>Object view - e.g. IIS Computers</li></a>
<a href="/SquaredUp/performance/GroupMembers?objectId=c7c46c36-4adf-76e2-c3e7-706b1b2d5520&objectName=Health%20Service&counterName=agent%20processor%20utilization&timeframe=Last12Hours&fromDateTimeUtc=06%2F09%2F2014%2001%3A47%3A31&toDateTimeUtc=06%2F09%2F2014%2013%3A47%3A31"><li>Performance view</li></a>
<a href="http://azure.microsoft.com/en-us/status/" target="_blank"><li>External link in another tab</li></a>
</ul>


4. Paste the edited HTML into the box:

5. Click 'next' and adjust the height slider as required to show all the buttons.

6. Click 'done'.


E. Show horizontal buttons

1. Add a new section to your dashboard by clicking the orange + and choose the type 'Web content'.

2. Click on 'HTML'.

3. Copy the following example HTML and edit the links and button names as required:

  

<ul class="horizontal-menu"><a href="servers"><li style="background-color:orange; color:white">Servers Dashboard</li></a> <a href="/squaredup/performance/GroupMembers?objectId=c7c46c36-4adf-76e2-c3e7-706b1b2d5520&objectName=Health%20Service&counterName=agent%20processor%20utilization&timeframe=Last12Hours&fromDateTimeUtc=06%2F09%2F2014%2001%3A47%3A31&toDateTimeUtc=06%2F09%2F2014%2013%3A47%3A31"><li style="background-color:orange; color:white">Object View</li></a> <a href="http://azure.microsoft.com/en-us/status/"><li style="background-color:orange; color:white">External link</li></a> </ul> 

  

4. Paste the edited HTML into the box:

5. Click 'next' and adjust the height slider as required to show all the buttons.

6. Click 'done'.



FAQ

Q. Why can't I see the bottom of the page in my iframe?

A. To show a longer page click on 'display' in the section settings and adjust the height slider as required to show the whole web page.

Q. How do I change the width of the buttons?

A. You can specify the width in pixels or percent, for example 15% or 150px, like this:


<ul class="vertical-menu" style='width:15%'>

Q. How do I change the button colour?

A. You can add a colour to an individual button like this:

<a href="http://azure.microsoft.com/en-us/status/"><li style="background-color:orange"><b>External link<b></li></a>

Q. How do get my link to open in a new tab / window?

A. Add target="_blank" to the end of your link, this will open it in a new tab:

<a href="http://azure.microsoft.com/en-us/status/" target="_blank"><li style="background-color:orange"><b>External link<b></li></a>

Q. How do I embed SCOM reports into Squared Up?

A. The following blog post written by David Allen describes how you can embed your SCOM reports into the IFrame plugin, SCOM – Embedding SCOM Reports in SquaredUp.

Q. Will iframes work on an Open Access dashboard?

A. Iframes are not supported with Open Access, because in many cases they do not work. Slow webpages will show as blank in Open Access. Webpages requiring authentication will not work on an Open Access page because Open Access does not use any authentication.

Q. Why won't this web page display in the iframe?

It is common for websites to actively disallow embedding them.

This is done by setting a specific HTTP header (X-Frame-Options). There isn't much we can do about this unless the web page is hosted internally and you can ask the maintainer of the site to make an exception!

If you would like to learn more about cross-origin requests and iframes; the following links should help:

CrossOriginResourceSharing

X-Frame-Options Response Header


XML Configuration

The dashboard designer writes these settings as XML to a dashboard file within C:\inetpub\wwwroot\SquaredUpv2\Configuration\Views. Below is an example of the XML it will write for this section:   

<?xml version="1.0"?>
<View xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" MajorVersion="1" MinorVersion="0">
  <Title>iframe test</Title>
  <Scope>
    <Inheritance>Replace</Inheritance>
    <Filters />
    <Objects />
  </Scope>
  <Sharing>
    <InitialId>13992308-32ec-41a5-baba-3b2307886d48</InitialId>
    <RevisionId>8a033cc9-0895-47fe-9e3f-a9bb2b2611be</RevisionId>
  </Sharing>
  <Sections>
    <Section>
      <Id>1452160282988</Id>
      <Title>A. Add text and links to a dashboard, such as Service Status messages</Title>
      <Plugin>Iframe</Plugin>
      <RequiredPluginVersion>
        <Major>2</Major>
        <Minor>10</Minor>
      </RequiredPluginVersion>
      <Settings>
        <NameValueSetting>
          <Name>zoom</Name>
          <Value>1</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>height</Name>
          <Value>90</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>border</Name>
          <Value>true</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>scrolling</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>refresh</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>link</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>content</Name>
          <Value>&lt;b&gt;A title&lt;/b&gt;&lt;br&gt;Some information&lt;br&gt;A link for more information &lt;a href="http://support.squaredup.com/support/solutions/articles/206767" target="_blank"&gt;How to configure a Web Content section (Iframe Plugin) using the Dashboard Designer&lt;/a&gt;</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>src</Name>
          <Value />
        </NameValueSetting>
      </Settings>
    </Section>
    <Section>
      <Id>1452160557658</Id>
      <Title>B. How to display a web page within the iframe</Title>
      <Plugin>Iframe</Plugin>
      <RequiredPluginVersion>
        <Major>2</Major>
        <Minor>10</Minor>
      </RequiredPluginVersion>
      <Settings>
        <NameValueSetting>
          <Name>src</Name>
          <Value>http://www.squaredup.com</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>zoom</Name>
          <Value>0.3</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>height</Name>
          <Value>600</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>border</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>scrolling</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>refresh</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>link</Name>
          <Value>false</Value>
        </NameValueSetting>
      </Settings>
    </Section>
    <Section>
      <Id>1452160620264</Id>
      <Title>C. How to display a Squared Up Dashboard within the iframe</Title>
      <Plugin>Iframe</Plugin>
      <RequiredPluginVersion>
        <Major>2</Major>
        <Minor>10</Minor>
      </RequiredPluginVersion>
      <Settings>
        <NameValueSetting>
          <Name>src</Name>
          <Value>Servers?embed=true</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>zoom</Name>
          <Value>1</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>border</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>scrolling</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>refresh</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>link</Name>
          <Value>false</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>height</Name>
          <Value>320</Value>
        </NameValueSetting>
      </Settings>
    </Section>
    <Section>
      <Id>1452160755875</Id>
      <Title>D. Show vertical buttons linking to other content</Title>
      <Plugin>Iframe</Plugin>
      <RequiredPluginVersion>
        <Major>2</Major>
        <Minor>10</Minor>
      </RequiredPluginVersion>
      <Settings>
        <NameValueSetting>
          <Name>zoom</Name>
          <Value>1</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>content</Name>
          <Value>&lt;ul class="vertical-menu"  style='width:15%'&gt;  
&lt;a href="servers"&gt;&lt;li style="background-color:orange"&gt;Dashboard by name only&lt;/li&gt;&lt;/a&gt;
&lt;a href="/SquaredUp/grid/group?objectid=603c9394-cbf5-a5d1-be77-45c0d6755902"&gt;&lt;li&gt;Object view - e.g. IIS Computers&lt;/li&gt;&lt;/a&gt;
&lt;a href="/squaredup/performance/GroupMembers?objectId=c7c46c36-4adf-76e2-c3e7-706b1b2d5520&amp;objectName=Health%20Service&amp;counterName=agent%20processor%20utilization&amp;timeframe=Last12Hours&amp;fromDateTimeUtc=06%2F09%2F2014%2001%3A47%3A31&amp;toDateTimeUtc=06%2F09%2F2014%2013%3A47%3A31"&gt;&lt;li&gt;Performance view&lt;/li&gt;&lt;/a&gt;
&lt;a href="http://azure.microsoft.com/en-us/status/" target="_blank"&gt;&lt;li&gt;External link in another tab&lt;/li&gt;&lt;/a&gt;
&lt;/ul&gt;</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>height</Name>
          <Value>300</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>src</Name>
          <Value />
        </NameValueSetting>
      </Settings>
    </Section>
    <Section>
      <Id>1452160790449</Id>
      <Title>E. Show horizontal buttons</Title>
      <Plugin>Iframe</Plugin>
      <RequiredPluginVersion>
        <Major>2</Major>
        <Minor>10</Minor>
      </RequiredPluginVersion>
      <Settings>
        <NameValueSetting>
          <Name>zoom</Name>
          <Value>1</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>content</Name>
          <Value>&lt;ul class="horizontal-menu"&gt;&lt;a href="servers"&gt;&lt;li style="background-color:orange; color:white"&gt;Servers Dashboard&lt;/li&gt;&lt;/a&gt; &lt;a href="/squaredup/performance/GroupMembers?objectId=c7c46c36-4adf-76e2-c3e7-706b1b2d5520&amp;objectName=Health%20Service&amp;counterName=agent%20processor%20utilization&amp;timeframe=Last12Hours&amp;fromDateTimeUtc=06%2F09%2F2014%2001%3A47%3A31&amp;toDateTimeUtc=06%2F09%2F2014%2013%3A47%3A31"&gt;&lt;li style="background-color:orange; color:white"&gt;Object View&lt;/li&gt;&lt;/a&gt; &lt;a href="http://azure.microsoft.com/en-us/status/"&gt;&lt;li style="background-color:orange; color:white"&gt;External link&lt;/li&gt;&lt;/a&gt; &lt;/ul&gt;
</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>height</Name>
          <Value>200</Value>
        </NameValueSetting>
        <NameValueSetting>
          <Name>src</Name>
          <Value />
        </NameValueSetting>
      </Settings>
    </Section>
  </Sections>
</View>

     

XML Settings Reference

NameValuesCommentsRequiredDesigner
src<URL>The URL of the external web content.Yes (unless content is specified).Yes
zoom<decimal>Zoom the contained iframe content. Typically used with zoom < 1 to scale the content to fit the section. Not supported on IE8. (default: 1)YesYes
content<HTML fragment>An HTML fragment.
HTML content is restricted using the iframe sandbox attribute. The following attributes are added if the src (i.e. url) is the same origin:
allow-scripts allow-forms allow-top-navigation
The following if the iframe is using content (see no allow-scripts):
allow-same-origin allow-forms allow-top-navigation allow-popups 
Yes (unless src is specified).Yes
width<number of pixels>Default: full width of the section.NoYes
height<number of pixels>Default: equal to the width (i.e. square aspect ratio).No

Yes

bordertrue | false (default)Draw a border around the iframe content.NoYes
scrollingtrue | false (default)Enable scroll bars on the iframe content.NoYes
refreshtrue (default: if src is specified) | false (default: if content is specified)Refresh the content of the iframe when the dashboard automatically refreshes.NoYes
linktrue | false (default)Open the src URL in a new tab when the iframe is clicked.NoYes

When using the "content" parameter, the "src" parameter must not exist or the content will not be rendered. This can be achieved either by editing the text in the name column within the grid and changing it from "src" to "content" or delete the "src" parameter by clicking on the delete link to the right and use "add new setting" to add a new parameter with the name "content". Then, in either case, add the required HTML in the value column.





See also:

The Dashboard Designer - The Quick Start Guide