|
The Rich Text component makes it easy to edit rich text content, including adding images, hyperlinks, videos, setting text formatting, and so on. You can also use rich text to quickly reference data from other components, combined with descriptive text, to quickly complete a data summary or data story. This chapter mainly introduces how to create rich text, how to edit rich text content and the interactive features therein. 1.2 Application scenario Scenario 1, add pictures, hyperlinks, videos, set text format, add parameters, etc. in the dashboard. Scenario 2, make a summary display of the dashboard's data, with text to assist the description, focusing on text + data summary. 2. Function 2.1 Add rich text component Select Rich Text from Component > Auxiliary Component on the right and drag it to the canvas; 2.2 Add rich text content According to the tip on the rich text component, double-click the input text or click Format > Edit on the right side to set the content in the "Edit" pop-up window, as shown in the figure below. You can directly input text content in the content area of rich text, or insert code, media, link, emoticon, time, data. •Add Normal Text You can input text content directly in the pop-up window, and set the text format through the toolbar button on the top, for details, please refer to Edit Rich Text Content Format. • Add Code Click the code icon to add a code block in the content area, as follows: •Add Media Add media resources such as image, audio, video, etc. within the dashboard, only web resources are supported. Click  media icon, and in the pop-up Media Library pop-up window, switch to select image, audio, video, and enter the resource address. ➢Note: When you add the path, it should be a resource suffix, such as MP4, MP3, PNG, image format, etc., not html. Take uploading a web picture as an example: 1) Find an image on the Internet, copy the image link, for example:  。 2)Select the image, if you want to name the uploaded file, you need to enter the format of "Resource Name | Resource Address", such as traffic analysis, style as shown below: 3)Click Confirm, the thumbnail will be generated in the media library, select the uploaded media, click Insert Selected Items button media added to the content area of the rich text, you can click on the upper-right corner of the Delete Selected Items to delete the media, you can also add the icon to upload more than one network media, as shown in the figure below. 4) The effect after insertion is shown below: 5) the inserted picture can set the text around the way, alignment, links, adjust the width and so on, the mouse into the picture, it will show the function buttons, the following chart: Function buttons in order for the text on the right, text on the left, left alignment, center, right alignment, link, resize, delete; [Text on Right] When the text and image are on the same row, the text is uniformly displayed on the right side, as shown in the following figure: [Text on left]When text and images are on the same row, the text is uniformly displayed on the left side. [Left Alignment] images are left aligned. [Center] Images are centered. [Right Align] Images are right aligned. [Link] You can input the URL and jump to the corresponding link in this window or a new window, for example, to realize: click on the picture and open the official website of vividime BI https://www.vividimecom in a new window, the settings are as follows: [Resize] After clicking the image size icon, the current image width and height will be displayed, you can customize the input value to adjust the size, as shown below:  [Delete Image] Delete the selected image after clicking the delete icon. •Add Hyperlink Click the hyperlink icon  to add a hyperlink, the hyperlink here is the same as the hyperlink set on the report component, which supports the selection of report or external address, etc. For details of the hyperlink, please refer to Create Visual Dashboard > Data Process and Analysis > Link. Add the completed hyperlink, the mouse hovering over the hyperlink changes to a hand shape. After clicking the hyperlink, it jumps to a new window to open it. You can remove the link by selecting Empty Link in the Hyperlink popup box, or you can click the Clear Link icon to clear the hyperlink after adding it. •Add Emoticon Click  emoji icon to add a built-in emoji to the rich text content area. •Add Time Click the time icon to add date and time to the rich text content area to synchronize the current time. You can select one of the various time formats from the drop-down list by using the drop-down button, as shown below. •Add Data Click  insert data icon to select the data source of the rich text, from parameter, component and function. for detailed Note, please refer to the table below. Data Description
Parameter Parameters are mainly divided into two types: system built-in parameters and dashboard parameters. Among them, user information, date and time, and process approval related parameters are built-in by the product, and the related usage can be referred to Usage of Built-in Parameter. The dashboard parameters come from component parameters, editing parameters, script parameters, etc. that can be added to the user dashboard.
Component Supports referencing data derived from text, gauges, common tables, and free tables added to the current dashboard.
Function Supports referencing data from table and freestyle table added to the current dashboard through functions.
1)Parameter scenario introduction If rich text has the following information, you need to fill in the user and sales specific information. After "User:", click the Insert Data icon and select [Parameters > Built-in User Information > ? {_USER_}:User name parameter], click [OK]. Click the Insert Data icon after "Shop:", select Component > Text1, and then click [OK]. The inserted data is as follows. Click[Apply], close the editing pop-up box, the data in the rich text is as follows. 2)Component scenario introduction If you want to show some important data as text description, or summarise some data in an existing dashboard, you can refer to the data in the table or free table directly in the rich text. First, add a common table or freestyle table in the dashboard, and make the table data as needed. Add a rich text component, click Insert Data, select the component on the right, here we want to insert the "completion rate", so select Chart 1, double-click on the "completion rate", you can add the completion rate to the rich text, and form a data block style. In the table or freestyle components, a column (or expand cell) of the data is an array, so the reference to a particular value, you need to add [n], such as here Chart 1.Completion rate of [0] referenced is the completion of the first value under the rate. Without [n], all values under that column are returned. The data referenced by the component is the data value in the component summary data table. If the table has been set up with text format or highlight, etc., the data referenced may be inconsistent with the data seen on the component. ➢Note: Double-click generates a data reference of the form <component name. Column Name> or <Component Name. Cell Name> (freestyle), it is not possible to make a reference directly by typing such a name; manually typed content is not recognised as a data reference, and will just be treated as normal text content. 3)Introduction to Function Scenarios You can see that there are two inflexible places when the component references data: you can't get the first n and the last n data in the same table; you can't get the data that you actually see on the table. Therefore, we provide a way to reference data through the function , support getCellData, getCellView function. •  Format Click the data block that references the data to set the data format, as shown below. ➢Note: The result of getCellView is the value seen on the table, i.e. view data,the type is string. so the data returned by getCellView does not support formatting in rich text. •  Highlight In the rich text component, it supports highlighting any text or data block that references data. Select a data block or a piece of text, and you can click highlight to set it. In the highlight setting of rich text, the left condition can select the component data referenced in the rich text, including text, gauge, common table, freestyle table, and the data referenced by the getCellData function, the data referenced by getCellView is of string type, so it doesn't support highlighting. The following figure In this scenario, when the completion rate is less than or equal to 0.5, the display text will be "relatively low" in green. 2.3 Edit rich text content format It supports setting text font, text size, content style, text spacing, text line height, text style (bold, italic, underline, strikethrough, text color, text background color, text alignment (left justified, center justified, right justified, both ends justified) of rich text. ➢Note: Before setting underline and strikethrough, please set the text color first, the underline and strikethrough color will follow the text color.
| 
