How to recover white-space on hidden variables in the catalog..

Stephen W_
Giga Guru

UI policy actions and "setDisplay()" are only effective at filling empty space vertically, not horizontally

Example, if I have two variables in a 2 column container:

[   a   ] [   b   ]

If I use setDisplay to hide "a", "b" will remain in it's place.  

                [   b   ]

If I have four variables:

[   a   ] [   b   ]

[   c   ] [   d   ]

it will fill from the bottom, completely ruining any organization.

[   c   ] [   b   ]

                  [   d   ]

Short of DOM manipulation.. is there a way to alter the collapse behavior?

Thanks,

-Stephen

1 ACCEPTED SOLUTION

This is where careful layout design comes in. For best user experience, keep your show/hide fields either directly under or to the right of the static fields.



E.g. Choose one option and it 'turns on' several other fields below or to the right.


View solution in original post

8 REPLIES 8

Chuck Tomasi
Tera Patron

Use g_form.setVisible() in your client script (or a UI policy)



Docs: GlideAjax


Client Script Best Practices - ServiceNow Wiki      


Er, perhaps I was unclear..


I would like:


[   a   ] [   b   ]


to become


[   b   ]



setVisible() doesn't reclaim whitespace at all.


Do you have a screenshot. I'm not understanding what this is looking like. Are you looking to collapse/hide an entire container from the left side of the screen and have the elements on the right shift to the left? Again, a screenshot is worth 1,000 words.


Here's the initial state:


find_real_file.png



Now I hide a:


find_real_file.png



or hide "a" and "c":
find_real_file.png



I can protect the order of things by putting them in separate containers.. but then I end up with a really ugly looking screen, esp when four columns are used:


find_real_file.png