Call me strange but when it comes to UI design I think buttons related to fields should be next to the field. In ServiceNow I've been told numerous times that I can either have a Form Button in the banner or a Form link at the bottom - why? Why not next to the field?
Well I set out to find a solution and quite quickly found one using UI Macros - but I am on Fuji with it's new UI and nice monochrome button icons - how can I get that look and feel on my own UI macro?
To create a UI macro with new style icons try the following (if anyone has any reason to believe that there may be unintended consequences then please comment - and - use at your own risk):
My use case here was to add a button next to the Current Contact field to get the contact number of the Caller captured in the Caller field (we don't want to pre-populate it as we want to encourage asking for the current number if possible - people tend to move around a lot):
To build this:
- Add a system UI macro (enter 'ui macros' in the navigation) - give it a useful name e.g. getCallContact
- Create your script - in this case I used the following:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var="jvar_n" value="getCallContact_${ref}"/>
<a id="${jvar_n}" onclick="getCallContact('${ref}')" title="Get Caller's Contact No." class="icon ref-button icon-phone btn btn-default btn-ref"></a>
<script>
function getCallContact(reference) {
//Get the related reference field ready for populating
var s = reference.split('.');
var referenceField = s[1];
//Get office phone for affected user or mobile if no office phone
//Cycle options if there are any on future clicks
userObject = g_form.getReference('caller'); //Change this if caller is in another field.
var officePhone = userObject.phone;
if (officePhone.length==0 || g_form.getValue(referenceField)==officePhone) {
var mobilePhone = userObject.mobile_phone;
g_form.setValue(referenceField, mobilePhone);
}
else
{
g_form.setValue(referenceField, officePhone);
}
}
</script>
</j:jelly>
- This is the clever bit - you will notice in the code above that I have created the button as an <a> tag - in here I specify the title (for a hover hint) and a class - in the middle of the class there is a reference to the button icon 'icon-phone' - this can be changed to any icon in the ServiceNow css (see my other article)
- Now configure the dictionary of the field you want to apply the button to and add a reference to your script in the attributes field:
ref_contributions=getCallContact
And that's it! Save and reload your form and there you are - beautiful Fuji-style buttons next to your fields - easy to understand and more productive!
Thanks to whoever I got the css trick from (I found something on Google and can't recall it)
Hi Paul,
is there a way to make it a hover button instead of a click button? Requirement is for users to hover over the icon to get the Impact Help.
Hi Zachary,
You could always add a url onto the Label for the Impact field and when clicked have that direct to a KB article that explains the impact field. To do this:
1.Create a KB article explaining all about Impact and publish it.
2. View the article and click Copy Permalink at the bottom of the KB article
3. Right Click on the Impact field and choose Configure Dictionary
4. On the Labels Related List select the correct entry for the Label for the table you are on
5. Click the Unlock icon on the URL field and paste in the Permalink of the KB article you created in step 1. Relock the URL field and save the Field label record.
Once done your Impact filed will look like this:
and if the user clicks on the 'Impact ?' label it will open a tab in your browser where they will be taken to your KB Article explaining all about Impact
Not quite as nice as the hover functionality you wanted, but works a treat.
Regards,
Paul.
Hi Zachary,
You can easily do what you what by using css rule.
Here is just a fast example using parent element with id view_test , all content inside popup div and css rules defined in <style> tag
<style>
#view_test div.popup{
display:none;
}
#view_test:hover div.popup{
display:block;
}
</style>
Trick is to hide you popup by default with the first rule.
But when you hover a mouse over an element - more specific selector override the visibility rule so hidden content will be shown
Hi,
I've used your tips and it's work almost well... just a question about how to "place" the button next to the field in that case?
Thanks for your help 🙂
Hello eddy42,
I have an requirement, the question mark icon should be next to the field as shown in the image, and it is a non-reference field. Can anybody help me with this. I have tried with client script but I'm unable to get as my requirement.
