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
• Show buttons with hyperlinks

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. Click done.

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?

There are several reasons why an embedded webpage may not display properly.

• http pages cannot be embedded in https pages
• The website itself does not allow embedding see Sameorigin
• The website may use scripts which SquaredUp does not allow, see Blocked script execution.

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

1. On the SquaredUp 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 (or create the file if it doesn't exist):

   User/Configuration/security.json

   Typically this is located here:

   C:\inetpub\wwwroot\SquaredUpv4\User\Configuration\security.json

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

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

   So that the whole file looks something like this:

   {
   "enable-visio-svg-sanitization": true,
   "enable-embedded-scripts-whitelist": [
   "https://squaredupserver1.squaredup.com/",
   "https://squaredupserver2.squaredup.com/"
   ]
   }

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?

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.

Can I show another SquaredUp dashboard?

To display a SquaredUp dashboard 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. 

Can I embed SCOM reports in SquaredUp?

Yes, you can use the URL of the SCOM report in the Content > Website URL section of the Web Content tile.

You may need to whitelist your SquaredUp site as described in Whitelisting sites above.

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.

Walkthrough: 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. Copy the following example HTML and edit the links and button names as required:

   <ul class="vertical-menu" style='width:15%'>
   <a href="dashboard-alerts"><li>Dashboard by name only</li></a>
   <a href="/SquaredUpv4/drilldown/scomobject?id=603c9394-cbf5-a5d1-be77-45c0d6755902"><li>Object view - e.g. IIS Computer Group</li></a>
   <a href="/SquaredUpv4/drilldown/scomperformance?objectid=eca29c3a-8681-5505-9ca5-2aa4fe3a9744&objectname=Memory&countername=PercentMemoryUsed&instancename=#range=Last12Hours"><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>

3. Paste the edited HTML into the HTML Content box.

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

Walkthrough: Horizontal buttons

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

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

   <ul class="horizontal-menu">
   <a href="dashboard-alerts"><li style="background-color:orange; color:white">Dashboard by name only</li></a>
   <a href="/SquaredUpv4/drilldown/scomobject?id=603c9394-cbf5-a5d1-be77-45c0d6755902"><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>

3. Paste the edited HTML into the box.

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

FAQs about buttons

How do I change the width of the buttons?

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

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

How do I change the button colour?

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>

JSON Reference

Sample Configuration

{
    "_type": "tile/web-content",
    "config": {
        "context": {},
        "source": {},
        "display": {
            "height": 300,
            "zoom": 1.25,
            "border": false,
            "scrolling": false,
            "refresh": false,
            "src": "",
            "content": "<ul class=\"vertical-menu\" style='width:15%'><a href=\"dashboard-alerts\"><li>Dashboard by name only</li></a><a href=\"http://azure.microsoft.com/en-us/status/\" target=\"_blank\"><li>External link in another tab</li></a></ul>",
            "link": false
        }
    },
    "title": "Sample Web Content tile",
    "description": "Displays some custom HTML content"
}

Schema reference