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> HTML code snippet example 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>

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.
   Zoom	Allows 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. Note for Internet Explorer and Edge 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.

   How to whitelist a server

   You will need to connect to your SquaredUp server. See How to connect to your SquaredUp server

   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.

      Where to find the Dashboard Server folder

      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

      If you deployed Dashboard Server via the Azure Marketplace:

      The default location for the Dashboard Server folder is F:\SquaredUpv[Version Number].
      For example, for Dashboard Server Azure Edition v5 the default location is F:\SquaredUpv5 and for v4 F:\SquaredUpv4.

      If you installed Dashboard Server using the installer:

      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.

   Should I embed a normal dashboard or an Open Access dashboard?

   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 create a normal sharing URL

   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/.

      

   How to create an Open Access URL

   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:

   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 data to drill down to further data they will have to log in.

   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

Does the Web Content tile work with Open Access?

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.

 

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.

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.

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.

   How to whitelist a site

   You will need to connect to your SquaredUp server. See How to connect to your SquaredUp server

   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.

      Where to find the Dashboard Server folder

      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

      If you deployed Dashboard Server via the Azure Marketplace:

      The default location for the Dashboard Server folder is F:\SquaredUpv[Version Number].
      For example, for Dashboard Server Azure Edition v5 the default location is F:\SquaredUpv5 and for v4 F:\SquaredUpv4.

      If you installed Dashboard Server using the installer:

      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.