Anyone familiar with the Service-Now product is very familiar with the "Activity" formatter in tasks. It is a core component to display history for the task. As standard in this activity section comments and work notes get a color and icon, the assigned to field gets an icon, among other formatting.
Recently someone asked me if they can change this formatting to make the work notes stand out more than the others. I found this formatting to actually be really flexible via css.
Here is how
In your instance go to "System Properties --> UI Properties". You will see two different properties. The "Activity additional comments style" and "Activity work notes style". They normally have the below css style to give them their background color.
There are also two other properties - below, that specify the icons used.
If you are familiar with CSS, especially some new stuff in CSS3, you could do some really cool things to format these two fields differently.
I will first point out that not all browsers support all CSS3 properties. You will want to find ones that work for the browsers you use. Or just upgrade to the latest firefox, or chrome browsers to get most of the cool functionality.
Here are some examples...
-- Work Notes
background-color: MistyRose; border:3px solid LightGray; padding:5px 5px 5px 15px; border-radius:5px; box-shadow: 10px 10px 5px #888888; border-left:12px solid LightGray;font-family:Verdana, Geneva, sans-serif;font-size:14px;
I changed the background color, added a border, padding, rounded the corners, gave it a drop shadow, modified the font family, and increased the font size.
-- Comments
background-color: WhiteSmoke; border:3px solid LightGray; padding:5px 5px 5px 15px; border-radius:5px; box-shadow: 10px 10px 5px #888888; border-left:8px solid LightGray;
The comments could be similar but different font, color etc.
You could also change the icons out for something that you like.
The real question... Can you do this to any field in the activity section??
The answer is YES. The "UI Properties" only has properties for comments and work notes, in addition to icons for these, assignment groups, and assigned to fields. All you have to do is to create additional properties for these fields as well.
Check out this wiki article for information how to add a system property http://wiki.service-now.com/index.php?title=Adding_a_Property
Follow these steps
- Type sys_properties.list in the Navigation filter to get to the properties list.
- Go to those that start with "glide.ui.activity". You will see the comments and work notes properties called "glide.ui.activity.style.comments" and "glide.ui.activity.style.work_notes"
- Create a new property called "glide.ui.activity.style.somefieldname" following the same pattern as above. Make sure you specify it as a string type.
- Add in some CSS properties into the Value.
- In order for this property to also show up in the "UI Properties" area, you will need to add a related list to the properties form, if not already there, called "Categories". Give this newly created property a category of "UI". It will now show up in the "UI Properties" area.
- If you would like to add an image for this field, create a new property with "glide.ui.activity.image.somefieldname". Give it a type of image and the value is the path to the image.
Here is an example of the state field properties that I created and added some css and an image.
CSS property = glide.ui.activity.style.state
Image property = glide.ui.activity.image.state
So in the end your activity formatter can have custom formatting to distinguish fields better in the formatter.
Enjoy.
<script></script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22945975-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
32 Comments
