Formatted Text View Component Usage

[rathy_moorthy2]

Hi ,

I am currently working with an SAP Lumira dashboard and below is one interesting scenario I came across and wish to share my learnings based on it. We usually display text using the text component and apply any relevant CSS to make it look fancy.

But for this requirement , when I tried I could not achieve the exact requirement with just text component and CSS. The source data comes from SAP BW system and dashboard is built on top of Bex queries created in BW. This requirement is for a paragraph which we have loaded as an XL text of an info object in BW. Let's have a look at the requirement.

Problem statement : The requirement from the users was to display text in a formatted manner and also they wanted to decide which part of the text had to be highlighted in red color, meaning it had to be dynamic. So here the users want to display a paragraph to describe a Company. They are maintaining it in an excel file against each company. This paragraph is being loaded as the XL long text for the Company Info object.

So the text part of the this info object was displayed using a basic "Text" component in a popup. But the drawback was that when they wanted to add a line in red color and bold, they could do that in excel , but it did not show up the same way on the dashboard popup.

 

Solution: So on further exploration I came across the "Formatted Text View"  component. This type of multi formatting can be easily achieved using this "Formatted Text View" component. This does require a slight tweaking on the source side, which in this case is the excel file from the user.

Step 1: Add the component "Formatted Text View"

Step 2: Write the classes in CSS for how the text should be formatted

For eg:

.red {color: red; }

Step 3: In the "On Startup" property of the Application or any other on click event (if the desired to see the text on click of some component), use the setHtmlText function to enable the html tag usage.

FORMATTEDTEXTVIEW_1.setHtmlText(<replace the source text to be shown here>);

Step 4: Use the below HTML tag to enable the formatting as per the class defined in Step 2, in this case "red" in the source file (in our case - the excel maintained by user they will need to use this tag to highlight the text they want in red)

Normal Text <b> <span class='red'> Bold and Red</span> </b>

Desired output is achieved as shown :

 

Sample Output

 

So we have seen that, any part of the text - no matter whether it is the beginning or ending or in middle of the paragraph, can be tagged to show red and once the description is loaded, we can view it in the desired format.

 

Please feel free to provide your feedback or if you have any questions on this topic in the comments below.

Also any related queries can be posted to SAP Lumira

Thank you!