I recently got the question whether its possible to have custom background color in derived cells. The basic answer is: yes. A while back we introduced some very basic concepts to use simple prefixes in your text to either show an emoticon (a dedicated expressive small image) or change foreground and background color. The rules are very simple: * The expression has to always at the beginning of the text, you cannot place it anywhere in the text line (it has to "prefix" the normal text) * The prefix always starts with [ and ends with ] * The prefix either matches a known textual emoticon or it encodes a background color or optionally background and foreground So a very simple text that your property may return is: "[!] Some text" That results in: Colors are encoded using an @ prefix followed by a color, either as #DDDDD style or as 3 values for Red, Green and Blue, separated by colon. So [@#FF00AA] Other text with colors will give: Foreground is given optionally as second argument, so: [@#FF00AA:255,255,255] Other text with colors will result in: Finally the table of all supported emoticons (also available in the metamodel guide): Ah, attached to this article you will find a simple 2019 R3 project which you can use to play with. It contains two string properties to enter text with prefix and two derived properties to show how it would look like: Happy ScriptingJan

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Coloring cells and using Emoticons

medini_1024169437

I recently got the question whether its possible to have custom background color in derived cells. The basic answer is: yes.

A while back we introduced some very basic concepts to use simple prefixes in your text to either show an emoticon (a dedicated expressive small image) or change foreground and background color. The rules are very simple:

The expression has to always at the beginning of the text, you cannot place it anywhere in the text line (it has to "prefix" the normal text)
The prefix always starts with [ and ends with ]
The prefix either matches a known textual emoticon or it encodes a background color or optionally background and foreground

So a very simple text that your property may return is:

"[!] Some text"

That results in:

Colors are encoded using an @ prefix followed by a color, either as #DDDDD style or as 3 values for Red, Green and Blue, separated by colon. So

[@#FF00AA] Other text with colors

will give:

Foreground is given optionally as second argument, so:

[@#FF00AA:255,255,255] Other text with colors

will result in:

Finally the table of all supported emoticons (also available in the metamodel guide):

Ah, attached to this article you will find a simple 2019 R3 project which you can use to play with. It contains two string properties to enter text with prefix and two derived properties to show how it would look like:

Happy Scripting

Jan

Find more posts tagged with

medini

medini legacy

Accepted answers

All comments

medini_1035261689

Hello Jan,

is it possible to combine coloring and emoticons?
I tried several combinations and none have worked.
Thanks for the splendid support,

Michael

medini_1024169437

Hi Michael,

unfortunately a mix is currently not supported. Both can be only annotated at the beginning of the value, thus collide with each other.

Happy Scripting

Jan

medini_1024169437

Hi Michael,

I checked and there isn't much required to improve the behavior. So we could (will) enhance this in next version. Only restriction would be that icon comes first and color next and only is allowed of course.

But I think that's sufficient, right?

Jan

medini_1035261689

Hi Jan,

This would be perfect. Currently, icons or colors is sufficient. But to have both would a good option.
The order to "code" is fine for me.We just need to know how it will work then in the next release.

Thanks a for the great support.

Michael

medini_1023641097

Emoji

Icon

Symbol

(just added as search words)

medini_1024169437

... and I want to add that the above mentioned change (icon + color) was implemented and is available of course since 2022 R2)

medini_1063548292

Hi Jan,

Thanks for nice summary!

I tried following in 23R1 also with xhtml derived property:

Conclusion;

Coloring can be placed anywhere in the XHTML but has to be inside of HTML comment tag

<!--Comment tag with background coloring directive [@#ff00ff]--&gt;

Otherwise also the text will be displayed in the output text. This tag can be anywhere beginning,middle or the end, does not matter.

Icon does not seem to work for XHTML derived property at all.

Marian

medini_1024169437

Interesting experiment. Do you really have a use case for coloring/cons in XHTML here? I am not 100% sure I understood you goal. Note that the rederer we use here for XHTMl is rather limited.

Jan

medini_1063548292

Hi Jan,

Note that before the fill-coloring was not possible. It was only when you introduced the possibility of icon/coloring coexistence that actually enabled that the coloring directive was recognized anywhere in of the derived property output.

I wanted to use a derived profile property where could utilize better formatting then in plain string output. So the icon is at least for me not really a use case but Cell fill, table and text formatting was that I wanted to really utilize.

I was looking for a solution how to emulate the risk matrix capabilities

I was hoping the if there is XHTML as an interpreter I can somehow create <a href > to collect and navigate to some element in the project or to external site.

Idea was to collect some elements and expose it to the output -> they can be navigated in the model browser. But I wanted to get rid of the full list of the objects but actually creating an alias so instead of an long list of all objects in the properties there is alias text but that clicking on the property output can be still used to navigate to the elements.

Marian

medini_1024169437

Now I get the point, nice solution!

Icons probably do not work as they have to be at first position in the string.

Jan

medini_1066019734

Any idea how in colured cell and variable content could be added?

Code: if(result==3){"[@#F8A916]result"};//orange

Result:

Code: if(result==3){"[@#F8A916]",result};//orange

Result:

I can go with trick, but is not what I want to:

Code: if(result==3){"[@#F8A916]3"};//orange

Result:

Best regards, Klemen

medini_1059007410

Klemen,

I guess you are just missing the string concatenation, which works with a "+" in Javascript:

if(result==3){"[@#F8A916]"+result;} //orange

Regards,

Nils