Dynamic Formatted Title

Forms
1

I'm trying to create a title element on my form with a green background that changes what it says based on selections on the form. For instance, if a user selects "New Phone" from a type of request drop down, the title would change to say "New Phone".

I've dragged over a common field/single-line text and can happily set the value to equal the value I want but I can't set it to read only. I can disable it using javascript easy enough but then my background-color css will only apply to the container and not the text box value area itself resulting in a grey rectangle in a green rectangle.

Is there a way to get the grey rectangle to change color? Or is there a better way I could be doing this?

2

Hello @teddy0bear,

I suggest using the Plain Text control instead of the Single-line Text field. Plain Text control is displayed as a text, not an input, and you can dynamically change the text and background color using the code.

  1. Add Plain Text control to the form.
    image

  2. Click on the control and add a CSS class in general settings, e.g. title-color.
    image

  3. And this is the code to change the text and background color:

fd.control('Text1').text = 'New Text'
$('.title-color').css('background-color', 'red');
3

Ah, see, knew I was over complicating things. Thank you!

1 Like