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.

The distinction between a visualization and an insight is that an insight is an instance of the visualization. As an instance, an insight has unique configurations that a dashboard developer determines for displaying a chart on a dashboard tab.

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

The following are the rich text editor properties in the Edit drop down menu:

Property	Description
Cut	Remove selected text or image from the editor and add it to the clipboard.
Copy	Copy selected text or image to the clipboard.
Paste	Paste copied, or cut, text or image stored in the clipboard.
Select All	Select all text and images in the editor.

The following are the rich text editor properties in the View drop down menu:

Property	Description
Source Code	Open a text window displaying the source HTML of the rich text editor content, where you can directly edit the HTML of the tich text insight.
Visual aids	Enable visual markers to assist in text layout.
Preview	Open a window to preview how the rich text insight would look like

The following are the rich text editor properties in the Insert drop down menu:

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

● For an image, you can 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.
● For a link, you can 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 or 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.

Note

Now, by default, cross domain references are disabled, and external websites must on the allowed domain list to be displayed in the iFrame. To allow an external website in an iFrame, please contact Incorta Support to add it to the content.security.allow-list.frame.ext property in the node.properties file. To allow multiple external website, you can add “http://* https://*” instead of a specific one.

The following are the rich text editor properties in the Format drop down menu:

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 the available common fonts.
Font size	Select the font size. The font size ranges from 8px to 36px.
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.

The following are the rich text editor properties in the Tools drop down menu:

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 found in the toolbar:

Property	Description
Font	Select the font type you want to use for your text. Default font is Roboto.
Font size	Select the font size for your text. Default size is 14px.
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.
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.
Insert/edit Link	Select to enter or edit a URL and determine how it will be behave.
Insert/edit image	Select to enter or edit an image and determine its properties.
Preview	Select to open the preview windows for your rich text insight.
Source code	Select to open the HTML editor where you can directly create or edit the source code of the rich text insight.

User interactions for a rich text insight

As a dashboard consumer, you can interact with a rich txt insight on a dashboard tab. Some interactions will affect only the rich text insight. Other interactions will affect both the rich text insight and the dashboard. The creation of one or more dashboard runtime filters is an example of a user interaction that affects all applicable insights on all tabs of a dashboard.

Note

Some user interactions require specific configurations by a dashboard developer and therefore may not be available.

Role-Based Access Control (RBAC) enforces access to certain features and functionality. With Discretionary Access Control (DAC), a user who owns the dashboard can control the access to the dashboard. Access rights include the ability to view, share, and edit the dashboard. Together, RBAC and DAC affect the available selections in both the Action bar and the More Options menu for an insight.

For more information about RBAC and DAC, refer to the Security Manager documentation.

In addition, certain tenant configurations by a Cluster Management Console (CMC) Administrator affect the available selections in the More Options menu for an insight.

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.

Create a rich text insight

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.

Adding insights starting 2023.4.0

After introducing the dashboard free-form layout in 2023.4.0:

The steps to add an insight to a dashboard are as follows:
- In the Action bar, select Edit (pen icon).
- From the Insight panel, drag the visualization that you want to the canvas, and then hover over the new insight and select Edit (pen icon) to launch the Analyzer.
To open an insight in the Analyzer, hover over the insight, and then select Edit (pen icon).
The steps to edit the insight in the Analyzer are still the same.

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 starting 2023.4.0

In the Action bar, select Edit (pen icon).
From the Insight panel, from Others, drag Rich Text to the canvas, and then hover over the new insight and select Edit (pen icon) to launch the Analyzer.
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.
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.
Select Arial from the font type.
Select the first line of text, and from the toolbar set the font size to 24px and select Bold.
Select the second line of text, set the font to Bold.
Select the Source Code 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: