Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Changing the visual appearance of an object

a_c_hoff
Level 3
Level 3

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.

1 Accepted Solution
Magus069
Correct answer by
Level 10
Level 10

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

}

View solution in original post

5 Replies
Magus069
Correct answer by
Level 10
Level 10

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

}

View solution in original post

fergie07
Level 2
Level 2

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

a_c_hoff
Level 3
Level 3

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

}

fergie07
Level 2
Level 2

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

workflow4me
Level 1
Level 1
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 .