Changing the visual appearance of an object

Avatar

Avatar

a_c_hoff

Avatar

a_c_hoff

a_c_hoff

18-02-2014

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Magus069

MVP

Avatar

Magus069

MVP

Magus069
MVP

18-02-2014

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";

}

Answers (3)

Answers (3)

Avatar

Avatar

a_c_hoff

Avatar

a_c_hoff

a_c_hoff

01-04-2014

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";

}

Avatar

Avatar

fergie07

Avatar

fergie07

fergie07

02-04-2014

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

Avatar

Avatar

fergie07

Avatar

fergie07

fergie07

01-04-2014

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