programmatically changing textbox text color in an adaptive form

[PowerUserOne]

how do i change the color of a textbox text to red in an adaptive form? the cssClassName is readonly property. is there a programmatically way to do it?

[workflowuser]

Try using the style layer and then select error state and style the text box accordingly 

 

[PowerUserOne]

that is not programmatically. i am trying to change it on click event of the edit button. Nice to see you again workflowuser  

[MorisMonk]

Just a copy/paste from another question  

Try something like

myTextFieldName.font.fill.color.value = "249, 11, 8";

[PowerUserOne]

thanks moris but this is not a PDF or livecycle designer. this is and adaptive form. that will not work

[workflowuser]

What is the use case for changing the color programmatically?

[PowerUserOne]

as you see the picture above. on the adaptive form i have an edit button. when i click on the edit button i need to write with javascript in the rule editor to change the row text to a different color. 

or just give me an example of how to change the color of a label programmatically in adaptive forms. in the rule editor. 

[MorisMonk]

Sorry Power.

Not sure about doing this via script.

I assume the Textbox field is disabled? Enabled when Edit is clicked?

Maybe use these "states" instead to set the color, using Theme Editor? 

[workflowuser]

Correct using the style editor and the state of the component in the best option 

[PowerUserOne]

these has to be dynamically at the click of the button.

I can only set one item to focus so State "focus" will not work

the item is already disabled so State "disable" will not work. 
State "hover" does not make sense unless i hover on it. Nope.
State "error, success, mandatory" does not work because it is not an error, a success or mandatory.

and they all these states will change the css of every row. I tried it. 

i think it should be around the way of how we create instances. and we should be able to give color to the instance field. just like we assign values to them. if the cssClassName was not a read only property then we would be able to assign a style class to the GuideBridgeTextbox. 

i was looking at the Adaptive Forms Class: GuideBridge (adobe.com) setProperty but it also changes properties that are not readonly.

so any thoughts on how to change the color of a GuideBridgeTextbox in the rule editor???? i mean is a color property why does Adobe does not have a set color method?

[PowerUserOne]

Sorry Moris i cannot enable the field. these fields are always supposed to be disabled.

[MorisMonk]

Maybe try something like this?

var myTB = document.getElementsByClassName("myTextBox")[0];
myTB.classList.add("myNewStyle");

[kautuk_sahni]

@PowerUserOne Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[PowerUserOne · Accepted solution]

kautuk_shani

thank you for your follow up. I did discover a way of changing the text by using either javascript or jquery. the key is to grab the id of the control and work with it.

so for example if the image i provided on the question i wanted to change the color of the specific row. (this are created instances with the instancemanger). 

I was able to do it the same manner i changed the whole row highlighting to soft orange (code below). the background of the row (panel) was changed to a soft orange adding a class to the panel control. 

//highlights a grid row Soft Orange
function HighLightRowSoftOrange(ctrl){
  var el = $('#'+ ctrl.id)[0];
  $('#'+ ctrl.id).addClass("highLightRowSoftOrange"); 
}

thank you all for your input 

PowerUserOne