Skip to main content

How to use the Web Content tile

Documentation Team
  • Updated

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.

With a Web Content tile you can:

  • Add HTML, for example to add formatted text or links to other websites.

  • Embed web pages via iframe, for example to show web content from another site alongside the data in other tiles on the dashboard.

How to configure the Web Content tile

  1. Create a new tile on a dashboard or perspective and choose the Web Content tile.

  2. Content:

    Here you define what content you want to show:

    URL

    Allows you to embed other websites via iframe. Enter the absolute URL of the site you want to embed, for example http://www.squaredup.com.

    If your site isn't showing, you can find help here: Why isn't my site showing? Troubleshooting embedded websites

    HTML

    Allows you to enter HTML code.

    Tips for using HTML:

    • If you're using colors, make sure they'll work for both light mode and dark mode.

    • To use colors add style="color:blue" or style="background-color:orange; color:white" to your content, for example <a href="https://support.squaredup.com" style="color:#FC5751" target="_blank">Knowledge Base</a>

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

    Copy
    <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>

    You can link to a specific dashboard just by the dashboard's name or ID.
    Note: If you link to a dashboard by its name, the link gets broken if you rename the dashboard. You can avoid that by using the ID instead of the name.

    By name:

    <a href="Dashboard-name">Dashboard name</a>

    Example:
    <a href="dashboard-actionable-alerts">Actionable alerts dashboard</a>

    By ID:

    <a href="ID">Dashboard name</a>

    Example:
    <a href="0c45d3e1-ab1a-4704-b475-879c59f4738e">Actionable alerts dashboard</a>

    1. Go to the dashboard of which you want to see the ID.

    2. Click on the share this dashboard button:

    3. The Sharing options will open.

    4. Under Normal, you can see the sharing URL. The last part of the URL after /page/ is the dashboard's ID.

    You can link to an object or a specific perspective of an object. If you link to an object the link will open the first perspective of the perspective ribbon of the object. If you link to a perspective, the link will open this specific perspective for the object.

    Tip: You can find the necessary URL by just navigating to the object or perspective. Copy and paste the URL from there, and use it in the Web Content tile. .

    Link to an object:

    <a href="/ProductVersion/drilldown/scomobject?id=Object_ID">Object name</a>

    Example:
    <a href="/SquaredUpv5/drilldown/scomobject?id=603c9394-cbf5-a5d1-be77-45c0d6755902"> IIS Computer Group</a>

    Link to a specific perspective for an object:

    <a href="/ProductVersion/drilldown/scomobject?id=Object_ID#perspective-objects-Perspective_Name">Perspective name</a>

    Example:
    <a href="/SquaredUpv5/drilldown/scomobject?id=e35ec3ce-d5a4-79a4-fc76-3cc5215a9fad#perspective-objects-allperformance">Performance perspective for myserver.com</a>


  3. Display:

    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.

    Height

    Allows you to change the height of the tile. Use the slider to make the tile's size fit best for your content.

    ZoomAllows you to change the size of the content shown in the tile.
    Options

    Show border: Adds a border around the content of the tile.

    Enable scrolling: Adds a scroll bar to then content of a tile. Allowing your users to scroll down might be necessary if height and zoom can't make the embedded website or HTML content fit into the tile.

    Automatically refresh(only for embedded websites): Reloads the embedded website automatically.

    Open in new window when clicked (only for embedded websites): If this option is checked, the whole tile becomes a link that opens the embedded website in a new tab, and users can't use links on the embedded website. If this option is unchecked, users can click on links on the embedded website. It depends on what you are embedding if you want to prevent users from clicking links or need them to be able to click on links within the iframe.

    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.

  4. Click done to save the tile.

    The tile now shows data according to your settings.

How to embed other dashboards via the Web Content tile

You can embed other dashboards from Dashboard Server in your dashboard.

Which dashboards can I embed?

The best way to embed dashboards it to embed Open Access dashboards, since normal dashboards require authentication to show data.

Technically, you can embed normal dashboards, but since they require authentication to show data, this will only be useful when the dashboard you're embedding is on the same Dashboard Server instance as the dashboard that embeds it. Since users are already logged in to see the dashboard in the Dashboard Server instance, they can also see the data from the embedded dashboard.
But if you would try to embed a normal dashboard that is on a different instance of Dashboard Server, the dashboard wouldn't show any data since users are not authenticated. They'd see tiles constantly trying to load data instead.

In both cases, you have to whitelist the server the dashboards are on to see any data.

Any dashboard you embed needs to be in the same domain as the dashboard it gets embedded in. Dashboards that are in a different domain get blocked by your browser due to security reasons for cookies. For example, if you are trying to embed your Community Edition dashboards into your SCOM Edition dashboards, you need to make sure both instances are in the same domain.

How to embed a dashboard in a dashboard via the Web Content tile

  1. Before you can embed Dashboard Server dashboards (including Open Access dashboards), you have to whitelist the server they are on.

    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 security.json file from the following path in your Dashboard Server folder:

      ...\User\Configuration\security.json

      If the file doesn't exist, create it.

      Name of the Dashboard Server folder

      The name of the Dashboard Server folder is SquaredUpv followed by the product version number.

      Location of the Dashboard Server folder

      The default location for the Dashboard Server folder is C:\inetpub\wwwroot\SquaredUpv[Version Number], but a custom location may have been chosen during the installation.
      For example, for Dashboard Server v5 the default folder location is C:\inetpub\wwwroot\SquaredUpv5 and for v4 C:\inetpub\wwwroot\SquaredUpv4

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

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

      So that the whole file looks something like this:

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

      Note: 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 Dashboard Server application pool.

  2. You can either embed a normal dashboard or an Open Access dashboard. Insert either the normal sharing URL (for sharing a normal dashboard) or an Open Access URL (for sharing an Open Access dashboard) in the URL field of the Web Content tile.

    The best way to embed dashboards it to embed Open Access dashboards, since normal dashboards require authentication to show data.

    Technically, you can embed normal dashboards, but since they require authentication to show data, this will only be useful when the dashboard you're embedding is on the same Dashboard Server instance as the dashboard that embeds it. Since users are already logged in to see the dashboard in the Dashboard Server instance, they can also see the data from the embedded dashboard.
    But if you would try to embed a normal dashboard that is on a different instance of Dashboard Server, the dashboard wouldn't show any data since users are not authenticated. They'd see tiles constantly trying to load data instead.

    In both cases, you have to whitelist the server the dashboards are on to see any data.

    Any dashboard you embed needs to be in the same domain as the dashboard it gets embedded in. Dashboards that are in a different domain get blocked by your browser due to security reasons for cookies. For example, if you are trying to embed your Community Edition dashboards into your SCOM Edition dashboards, you need to make sure both instances are in the same domain.

    1. Go to the dashboard for which you want to find out the ID.

    2. Click on the share this dashboard button:

    3. You'll see Sharing options: Normal.

      The sharing option Normal creates a link to the normal dashboard or perspective, meaning as a fully interactive version. Accessing the dashboard or perspective requires authentication with a Dashboard Server user license. The link is based on the dashboard's or perspective's ID and does not change when the dashboard or perspective is renamed.

      Normal: Just the URL based on the ID.

      Full-screen:The URL based on the ID, but with ?display=fullscreen appended. This will hide the navigation bar.

      Embed: The URL based on the ID, but with ?display=embed appended which will hide the navigation bar and page title.

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

      Tip: If you're looking for the dashboard's ID, you can see it in the last part of the URL after /page/.

    1. Go to the dashboard or pinned perspective you want to create an Open Access URL for.

      Note: If you want to create an Open Access URL for a pinned perspective, you need to be on the pinned perspective, not a general perspective that is not pinned. You can make sure you are on the pinned perspective by clicking on the name of the pinned perspective on the navigation bar. If you are on a perspective that is not pinned, you'll see a message that this perspective needs to be pinned first.

    2. Make sure the dashboard or pinned perspective is already published. If it is still a draft, publish it first.

    3. Click on the share this dashboard button. If you can't see the button, check if you are still in edit mode since this button is only visible when you are not in edit mode.

    4. You'll see the following sharing options:

      5. Sharing options

      Normal

      The sharing option Normal creates a link to the normal dashboard or perspective, meaning as a fully interactive version. Accessing the dashboard or perspective requires authentication with a Dashboard Server user license. The link is based on the dashboard's or perspective's ID and does not change when the dashboard or perspective is renamed.

      Normal: Just the URL based on the ID.

      Full-screen:The URL based on the ID, but with ?display=fullscreen appended. This will hide the navigation bar.

      Embed: The URL based on the ID, but with ?display=embed appended which will hide the navigation bar and page title.

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

      Open Access

      The Open Access feature allows you to share your dashboards with anyone, even if they are not a licensed Dashboard Server user. It creates an Open Access version of the original dashboard that can be accessed via its own URL without the need to login. Open Access dashboards are perfect for embedding them in user portals like Sharepoint, pushing them to wall monitors or using them as high-level reports for managers.

      Since there's no authentication needed, viewing Open Access dashboards does not consume Named User licenses which means you can share your dashboards with unlimited users.

      Creating an Open Access version of your dashboard doesn't change anything about the original dashboard. The original version can still be accessed by logged in users.

      How do Open Access dashboards work?

      An Open Access dashboard is a less interactive version of the original dashboard.

      For Dashboard Server v4: Less interactive means viewers of the dashboard can't hover to see graph figures and labels or click to drill down. The Open Access dashboard is server-rendered bitmap version of the original dashboard, that refreshes every time the original dashboard refreshes.

      For Dashboard Server v5: Less interactive means viewers of the dashboard can hover to see graph figures and labels. If your dashboard contains links to external tools, for example linked rows in a grid, vierwers can click those links. If viewers click on SCOM Azure data to drill down to further data or to update the state of an alert they will have to log in.

      If you don't see the Open Access option, you don't have permission to manage Open Access or your Dashboard Server product license doesn't include Open Access.

    5. In the Open Access section toggle the enable open access button to on.

    6. You will see the message 'Preparing your Open Access dashboard, please wait' and a thumbnail of the dashboard itself:

    7. Click preview to view the dashboard in Open Access mode.

      The dashboard is given an Open Access URL and enabled for Open Access. You can now give the URL to anyone you want to be able to access the dashboard.

    After a dashboard is updated the changes are shown on the Open Access dashboard when it next refreshes, usually in 60 seconds. On Dashboard Server v4 this may take up to 20 minutes.

FAQs

Embedding Open Access dashboards with Web Content tiles:

You can embed Open Access dashboards with a Web Content tile, but you need to whitelist your SquaredUp server first, see How to embed other dashboards via the Web Content tile.

Using Web Content tiles on Open Access dashboards:

If Web Content tiles are shown correctly on Open Access dashboards depends on the following:

  • For all Dashboard Server versions:

    Embedded websites that require authentication won't work because Open Access does not use any authentication.

  • For Dashboard Server v4:

    Web Content tiles are not supported. On Dashboard Server 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.

  • For Dashboard Server v5:

    Many embedded websites will work with Web Content tiles on Open Access.

 

Yes, you can use the URL of the SCOM report as an embedded URL. You may need to whitelist your Dashboard Server site.

  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 security.json file from the following path in your Dashboard Server folder:

    ...\User\Configuration\security.json

    If the file doesn't exist, create it.

    Name of the Dashboard Server folder

    The name of the Dashboard Server folder is SquaredUpv followed by the product version number.

    Location of the Dashboard Server folder

    The default location for the Dashboard Server folder is C:\inetpub\wwwroot\SquaredUpv[Version Number], but a custom location may have been chosen during the installation.
    For example, for Dashboard Server v5 the default folder location is C:\inetpub\wwwroot\SquaredUpv5 and for v4 C:\inetpub\wwwroot\SquaredUpv4

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

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

    So that the whole file looks something like this:

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

    Note: 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 Dashboard Server application pool.

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.

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.

Why isn't my site showing? Troubleshooting embedded websites

If your Web Content tile is blank or showing an error, try the following troubleshooting steps:

  1. Are you trying to embed a http page in a https page? For security reasons http pages cannot be embedded in https pages. For more information see Why you should not mix http and https when using iframes.

  2. Open your browser's Web Developer tool. In the tool, open the Console and check if you can find an error message, for example a sameorigin or blocked script error (see following steps).

  3. Sameorigin error: The website itself doesn't allow embedding.

    It is common for websites to actively disallow embedding. Unfortunately there's nothing you can do about it, unless the website is hosted internally and you can ask the maintainer of the site to make an exception.

  4. Blocked script error: The website uses scripts which Dashboard Server does not allow.

    For security reasons scripts can't be run in Web Content tiles (iframes) in Dashboard Server v4.6 onwards. The 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.

    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 security.json file from the following path in your Dashboard Server folder:

      ...\User\Configuration\security.json

      If the file doesn't exist, create it.

      Name of the Dashboard Server folder

      The name of the Dashboard Server folder is SquaredUpv followed by the product version number.

      Location of the Dashboard Server folder

      The default location for the Dashboard Server folder is C:\inetpub\wwwroot\SquaredUpv[Version Number], but a custom location may have been chosen during the installation.
      For example, for Dashboard Server v5 the default folder location is C:\inetpub\wwwroot\SquaredUpv5 and for v4 C:\inetpub\wwwroot\SquaredUpv4

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

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

      So that the whole file looks something like this:

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

      Note: 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 Dashboard Server application pool.

 

Related articles