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

  • 0
    Certified Lead Developer

    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?

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

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

  • 0
    Certified Lead Developer
    in reply to sunilc407

    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.

  • 0
    Certified Lead Developer
    in reply to Mike Schmitt

    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.

    Brilliant !

  • Yeah this is a great point and should probably have its own thread. Pretty much any time someone makes a post "I have a requirement..." it may be an indication that you should think broadly beyond what the customer dictates and focus more on what problem the customer is trying to solve.

    It's also really important because it demonstrates how anyone who is an Appian Developer can provide a lot of value beyond just building an app. For instance, explaining that you could either spend an extra day on making a form look pixel perfect or meeting more use cases, I think most customers would prefer more use cases.

    (Also most of this is not specific to this post - I think you asked a valid question, but just something general to keep in mind Slight smile)

  • I don’t understand where it went wrong! But, I just tried to explain you about what the requirement is (as you asked for it). Client is not ‘dictating the design’ here.. they just requested for this change and nothing is promised to them yet. I truly agree with all the points you made.. but, I didn’t get about why they are pointed out here :)

  • 0
    Certified Lead Developer
    in reply to sunilc407
    but, I didn’t get about why they are pointed out here :)

    It's hard to tell when it may or may not be necessary to clarify on this; it seems like you're already on the same page, which is good, so hopefully it'll help someone else who stumbles on this thread in the future.