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

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

Children