Visualizations → Rich Text

About a Rich Text Visualization

A Rich Text visualization can make dashboards more readable and understandable, allowing you to expand on information. The Rich Text visualization gives you access to a What-You-See-Is-What-You-Get (WYSIWYG) text editor. The text editor is embedded in and accessible through the Analyzer. Using the text editor, you can create, edit, format, and preview the rich text insight. Incorta stores the Rich Text visualization as HTML for the insight.

Referenceable Variables in a Rich Text Insight

In the Rich Text editor, you can reference specific variables when creating the insight. You reference variables with a preceding $$ syntax before the variable name. The following are the variables you can reference in a rich text insight:

Rich Text Editor Properties

Edit Properties

The following are the Rich Text editor properties in the Edit drop down list:

PropertyDescription
UndoReverse the last action in the editor.
RedoReapply the last removed action in the editor.
CutRemove selected text or image from the editor and add it to the clipboard.
CopyCopy the selected text or image to the clipboard.
PasteApply the copied/cut text or image stored in the clipboard.
Select AllSelect all text and images in the editor.

View Properties

The following are the Rich Text editor properties in the View drop down list:

PropertyDescription
Source CodeOpen a text window displaying the source HTML of the rich text editor content. You can make direct HTML edits to the Rich Text insight.
Visual aidsEnable visual markers to assist in text layout.
PreviewOpen a window to preview the Rich Text insight.

Insert Properties

The following are the Rich Text editor properties in the Insert drop down list:

PropertyDescription
Image...Insert/Edit an image at the text cursor location or selected text. The following are the available properties for an image:
Source: Enter the image source location. Valid image types are GIF, JPG, and PNG. You can embed the image as an HTTP source.
Alternative description: Enter the text to display if the image does not display correctly.
Width: Enter the pixel width of the image.
Height: Enter the pixel height of the image.
Link...Insert/Edit a link at the text cursor location or selected text. The following are the available properties for a link:
URL: Enter the link URLText to display: Enter the link text that is displayed in the insight
Title: Enter the text that will be displayed when you hover over the link.
Open link in… : Select to open the link in the current window or a new window. The default is the current window.
Note: About an Image...

You are able to directly copy and paste GIF, JPG, and PNG images directly into the Rich Text insight. You do not need to insert an HTTP URL for an image.

Note: About a Link...

It is possible to create a web link to another dashboard or dashboard tab using the full HTTP URL. However, these links will not function as drill down links to other dashboards with regards to optionally applying dashboard runtime filters.

Copy and paste an Image

Rather than using the image insertion property, you are able to directly copy and paste GIF, JPG, and PNG images directly into the Rich Text insight. When you copy/paste an image, the image properties will be automatically populated and can be edited if required.

Embed an iframe

You can add an <iframe> tag to the Rich Text insight from the Source Code editor. An iframe can only be added from the editor using HTML in the Source Code editor.

Format Properties

The following are the Rich Text editor properties in the Format drop down list:

PropertyDescription
BoldSet the font to be darker and heavier.
ItalicSet a slant to the text.
UnderlineAdd a line underneath the text.
StrikethroughAdd a line through the text.
SuperscriptSet text to be smaller than the preceding text and sit above the normal line of type.
SubscriptSet text to be smaller than the preceding text and sit slightly below the normal line of type.
CodeSet the font to monospace with specified spacing.
FormatsSelect format properties:
Headings: Set the text format to a heading size from 1 to 6.
Inline: Submenu containing Bold, Italic, Underline, Strikethrough, Superscript, Subscript, and Code.
Blocks: Set the text block to a specific format, such as Paragraph, Blockquote, Div, or Pre.
Align: Select the text alignment as Left, Center, Right, or Justify.
BlocksSelect the text block formatting. The options are Paragraph, Heading 1 through 6, and Preformatted.
FontsSelect the text font from 18 common fonts.
Font sizeSelect the font size. The font size ranges from 8pt to 36pt.
AlignSelect the text alignment as Left, Center, Right, or Justify.
Text colorSelect the text color from a selection of color swatches or a color picker.
Background colorSelect the line background color from a selection of color swatches or a color picker.
Clear formattingRemove all formatting from the selected text. The font will be set to sans-serif, a font size of 12, black font color, and white background color.

Tools Properties

The following are the Rich Text editor properties in the Tools drop down list:

PropertyDescription
Source codeOpen a text window displaying the source html of the rich text editor content.

Toolbar Properties

The toolbar offers easy access to the most commonly used Rich Text editor properties found in the prior drop down menus. The following are the rich text editor properties only found in the toolbar:

PropertyDescription
Bullet listSelect to have the text format set to an indented list using bullets as list markers.
Number listSelect to have the text format set to an indented list with incremental values.
Decrease indentSelect to reduce the indentation of the selected line.
Increase indentSelect to increase the indentation of the selected line.

Create a Rich Text Insight Visualization

For an existing dashboard, to create a Rich Text insight for a given dashboard tab, follow these steps:

  • If not already open, open a dashboard.
  • To add a new insight to the dashboard, in the Action bar, select +.
  • In the Analyzer, from the Insight panel, select Rich Text in the Other category.
  • In the Rich Text editor, add and format your text.
  • To optionally preview your changes, in the menu bar, select View → Preview, or in the Toolbar, select Preview (Eye icon).
  • To save your changes, in the Action bar, select Save.

Rich Text Insight Example

You will create a Rich Text insight as a greeting banner on a dashboard. It will identify the logged in user, show the current day, and display an image.

In the Cluster Management Console (CMC), you can create a tenant that includes Sample Data. The Sample Data includes the date schema. This example uses this schema. You will also create an internal session variable to reference in the Rich Text insight.

Create an internal session variable

Create an internal session variable named ivar_current_day_name and enter the following expression for the variable:

query(
date.date.Day_Name,
date.date.Date = $currentDate
)

Add an insight

  • In the Action bar, select +.

  • In the Insight panel, under Other, select Rich Text.

  • Enter a greeting to the current user utilizing the user system variable. Use the following text on the first line:

    Hello $$user
  • On the following line, enter a line of text identifying the current day using the ivar_current_day_name variable you created. Enter the following text:

    Happy $$ivar_current_day_name
  • On the following line, enter the text:

    The following are your current daily insights
  • On the following line, select the Insert/edit image tool from the toolbar (image icon).

  • Enter this image as the HTTP link in the Source property.

  • Set the Width property to 400. The aspect ratio will be locked by default.

  • Select Save to add the image to the Rich Text insight.

  • From the Edit menu, select Select all.

  • Select Align center from the toolbar (centered lines icon).

  • Select Arial from the font type.

  • Select the first line of text, set the font size to 24pt from the toolbar and select Bold from the toolbar.

  • Select the second line of text, set the font to Bold.

  • Select the Source Code Icon (code bracket icon) from the toolbar.

  • In the <span> tag containing the user name, add the following text into the style attribute:

    text-transform: capitalize;
  • After applying the capitalize attribute, your first couple of lines of HTML should look like the following:

    <p style="text-align: center;">
    <span style="font-family: arial, helvetica, sans-serif; font-size: 24pt;">Hello </span>
    <span style="font-family: arial, helvetica, sans-serif; font-size: 24pt; text-transform: capitalize;">$$user </span>
    </p>
  • Select Save.
  • Select the preview tool (Eye icon) in the toolbar. The referenced variables will not display their values in preview mode.
  • Select Save.

After following the example, your Rich Text insight should look similar to the following:

Available User Interactions for a Rich Text Insight on a Dashboard Tab

As a dashboard consumer, there are several actions you can take to customize the Rich Text insight to fit your specific needs.

Personalize the Rich Text Insight Layout

Use the Edit Layout panel to adjust the Rich Text insight with the following steps:

  • Open the Edit Layout panel with one of these two options:
    • Select Personalize (Page icon) in the upper right corner of the dashboard page, and Edit Layout in the Context bar.
    • Select More Options (⋮ vertical ellipsis icon) → Personalize to the right of the tab name on the active dashboard tab, and Edit Layout in the Context bar.
  • You can perform the following layout changes:
    • Select the Rich Text insight to move and resize it.
    • Click and drag the insight to reorder the Rich Text insight within the dashboard.
    • Drag the scroll icon (up and down arrows) to adjust the height of the insight.
  • Select the Save button.

Download the Rich Text Insight

  • Select More Options (⋮ vertical ellipsis icon) for the Rich Text insight.
  • Select Download.
  • Select the download file format:
    • XLSX
    • CSV