Skip to main content
S
sunilc407
December 7, 2021
Question

Add Color to the label in a textField

  • December 7, 2021
  • 10 replies
  • 1 view

Hello,

I would like to add color (red) to the label of a textField() in my interface. I know I can use a!richTextDisplayField() and then use the a!richTextItem() to change the colors of the value.

Below code displays Red color value; But I need the label to be in Red color:

a!richTextDisplayField(
label: "Red Text",
labelPosition: "ADJACENT",
value: a!richTextItem(
text: "Red Value",
style: "PLAIN",
size: "STANDARD",
color: "NEGATIVE"
)
)

How can I change the color of the Label here? Thanks in advance for any help in acheiving this.

10 replies

mikes0011
mikes0011
Brainy
December 7, 2021

We have no control over color or formatting of field labels.  The most you can hope to accomplish is to use rich text as a sort of work-around.  Can you clarify what your actual requirement is?

The Expression Guru
S
sunilc407Author
December 7, 2021

Thanks for your response and clarifying that there is no control available on the field labels.

My requirement is to display the label in Red when a condition is met, else it should display in black (default). I need to apply this condition on multiple fields in our interface.

mikes0011
mikes0011
Brainy
December 8, 2021

I defer to the side-by-side workaround Josh gave you below, as the thing that would potentially come closest to the design you're after.  As a side note and word of caution, I believe this is a case where "requirements" need to be separated from "design".  Strictly, "requirements" are functional in nature and may suggest but generally should not dictate design - Appian has out-of-box capabilities to functionally handle the use case you describe, it will just require a different design. 

I know customers seldom understand this concept without a little bit of coaching, but I've found they need to be made pretty clear about this up-front or else they'll start giving more and more "requirements" that the base product can't handle without fundamental (and very unlikely) modifications.

The Expression Guru
    joshl
    joshl
    December 7, 2021

    As Mike said, we have no control over label formats. Here are two workarounds though. Neither are great, and things will get very messy as you test on interfaces of various sizes and formats (wide desktop, mobile phone, tablet, etc.). Building off what Mike asked, understanding the underlying business requirement may enable community to point you in a different direction.

    {
  a!richTextDisplayField(
    label: "Red Text",
    labelPosition: "ADJACENT",
    value: a!richTextItem(
      text: "Red Value",
      style: "PLAIN",
      size: "STANDARD",
      color: "NEGATIVE"
    )
  ),
  a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {
      char(9),
      char(9),
      char(9),
      a!richTextItem(
        text: "Red Text",
        style: "STRONG",
        size: "STANDARD",
        color: "NEGATIVE"
      ),
      char(9),
      a!richTextItem(
        text: "Red Value",
        style: "PLAIN",
        size: "STANDARD",
        color: "NEGATIVE"
      )
    }
  ),
  a!sideBySideLayout(
    spacing: "NONE",
    items: {
      a!sideBySideItem(),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: a!richTextItem(
            text: "Red Text",
            style: "STRONG",
            size: "STANDARD",
            color: "NEGATIVE"
          )
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: a!richTextItem(
            text: "Red Value",
            style: "PLAIN",
            size: "STANDARD",
            color: "NEGATIVE"
          )
        )
      ),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem(),
      a!sideBySideItem()
    }
  )
}

      S
      sunilc407Author
      December 7, 2021

      Hi Josh,

      Thanks for your response and all the efforts for a work around. This is a case that I saved as my last approach as this will have a high impact on the other fields in my interface. I'm actually checking to see if I'm missing to use any other existing component or function. Appreaciate all your efforts in writing the code. Thanks again!

      Terms & ConditionsAccessibility statement