Client Scripts for OOB DOM Manipulation

IanGlencross
Kilo Expert

I know.   I know.   We don't do that.

          However . . .

We have just jumped from Dublin to Geneva and all our users are crying about the tiny text boxes in the work_notes / comments fields.  

find_real_file.png

And since the white space is never going to be used by "form-field-addons" for these particular fields, in this particular form, I thought I'd fix it with a short client script using prototype.  

When (if) it stops working after the upgrade to Helsinki I can apply another fix at that point.   It's not the best solution .. but it looked easy enough for a quick win

So here is what I wrote :.

find_real_file.png

But it didn't work.

I have set glide.script.block.client.globals to false, and I'm pretty certain I am targeting the right elements

Does anyone have any ideas why this didn't work, or a better solution to this issue?

1 ACCEPTED SOLUTION

IanGlencross
Kilo Expert

The issue was with the selectors.



Both prototype and jquery can't handle id selectors that have periods (.) in them.



To get the selectors to work you need to escape (use \) the special characters.   This also applies to id's that have # and : in them.


The correct   prototype selector statement is :



$$('#element\.incident\.comments div').each( ....


View solution in original post

5 REPLIES 5

The SN Nerd
Giga Sage
Giga Sage

If width is the issue, you could stack them on top of each other, which would give them very large width.



Perhaps considering using the native Work Notes & Comments field in future


It is now bundled into the new activity formatter, which displays quite nicely.Save as.PNG



DOM manipulation should always be last resort.



ServiceNow Nerd
ServiceNow Developer MVP 2020-2022
ServiceNow Community MVP 2019-2022

You and I think along the same lines.   My first "fix" was the "stack on top"   option.  


However, the powers that be didn't like that - they want the fields side by side, with a better use of the white space.



The fields actually are the the "native" work_notes and comments (as seen by the name of the #id i use in   the CSS Selector) -   we just have changed the text in the labels.    



I just wish ServiceNow would give us better control over layout of forms, the form designer is so limited.     And don't get me started on Catalog forms. It's either a better design tool or move to a flexbox based design so that all this restricted bootstrap control becomes a non-issue.  



I mean   ...   isn't flexbox the the future for Responsive website design? I know it's only at CR stage with W3C, but it will be PR in a fews weeks time and with all the major browsers already supporting it I think it's time SN made the move.


Kalaiarasan Pus
Giga Sage

Have you tried using field styles on the field?


Unfortunately since UI14 width is one of the things that you can't control using field styles.


Field Styles was how we were able to present the fields with width as 80% when we were in Dublin under UI11.