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 Squared Up.

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.

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.

    Web Content tile

  2. Paste your HTML into the box.

    For example:

     <b>A title</b><br/>
     Some information<br/>
     A link for more information <a href="https://support.squaredup.com/v3/Walkthroughs/Tiles/HowToUseTheWebContentTile">How to use the Web Content tile</a>
    
    To make your link open in a new tab add target="_blank" to your link tag: <a href="http://azure.microsoft.com/en-us/status/" 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.

    Web Content Height

  5. Click done.

Walkthrough: Embedding a web page (iframe)

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

Web Availability <>

  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://www.example.com

    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

Q. Why won’t this web page display?

Firstly, 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 Squared Up, 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 see if this is the case you can view page errors by pressing F12, clicking on Console, then refreshing the Squared Up page.

F12 Chrome Same Origin <>

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

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

Q. Does the Web Content tile work with Open Access?

A. Web Content tiles 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. Can I show another Squared Up dashboard?

A. To display a Squared Up 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.

Q. Can I embed SCOM reports in Squared Up?

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

The following blog post written by David Allen describes how you can embed your SCOM reports using the Web Content tile:

SCOM – Embedding SCOM Reports in Squared Up (Note - this video shows Squared Up v2).

Q. Why can’t I see the bottom of the web page in my tile?

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.

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="/SquaredUpv3/drilldown/scomobject?id=603c9394-cbf5-a5d1-be77-45c0d6755902"><li>Object view - e.g. IIS Computer Group</li></a>
     <a href="/SquaredUpv3/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="/SquaredUpv3/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

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>

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

Name Values Required Designer Comments
height integer false true Sets the height of the tile, which will affect how much of the content may be visible.
zoom decimal false true Zooms the displayed content by specified value. 1.25 would increase the zoom by 25%, 0.5 would half the size.
border true | false false true true will enable the display of a border around the tile. Defaults to false if unspecified.
scrolling true | false false true true will enable scrollbars on the tile if the content is larger than the tile. Defaults to false if unspecified.
refresh true | false false true true will enable automatic refresh of content in the tile. Defaults to false if unspecified.
src text false true The URL that the tile should pull content from. Mutually exclusive with content
content text false true The HTML that will be rendered inside the tile. You must ensure any double quotes are escaped if present in the HTML. Mutually exclusive with url.
link true | false false true true will enable navigation to the page specified by src. Defaults to false if unspecified.

SCOM – Embedding SCOM Reports in Squared Up

CrossOriginResourceSharing

X-Frame-Options Response Header label: How to use the Web Content tile keywords: web content iframe URL custom link links hyperlinks embed embedding