Dynamically change column labels in a List view using JavaScript?

mewalker22
Kilo Contributor

Is it possible to dynamically change column labels in a List view using JavaScript?

1 ACCEPTED SOLUTION

coryseering
ServiceNow Employee
ServiceNow Employee

Hi Marcus,



I hate saying "no" to questions like this, because of course there are. They are elements in the DOM, and JavaScript has the ability to arbitrarily modify the DOM. Therefore, it is possible. But the practical answer is no. For a host of reasons:


  • They are difficult to target individually
  • The names aren't necessarily unique
  • The names might be different between languages
  • Lots of things update those- from simply adding/removing columns by personalizing/configuring, to the very basic "click the header to sort it" will actually cause the elements to be rebuilt with the original names
  • Who knows if those names are carried through to anything else that relies on the original values as output in the DOM
  • The platform has no defined support for it, and so any customization that purports to do so may stop working when a UI update/upgrade is released
  • And more!


Field labels are the Labels of the columns they represent. You can translate them so they appear correctly in other languages, but trying to manipulate them after they've been rendered on a list is likely to lead to heartache and many nights of cursing.


View solution in original post

7 REPLIES 7

Hi @coryseering 

 

I am not able to access the link shared by you.

 

I'm ok with the label int he list view being the same as on the form.... was just trying to figure out how to do this in a dynamic way such that based on some user input, the form would refresh and display new column labels.   The labels on the form view could also change to match updated label.



Thanks,


Marcus


I don't know if I would call it a "supported" method, but we do have a way to replace long column names with shorter ones. We use it most often when a dot-walked label gets ridiculously long.



We have a table called "Long Column Names" that has two columns, the "Long Column Name", and the "Replace With" string.



There is a global UI script called "Shorten List View Column Names" that contains the following script:



window.setTimeout(do_change_stuff,2000);




function do_change_stuff() {


      try {


              // Shorten List View Column Names


              var name = new GlideRecord('u_long_column_names');


              name.orderBy('u_length');


              name.query();


              while (name.next()) {


                      jQuery('a.column_head.list_hdrcell:contains("' + name.u_long_column_name + '")').html(name.u_replace_with);


              }


      }


      catch (e) {


      }


}