Changing the visual appearance of an object

[workflow4me]

Hi all,

I am working on a form with a textfield in it. My goal is to add a script that will change the appearance of the textfield from a sunken box to none when the field is not empty. Note that I am not changing the border of the field, I am altering the appearance of the object. The reason I am doing this is that the form is going to act as a template, so when the user exits the field after typing their text, I want to remove the appearance of the sunken box so that the textfield looks the same as just text.

[workflow4me]

i have same related issue, For Text field, at the design time i Assigned "Underlined" to "Appearance " and i need to remove the border based on other field's value .

[#3 · Accepted solution]

This should do the trick if your textbox is already set with the sunken box visual appearance

if (this.rawValue != null){

     //Use this line to hide the borders

     TextBox1.border.presence = "hidden";

}else{

     //Use this line to show the borders

     TextBox1.border.presence = "visible";

}

[#4]

Try placing the script in the enter and exit events. I used the enter event to show the border always so that when users enter the field they can see the boundaries. For this, I just used:

this.resolveNode("$").border.presence = "visible";

Then in the exit event I placed the following codes to evaluate whether the field was null and show or hide the border (the exit event works for this because the code only affects the object when it is changed and exited). Setting the height to null reduces the field size so you don't have a borderless text field taking up space with the empty/unfilled area of the object (basically it sizes the object to shrink to fit the text):

if (this.resolveNode("$").rawValue != null && this.resolveNode("$").rawValue != "") {

  this.resolveNode("$").border.presence = "hidden";

  this.resolveNode("$").h = "";

}

if (this.resolveNode("$").rawValue == null || this.resolveNode("$").rawValue == "") {

  this.resolveNode("$").border.presence = "visible";

}

[#5]

Hi -

Actually, the GUI was able to change the appear of the textfield boxes and have the inner box removed by in the Object dialog in the filed tab setting the appearance to None.  Hope this helps someone, doug

[#6]

I placed this code in the layout:ready event and the value of this.rawValue is always null.  I also tried initialized and form ready events.  Any ideas of when I can change the border successfully using Javascript?

Doug