Applies to: Kyvos Enterprise Kyvos Cloud (SaaS on AWS) Kyvos AWS Marketplace

Kyvos Azure Marketplace Kyvos GCP Marketplace Kyvos Single Node Installation (Kyvos SNI)

Kyvos supports the Rich Text Editor for KPI charts and HTML Cards.

Rich Text Editor for KPI Cards

If you are editing a KPI chart, you can use the rich text editor to customize the design.

For this, perform the following steps.

Select the view type as KPI to use the Rich Text Editor on your worksheet.
From the properties on the right, select the Template as None, and then click the Customize Design link.

The Rich Text Editor is displayed, as shown in the following figure.

Inserting Measure Value, Filter Value, or Parameter Value in a KPI

For KPI, you can insert placeholders for measures, parameters, and filters that get replaced with the actual values. For this, use the Insert menu, the existing measures, filters, and parameters in the underlying worksheet are displayed in the list.

To include a measure, filter, or parameter in the KPI template, you can add a placeholder in the KP editor. The actual values will be displayed in the worksheet/dashboards.

Note

Updating the filter or measure value used in the custom KPI updates KPI automatically on the dashboard.

To add a placeholder, perform the following steps:

On the worksheet design page, drag the measure onto the Y-axis shelf of the KPI and apply filters that you want to include in KPI
Select the Template as None, and click Customize Design.
On the Rich Text Editor dialog, click Insert and select the Measures, Filters, or Parameters as shown in the image. The corresponding placeholders are added to the dialog, which will be replaced with the actual value in KPI.

Inserting images in KPI

To insert an image in the KPI, perform the following steps.

On the Rich Text Editor, click the three-dot menu, and click the image icon to insert the image.
On the displayed Insert/Edit Image dialog, you can insert the image using any of the following:
1. If it is an online image, provide the image URL in the Source field.
2. If the image is placed at the Kyvos setup location, you can pick it from the Image list.

Note

You can change the Width and Height of the image. To unlock sizing, click the lock icon.

Only the images placed at client\themes\worksheet\images\custom\ location are displayed in the Images list.

Conditional highlighting in KPIs

You can add conditions for highlighting a KPI text. Using the Conditions option, you can design beautiful templates with customized KPIs with the following capabilities:

Highlight text conditionally
Show/hide text conditionally
Alter of text conditionally

To use conditions for highlighting, perform the following steps.

For this, click Insert > Conditions.
Select the conditions from If-Else, If-ElseIf, Complex If, or Complex If-ElseIf.

Let us consider an example where you want to highlight the KPI such that if the discount is greater than zero, it should be shown in Green; otherwise in Red.

For this, select the if-else option and create a branch with the default condition, as shown in the image below.

Now, you can customize the condition and template design as needed.

As you can see, the discount is greater than zero and is shown in Green.

If the discount is less than zero, it is shown in Red.

Rich Text Editor for HTML Cards

You can also use the Rich Text Editor options in the HTML card on the dashboard.

For this, click Add Card and select the HTML card option.

On the Add HTML Card dialog, use the editing options to add a card with custom formatting, images, or tables.

Similarly, while working with KPI, you can change the font family and font size and do basic formatting, including paragraph alignment and adding bullets and numbers. You can also change the foreground and background color of the text. You can also insert pictures, tables, and links and indent or omitted text. Use the three-dot menu to access additional functionalities.

Tips and recommendations for working with Rich Text Editor

Here are some recommendations and designing tips for working with a rich text editor.

There are two ways of inserting images while designing in the rich text editor:
1. You can an image available on the internet. For this, provide its URL path when you are inserting the image.
2. Put your images at the client\themes\worksheet\images\custom\ location. Kyvos will fetch them and display them on the image list.
To add text in front of the image, we recommend you use tables. Put your text in one column and the image in another.
If you are using a table while designing KPI, it is recommended not to change its width because when this KPI is used in the dashboard, table resizing (inside KPI) would not work properly on resizing of data card.
We recommend using tables in your design to avoid issues related to arrangement and alignment.

Sample Designs

Here's a sample KPI design that you can create using the rich text editor.

To create the sample KPI as shown in the figure above, perform the following steps:

Open the Rich text editor using the Custom Design link.
Enter the text “Return on Investment YTD” and select Font Family and Size according to your choice.
Using the three-dot menu, insert a table to create a Table of 1*2 size.
In the first column, add the image that you want to display in the cell.
In the second column, enter the text as ROI.
Press Enter and then add a measure placeholder for percentage value and type the % symbol after that.
Press Enter and then add a table of size 1*5.
In this table, write Target in the first column. In the second column, write the percentage value that you want to show. Leave the third column blank. In the fourth column, add an image for the arrow. In the fifth column, write 842%.
Now select a Background for each cell of the table and the Font Color for the text.

Tips

You can select an image by providing the image URL in the Source field, or by selecting the image from the Image List. The image list is displayed only if you have placed images at the client\themes\worksheet\images\custom\ location.
You can choose the background color, text color, and font family according to your choice.

We couldn't find what you're looking for