Dashboard Custom content widget

Josh Boxer
Josh Boxer Administrator
edited January 5 in Tips and tricks

The Dashboard Custom content widget allows you to add information such as text and links that might be useful to a customer such as details of their project integration and links to project docs. Example:

This CAIS implementation uses version 4.0.0. See the release notes here:
https://docs.experianaperture.io/solutions/uk-credit-processing/getting-started/release-notes/

Any https:// text will automatically be turned into a link

So you can add useful content without doing anything special with styling etc.


Styling: Markdown

Text can be styled using Markdown, which is described on the docs page or you can find many guides online such as https://www.markdownguide.org/cheat-sheet/ not all elements are supported, such as codeblocks and task lists. If in doubt you can test anything to see what is and is not supported (note that spacing is important, so a line break before or after elements can impact if they are styled or not).

Emojis 😎

Emojis codes like :sunglasses: do not work, but you can copy paste emojis or use the emoji keyboard in Windows by pressing WindowsKey+Period(full stop key)

Images

For security reasons, you cannot link to the URL of an external image. However... there are Experian images that are built into Data Studio that can be used. Right-click on the image then open image in new tab to see the image URL. Examples:

  • ![Aperture Data Studio Logo](/image/product-logo-login.png)
  • ![Air balloon image](/image/splash6-high.jpg)
  • ![e brand logo](/image/brandmark.png)
  • ![experian logo](/image/logo.png)

Also, image files can be Base64 encoded to turn them into a string of characters using an encoder tool (or Google image search results):

  • ![text displayed in place of image](Long Base64 string of characters)
  • ![Experian Logo](data:image/png;base64,…….==)


Styling: Markup

Certain HTML tags are supported, which brings some further flexibility when styling your content widget. The only real way to determine what is supported is some trial and error.

<style> tags and css are not supported (but you can style some individual elements: color, bgcolor, etc.)

<font color="purple" size="8">

<div align="center"> - useful to center or right-align elements

<table cellpadding="10" align="center" bgcolor="darkblue" width=90% height=70%>

<br /> - add a line break or multiple

<img src="/image/product-logo-login.png" alt="Aperture Data Studio" width="350" /> - control the image size

<font size="5">Quote of the Day</font>
<table cellpadding="15" bgcolor="#4aafcc" width=100% height=80%><tr><td valign="bottom"> 
<font color="white" size="5"><i>"The quality of data can be defined in many ways!"</i></font><br />
<font color="white"><b>Some dude</b><br />
DQ expert</font>
</td></tr></table>
image.png

Colors

image.png
  • Teal -- color="#2bc6be"
  • Dark blue -- color="#1d4f91"
  • Magenta -- color="#e63888"
  • Purple -- color="#6d2077"
  • Red -- color="#e4002b"
  • Orange -- color="#ff8f1c"
  • Raspberry -- color="#af1685"
  • Yellow -- color="#ffd146"
  • Light blue -- color="#426da9"
  • Sapphire -- color="#2197b9"
  • Green -- color="#007a3b"
  • Lime -- color="#cad03b"
  • Black -- color="#333333"
  • Gray -- color="#717171"
  • Light gray -- color="#d6d6d6"


PDF reports

When designing a PDF report using Dashboards it is important to note that each 2 rows of widgets or a double-height widget make up each page of the PDF. Planning is important as inserting a page 3 when you already have 7 pages requires shifting all widgets downwards, which is a bit of a pain. (Note that any emojis will print in greyscale losing their colors)


This example dashboard contains multiple widgets that use all of the above:

EDQ_DQ_SummaryReportCard.pdf


Data Studio - DashboardPDF - 24 Nov 2021.dmxd


Finally, if anyone has any questions or finds anything useful not mentioned then please add to the comments

Tagged:

Categories