How to use the Web Content tile

The Web Content tile enables you to enrich your dashboards with data from other web pages and custom HTML.

Overview

The Web Content tile allows you to display other web pages embedded into your dashboards, or provide custom HTML that will be rendered on the page by SquaredUp.

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

• Add text and links
• Embed a web page

The walkthroughs in this article show some of the common ways the Web Content tile can be configured.

Walkthrough: Adding text and links

This walkthrough takes you through adding HTML content such as text and hyperlinks to a dashboard, for example you may like to add a Service Status message.

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

2. Paste your HTML into the box.
   

   For example:

   <h1>
   <a href="https://support.squaredup.com" style="color:#FC5751;" target="_blank">Knowledge Base</a></h1>
   <h3>Find articles on every aspect of Dashboard Server.</h3>

   Take care to add a colour to the link, otherwise in dark mode the default black will make the text difficult to see.

   To make your link open in a new tab add target="_blank" to your link tag: <a href="http://support.squaredup.com" target="_blank">
3. Click next.

4. Drag the height bar to ensure all the content is shown. The display section allows you to change the way the tile displays, such as the height of the tile, the zoom level, show a border, and enable scrolling.
   

5. Click done.

6. Exit dashboard editing by clicking the cog button at the top right of the page.
   

7. Test that the hyperlink works.

Walkthrough: Embedding a web page (iframe)

It is often useful to be able to show another web page within SquaredUp, for example on the status page for a website.

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

2. Click URL and in the Website URL box paste in an absolute URL to the page to be displayed, such as http://azure.microsoft.com/en-us/status/

   
   Some pages are designed not to work within an iframe and will not display. In Internet Explorer, you might see a message This content cannot be displayed in a frame, in Chrome and Firefox the iframe may appear blank. See below

3. Click next.
4. Drag the height bar to ensure all the content is shown. The display section allows you to change the way the tile displays, such as the height of the tile, the zoom level, show a border, enable scrolling, automatic refresh, and opening in a new window.
5. Check the tick box open in a new window when clicked.
6. Click done.

7. Exit dashboard editing by clicking the cog button at the top right of the page.
   

8. Test that the web page opens in a new tab when clicked.

FAQs about embedding web pages

Can I show another SquaredUp dashboard?

If you have multiple SCOM management groups you may wish to create a single dashboard by embedding other SquaredUp dashboard(s) using the Web Content tile.

To embed another SquaredUp dashboard using the Web Content tile you will first need to whitelist your SquaredUp site as described in Whitelisting sites below.

Once the site is whitelisted you can simply paste the dashboard URL into the Content > Website URL section of the Web Content tile.

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

If the URL already uses a ? then you will need to append & first, for example, &?display=embed

Why won't this web page display?

To find out more about why the page isn't displaying you can view the error by pressing F12, clicking on Console, then refreshing the SquaredUp page.

http pages cannot be embedded in https pages

For security reasons http pages cannot be embedded in https pages. See Why you should not mix http and https when using iframes.

Sameorigin

It is common for websites to actively disallow embedding. This is done by setting a specific HTTP header (X-Frame-Options) which controls cross-origin requests. If the website does not allow embedding then Chrome and Firefox show a blank iframe in SquaredUp, whereas Internet Explorer shows an error. Unless the web page is hosted internally and you can ask the maintainer of the site to make an exception, there isn't much you can do if a website does not allow embedding.

To learn more about cross-origin requests (specifically on an iframe) see CrossOriginResourceSharing and X-Frame-Options Response Header.

Blocked script execution

For security reasons scripts cannot be run in Web Content tiles (iframes) in SquaredUp v4.6 onwards.

In this situation the web content tile might displaying nothing for that site, display the site in a poorly formatted manner, or there may be a message from the site itself indicating that it requires JavaScript to function correctly.

You can at your own risk override this security setting by whitelisting trusted sites. To embed another SquaredUp dashboard using the Web Content tile you will need to whitelist your SquaredUp site.

Whitelisting sites

You will need to connect to your SquaredUp server.

1. On the SquaredUp for Azure server, run Notepad as administrator (Start, Run, type notepad, and then right-click and select Run as administrator).

2. Open the following file from the squaredupv4 folder:

   User/Configuration/security.json

   For an Azure Marketplace deployment the squaredupv4 folder will typically be located at F:\squaredupv4.

   For an install using the downloadable installer the default location is C:\inetpub\wwwroot\SquaredUpv4, but a custom location may have been chosen during the installation.

3. You can add a whitelist of sites for which scripts are allowed to run by adding the following:

   "enable-embedded-scripts-whitelist": [
   "https://squaredupserver1.squaredup.com/",
   "https://squaredupserver2.squaredup.com/"
   ]

   If security.json already contains settings, then you will need to add a comma at the end of the previous line.

4. Save the json file.
5. Recycle the SquaredUpv4 application pool.

Why does the embedded web page not work when I click the tile?

Internet Explorer and Edge do not allow tabs opened from an iframe to run JavaScript. This can cause pages to break when viewed in a new tab after clicking on a Web Content tile with the open in new window when clicked option enabled. Chrome and Firefox do not have this issue.

Does the Web Content tile work with Open Access on SquaredUp v4?

Web Content tiles are not supported with Open Access on SquaredUp v4. On SquaredUp v4 Open Access works by taking an image of the dashboard, and in many cases this does not work with the Web Content tile. Slow webpages will show as blank in Open Access on v4.

Many Web Content tiles will work with Open Access on v5.

Webpages requiring authentication will not work because Open Access does not use any authentication.

Why can't I see the bottom of the web page in my tile?

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.

JSON Reference

Sample Configuration

{
	"_type": "tile/web-content",
	"config": {
		"context": {},
		"source": {},
		"display": {
			"height": 618,
			"zoom": 1,
			"border": true,
			"scrolling": false,
			"refresh": false,
			"src": "http://azure.microsoft.com/en-us/status/",
			"content": "",
			"link": true
		}
	},
	"title": "Azure status",
	"description": ""
}

Schema reference