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:

Internal Session Variable: A scalar value or an array of values from the result of an internal query expression.
External Session Variable: A scalar value or an array of values from the result of a query to an external data source.
System Variable: Built-in variables available to all users.

Rich Text Editor Properties

Edit Properties

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

Property	Description
Undo	Reverse the last action in the editor.
Redo	Reapply the last removed action in the editor.
Cut	Remove selected text or image from the editor and add it to the clipboard.
Copy	Copy the selected text or image to the clipboard.
Paste	Apply the copied/cut text or image stored in the clipboard.
Select All	Select all text and images in the editor.

View Properties

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

Property	Description
Source Code	Open 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 aids	Enable visual markers to assist in text layout.
Preview	Open a window to preview the Rich Text insight.

Insert Properties

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

Property	Description
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.

Property

Description

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:

Property	Description
Bold	Set the font to be darker and heavier.
Italic	Set a slant to the text.
Underline	Add a line underneath the text.
Strikethrough	Add a line through the text.
Superscript	Set text to be smaller than the preceding text and sit above the normal line of type.
Subscript	Set text to be smaller than the preceding text and sit slightly below the normal line of type.
Code	Set the font to monospace with specified spacing.
Formats	Select 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.
Blocks	Select the text block formatting. The options are Paragraph, Heading 1 through 6, and Preformatted.
Fonts	Select the text font from 18 common fonts.
Font size	Select the font size. The font size ranges from 8pt to 36pt.
Align	Select the text alignment as Left, Center, Right, or Justify.
Text color	Select the text color from a selection of color swatches or a color picker.
Background color	Select the line background color from a selection of color swatches or a color picker.
Clear formatting	Remove 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:

Property	Description
Source code	Open a text window displaying the source html of the rich text editor content.

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:

Property	Description
Bullet list	Select to have the text format set to an indented list using bullets as list markers.
Number list	Select to have the text format set to an indented list with incremental values.
Decrease indent	Select to reduce the indentation of the selected line.
Increase indent	Select 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.