Displaying text in color

We're sending two text files to a service and getting back a "DIFF" report for them. The DIFF has some tags in it I was thinking about wrapping HTML tags around parts of the DIFF report so those tags would display in color.
So, I was wondering if from a script you could send HTML to the web viewer to display that marked up HTML.

Or, is there a better way to display marked up text with parts in color?

I tried using Conditional Formatting, but that didn't work to highlight only certain parts of the text (using equal to).

Suggestions welcome!

Thanks,

Hi @OliverBarrett

I would think that either conditional formatting or a webviewer would work, though either/both of those might a little effort to massage the content into shape before presenting it.

For the webviewer approach, have you checked out the Set WebViewer script step?

That should be a good option, though other approaches that specifically set the webviewer URL to a variable or a field value can work, too.

If the solution is on an older version of FMP, it might be necessary to preface the data that you send to the webviewer with data:text/html, (not necessary in more recent versions of FMP.)

Hope this is of some help.

1 Like

This is what CSS is for. You can put your CSS anywhere: directly into the webviewer with the DIFF, or in a layout object and get content, or in a field, or on the web. Really. You could target a project CDN like Bootstrap if you want to get fancy.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
1 Like

Thanks Steve.

This probably wouldn't be the first time I'd made something more complicated than it needed to be so maybe there's a simpler solution.

The DIFFText has tags like this: "[ChangeDelta, position: 2, lines:" ... (diff text here)
[ChangeDelta, position: 5, lines:" .... (corresponding diff text here).
.
.
.
[ChangeDelta, position:.....

I tried using FMP's conditional formatting but that didn't seem to just change the "ChangeDelta" text to blue or other color without changing the text of the entire text field's text.

If there is a way to successfully only change certain words to a color in a regular FileMaker text field that would be best.

--

I also tried putting a web viewer on the layout and sending the text from the FIleMaker field to it, but that didn't seem to work.

-- display text in web viewer
Set Variable [ $dataToDisplay ; Value: DiffExample::diffText ]
Set Web Viewer [ Object Name: $dataToDisplay ; URL: $dataToDisplay ]

Tried other combinations also.

Thanks!

Hi @OliverBarrett

Ah! Yes -- I wasn't clear enough about what I meant regarding massaging the content. Basically, I was thinking that it would involve a calculation (or script) that would tokenize the content just enough to apply conditional formatting to the target tokens, and preserve the rest of the text. So -- not as simple as being able to use one of the TextFormat functions and have it be smart enough on its own -- if there is a way to do that, I am not seeing it.

Let me know if it would help for me to post a sample While calc for this. Just last weekend I was working on some basic tokenization calcs, and it would probably just take me a couple of minutes to find something and adapt it to this situation.

All the best,

-Steve

1 Like

Steve, you're the best.

We can tokenize the DIFF text to add HTML tags around the words we want. No problem there. What I don't know how to do in FIleMaker (always learning!) is how to get FileMaker to display that color HTML tag or whatever.

The client will probably go a different route on this requirement so at this point I'm mainly curious for the future how do this this color display of only some text in FileMaker.

Thanks again!

1 Like

Hi Oliver,

Ok -- you and I have had our serious shared geek moments discussing Java, IIRC, so I didn't really think that tokenization would likely be an issue.

How about this:

If the tokenization is happening in FMP, would it be possible to adapt it, so that, instead of surrounding target tokens with HTML tags, you have the calc engine simply apply the TextColor function to the token?

So, presumably, within the tokenization there would be a line that has (pseudo) code of:

~result = ~result & "<SOME_HTML_TAG>" & ~token & "</SOME_HTML_TAG>" ;

And instead, it could be:

~result = ~result & TextColor( ~token ; RGB( 255 ; 0 ; 0 )) ;

The above would be my approach to get text formatted with color on just the tokens, and to be able to display it that way in a FMP field, or button-bar label.

To go the webviewer approach:

I'd expect to see a class attribute on the HTML tag, something like:

~result = ~result & "<span class='token'>" & ~token & "</span>" ;

And then some corresponding CSS somewhere defined in the output sent to the webviewer:

<style>
  .token { color: #ff0000; }
</style>

And, of course, as @Malcolm indicated, the CSS will offer all sorts of ways to make things fancy/beautiful (and not just do a red text color as in the example above).

When it comes time to set all the content into the webviewer, I would include the basic parts to form an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
.token { color: #ff0000; }
</style>
</head>
<body>

blah blah blah  <span class='token'>DIFF lines: 20<span> blah blah blah

blah blah blah  <span class='token'>DIFF lines: 20<span> blah blah blah

</body>
</html>

The only other point I should mention is that, as HTML, your text will suddenly lose things like line breaks that would normally display within FMP text in a field. That would have to be accounted for, but should not be too difficult.

1 Like

Wrapping CDATA in a PRE tag will help you.

1 Like