how to change icons for glide list in ui page.

sandhyahr
Tera Contributor

hi All,

i want to change the icons in the glide list to normal standard glide list ..

find_real_file.png

1 ACCEPTED SOLUTION

Hi Sandhya,



I didn't get the question. code breaking up when field changed from text to glide list. Are you fetching value of the glide list field in UI page and populating in some backend table. Is this where you are facing an issue?



Following is the script to get value from glide list field in UI Page. It has to be achieved using DOM manipulation



"select_0myListCollector" is the id for <select> tag when i tried the UI page. This could differ in your case. You need to check the id for the select tag


As per the screenshot the id is highlighted in red color



ui-page-2.JPG



The values which are selected in the glide list are stored as Options under select tag.


Following code will iterate for all options and alert the selected values. You could then store them in an array and process further as per your needs



var myOpts = document.getElementById('select_0myListCollector').options;



  for (i = 0; i < myOpts.length; i++) {


  alert(myOpts[i].value);


  }



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

View solution in original post

7 REPLIES 7

Ankur Bawiskar
Tera Patron
Tera Patron

Hi Sandhya,



As per your requirement you want to change the icons. So here you go


1) UI Macro "lightweight_glide_list" is out of the box. Don't try to change anything in this UI Macro. Since changes done to this will be a global change


2) Create a new UI Macro with exact same code and rename it to "lightweight_glide_list1". Copy paste the xml section as it is in the new UI Macro. Also update your UI page to invoke this macro now instead of the earlier one.


3) In below screenshot line 44 is used for displaying icons using image tag. You can add your own icons in images.



ui-macro.JPG




4) In left nav type images. check whether the icons are present in this table. If yes then as per the screenshot pick up the value for src attribute from image tag and use the same value in line number 44. Replace the code as below



images.JPG



Earlier - <IMG width="16" height="16" alt="${gs.getMessage('Add me')}" title="${gs.getMessage('Add me')}" src="images/icons/user_obj.gifx" border="0"/>



Now - <IMG width="16" height="16" alt="${gs.getMessage('Add me')}" title="${gs.getMessage('Add me')}" src="10off.png" border="0"/>



5) Once you do this you can see the new icon getting replaced in the ui page.



6) If the icons are not present in the images table. you need to download both the icons and then upload them in images tables. Use their src attribute value and then use them in your ui macro



7) As per above code changes we had replaced the icon with 10.png. so the below screenshot displays the new icon on the ui page



ui-page-1.JPG



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

Hi ankur



when i change my field from text filed to glide list field in ui page ,then code is breaking up     (i.e when ever the ui page is saved except the glide list field value is not saved in the backend table....


Hi Sandhya,



I didn't get the question. code breaking up when field changed from text to glide list. Are you fetching value of the glide list field in UI page and populating in some backend table. Is this where you are facing an issue?



Following is the script to get value from glide list field in UI Page. It has to be achieved using DOM manipulation



"select_0myListCollector" is the id for <select> tag when i tried the UI page. This could differ in your case. You need to check the id for the select tag


As per the screenshot the id is highlighted in red color



ui-page-2.JPG



The values which are selected in the glide list are stored as Options under select tag.


Following code will iterate for all options and alert the selected values. You could then store them in an array and process further as per your needs



var myOpts = document.getElementById('select_0myListCollector').options;



  for (i = 0; i < myOpts.length; i++) {


  alert(myOpts[i].value);


  }



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

Community Alums
Not applicable

Hi Sandhya,



Unfortunately, there's no glidelist macro available using the latest icons. From what I discover, the icons are associated to a specific "class" id.


I am working to build a glidelist macro using bootstrap. It's not complete yet but let me share my findings.



#1 When the glidelist is locked, you have 2 buttons. One is to add yourself and other is to unlock the list collector.


2016-10-06 12_00_16-ServiceNow.png


#2 - After you unlock the glidelist, you're able to add/delete a user as you desire.


2016-10-06 12_00_37-ServiceNow.png



If you check the code for the selector,


2016-10-06 12_04_49-_new  5 - Notepad++.png



I am getting problems with "ui:reference" (or input field). I am not able yet to add users to the list and I hope reach there within time.



Thanks and regards,


RMC