Make column right alignment in List view possible ?

georgechen
Kilo Guru

Hi folks,

The issue is the Amount field needs right alignment in ListView.   I know there may not be an easy option other than raising an enhancement request based on Re: List View Column need to be aligned center not left/right

Re: List View Column need to be aligned center not left/right

find_real_file.png

find_real_file.png

However, I was wondering if anyone every tried the same approach as I am now as below,

1) Create field style on the table column which doesn't work as expected

find_real_file.png

2) Not the best approach, but it may work by creating onLoad Client Script

function onLoad() {

var LIHeaders = document.getElementsByClassName('text-align-left list_header_cell list_hdrembedded');

if (LIHeaders.length>0) {     // LIHeaders.length returns 5 which is the 5 columns and LIHeaders[4] is the Amount field

for (var j = 0 ; j < LIHeaders.length; j++) {

if (LIHeaders[j].innerHTML.toLowerCase().indexOf('amount') != -1) {   //if the element HTML contains amount

//LIHeaders[j].innerHTML= "TEST";   // replaced with TEST and it worked (this is the right element to work on)

LIHeaders[j].style.textAlign="right"; // tried without luck.

//console.log("test: LIHeaders[j].innerHTML=" + LIHeaders[j].style); //output to browser console for debugging

//LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace("Amount","<p style='text-indent: 0.5em;'>Amount</p>");     // tried without luck.- inserting new space

//LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace("column_head list_hdrcell table-col-header",""); // removing the class, no luck

//LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace("cursor:pointer; margin-right:4px","cursor:pointer; margin-right:0px");   // changing the margin-right to 0px, no luck (by the way, it is the hanger bar 3 bar icons, not Amount)

LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace('align="left"','align="right"'); // this doesn't work either

console.log("test: " + LIHeaders[j].innerHTML);

}

      }

}

Here is the element source code on Amount field

find_real_file.png

Other than waiting for Enhancement from ServiceNow HI, is any way I could DIY myself?

Any advice would be appreciated.

Kind regards,

3 REPLIES 3

Harsh Vardhan
Giga Patron

Hi George,



if i am not wrong it's integer type field. i tried on PDI and it's working.



find_real_file.png



find_real_file.png



Hope it will help you


Hello Harsh, Would you please let us know what you had given in the value part( 1==1) ?


The Value field may contain JavaScript that is evaluated to determine if this style should be used for the field within a list.


Set Value to javascript:<script> - the field value is available to the script as the variable value.


If the evaluated script returns true, the style is used for the list item.



I just make it simple and used javascript: 1==1, after that it's returned true and now this field style has been applied on list.