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:

Rich text editor properties

Edit menu properties

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

PropertyDescription
CutRemove selected text or image from the editor and add it to the clipboard.
CopyCopy selected text or image to the clipboard.
PastePaste copied, or cut, text or image stored in the clipboard.
Select AllSelect all text and images in the editor.

View menu properties

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

PropertyDescription
Source CodeOpen 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 aidsEnable visual markers to assist in text layout.
PreviewOpen a window to preview how the rich text insight would look like

Insert menu properties

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

PropertyDescription
ImageInsert/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.
LinkInsert/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.

Format menu properties

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

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

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

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

PropertyDescription
FontSelect the font type you want to use for your text. Default font is Roboto.
Font sizeSelect the font size for your text. Default size is 14px.
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.
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.
Insert/edit LinkSelect to enter or edit a URL and determine how it will be behave.
Insert/edit imageSelect to enter or edit an image and determine its properties.
PreviewSelect to open the preview windows for your rich text insight.
Source codeSelect 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.

More Options menu for a rich text insight

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.

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.

  • 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: