Expand my Community achievements bar.

SOLVED

programmatically changing textbox text color in an adaptive form

Avatar

Level 2

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?

 

PowerUserOne_0-1709763734941.png

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

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

 

PowerUserOne_0-1725465903154.png

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

View solution in original post

13 Replies

Avatar

Employee Advisor

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

image.jpg

Avatar

Level 2

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

Avatar

Level 5

Just a copy/paste from another question  

Try something like

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

Avatar

Level 2

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

Avatar

Employee Advisor

What is the use case for changing the color programmatically?

Avatar

Level 2

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. 

Avatar

Level 5

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? 

Avatar

Employee Advisor

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

Avatar

Level 2

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

 

PowerUserOne_0-1709771681957.png


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.

 

PowerUserOne_1-1709772319234.png

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?

 

 

 

Avatar

Level 2

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

Avatar

Level 5

Maybe try something like this?

 

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

Avatar

Administrator

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



Kautuk Sahni

Avatar

Correct answer by
Level 2

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

 

PowerUserOne_0-1725465903154.png

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