Formatting Labels in Appian

In Appian, we can display formatted text. But only inside a Richt-Text Display field. I will present a way to display labels, instructions, choiceLabels and tooltips in bold, italic or bold+italic.

How this works … just apply the magic of unicode character substitution.

Let’s have a look.

Unicode

Text in any computer is represented by numbers. In the old days, values between 0 and 255 were used. Each number represents a certain character, like ‘a’ has the number 97 as defined in the ASCII table. As people found out that there are more languages in the world than English, this was extended in 1991 and got the name Unicode. It includes more than 145 000 characters from 159 languages and all sorts of other symbols like our beloved Emojis.

I recommend investing a bit of time to get a feeling for the characters and symbols included. You can put them into any Appian component that displays text.

By the way, as a Star Trek fan, I was very disappointed to learn that Klingon is not part of Unicode, although many people claim it is.

Substitution

For our purpose, we want to take a look at a specific block of characters, called “Mathematical Alphanumeric Symbols“. It defines the characters a-Z and A-Z in bold, italic, and bold+italic. As characters are represented by numbers, we can apply some math to get from one to the other.

For example, to display an upper case “M” in an italic style, we need to get from the number 77 in the ASCII table to the number 120340 in the unicode table.

To make this more generic, we discuss the ASCII table ranges 97 – 122 for lower case and 65 – 90 for upper case. The styled mathematical characters are:

  • Lower case bold: 120302 – 120327
  • Lower case italic: 120354 – 120379
  • Lower case bold+italic: 120406 – 120431
  • Upper case bold: 120276 – 120301
  • Upper case italic: 120328 – 120353
  • Upper case bold+italic: 120380 – 120405

The first step, is to normalise the numbers of our input characters to zero, then just add the first number of the block we need. Then turn this back into the character. I Appian, we use the functions char() and code() to convert get the number for a character and vice-versa.

The code snippet below identifies the target unicode blocks first. Then it iterates on the numeric representations of each character and adds the identified start number. In the last step, it turns the created list of numbers back into characters and joins it.

SSH_BoldOrItalicText(text(Text), style(List of Text)):

a!localVariables(
  /*
    The 97 represents the number at which lower case characters
    start in the normal ASCII table
  */
  local!lowerBase: a!match(
    value: upper(ri!style),
    equals: {"STRONG"},
    then: 119834  - 97,
    equals: {"EMPHASIS"},
    then: 119886 - 97,
    whenTrue: contains({"EMPHASIS", "STRONG"}, fv!value),
    then: 120406 - 97,
    default: 0
  ),
  /*
    The 65 represents the number at which UPPER case characters
    start in the normal ASCII table
  */
  local!upperBase: a!match(
    value: upper(ri!style),
    equals: {"STRONG"},
    then: 120276 - 65,
    equals: {"EMPHASIS"},
    then: 120328 - 65,
    whenTrue: contains({"EMPHASIS", "STRONG"}, fv!value),
    then: 120380 - 65,
    default: 0
  ),
  joinarray(
    char(
      a!forEach(
        items: code(ri!text),
        expression: a!match(
          value: fv!item,
  
          /* lower case */
          whenTrue: and(
            fv!value > 96,
            fv!value < 123,
          ),
          then: fv!value + local!lowerBase,
  
          /* UPPER CASE */
          whenTrue: and(
            fv!value > 64,
            fv!value < 91,
          ),
          then: fv!value + local!upperBase,
          default: fv!value
        )
      )
    ),
    ""
  )
)

In my test case Appian interface, this looks like this:

In SAIL code, I use it this way:

rule!SSH_BoldOrItalicText(
  text: local!text,
  style: "STRONG" /* Can also be "EMPHASIS" or {"STRONG", EMPHASIS"} */
)

Limitations

While this looks great, there is one limitation. As the unicode block “Mathematical Alphanumeric Symbols” only supports plain English characters a-z and A-Z, this formatting will not work for any non-English language.

Summary

Like I mentioned above, the Unicode standard is a wealth of symbols and characters we can use when designing applications in Appian. Make sure to add this to your personal toolbox.

And in case you know about a way to format other languages, including Klingon, please leave a comment below.

Leave a Reply