logo

NJP

The Conditional Styling Workaround | Get to the Point! ⏰

Import · Sep 29, 2022 · video

today's question starts as such I am trying to style a servicenow field under a certain condition when I Define the condition in the value field of a style it only applies to the list View and not the form view when I remove the condition from the value field it applies regardless of the condition however only to the form View and now no longer the list view how can I create a styling condition that applies conditionally both to the list and the form views on servicenow today's answer falls under the category of scripting so if that's what you're in for let's get to the point as the questioner implied the easiest way to customize any type of style for a servicenow form or List view is using the field style table on the form view right click your field in question and click configure style next click the new button in the upper right hand corner and servicenow will auto fill in most of what's already important to style your field simply write the CSS code in the style field that will render things the way you want them to appear in this form view now here's where stuff gets funny without adding anything to the value field this style will only apply to forms that's why in most cases people have to make two style records for the same field one with an empty value that will apply exclusively to the form View and one with a value of something like JavaScript colon true to apply it to the list view however the question asker wanted a conditional style that applied to both which is where we run into a problem if we adjust the value to something that is conditional that will fix the styling issue for lists but of course then we can not apply the same logic to forms according to the docs website this is a bug that's been around since the Eureka version of servicenow go figure luckily the flexibility of servicenow allows us to fix this problem in an alternative way for forms in either the list or form view for your table in question right click the header go to configure select client scripts and again click the new button in the upper right hand corner like when we created a field style this fills in most of the important bits by going through this route but go ahead and appropriately name your script and change the type to onload as a reference and kind of a cheat I also like to copy and paste my value statement from the field style into the description just as a nice reference point now within the brackets of our onload function which was rendered down below we're going to be using the G form or Glide form class to gather the bits needed to recreate our condition first we're going to create a variable for the field we are styling using the get element function that will reference the actual HTML element next create variables for each piece of your conditional puzzle using get value additionally if you have more of a complex condition you can not walk in this scenario as well next we Define our condition using an if statement with our condition as its parameter recreating essentially what I have in the description box within the body of the if statement we are going to type the variable name for the field that we're wanting to customize after that put dot style which will access the HTML Dom Style object and then dot whatever property we're hoping to change the Dom Style properties vary slightly from CSS so you might have to play around with it for a little bit but I've gone ahead and included a comprehensive list of those Dom attributes down below once that's done we're going to go ahead and end with a semicolon and repeat for this many properties as we're looking to change and of course go ahead and press save and voila using a combo of the field style table as well as creating an additional client script we have successfully created a conditionally styled field that's pervasive across all of our views click like down below if this helped you solve your styling issues and we'll see you next time that we get straight the point cheers [Music]

View original source

https://www.youtube.com/watch?v=TXZfaVIbWcc