Add Color to the label in a textField

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.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    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()
        }
      )
    }

  • 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!

Reply Children
No Data