Hi All,
I want to how to create a button field on header . I saw this functionality in instance : demo001.service-now.com labeled as "Contact us " . Please find screenshot for same. I searched this in ui action and ui macros , But didn't find how it is created.
Thanks and Regards
Govind Sharma
Here's a ui script I put together to add Ticket, Problem, Incident and Change buttons to the header bar...
$('nav_header_stripe_decorations').style.width ="800px";
//New Problem Icon
var problemIcon = "<a target='gsft_main' href='problem.do?' class='btn btn-default homepage-button' id='sneProblemIcon' style='margin-left: 5px; margin-right: 10px; margin-top: 0px; margin-bottom: 0px; padding: 0px 5px 0px 0px; color:white;border-style: solid; border-width: 1px; vertical-align: middle;'><span class='icon-cart pull-left' style='margin-right: 4px;'></span>New Problem</a>"; //);
$('gsft_logout').insert({before:problemIcon});
//New Incident Icon
var incidentIcon = "<a target='gsft_main' href='incident.do?' class='btn btn-default homepage-button' id='sneIncidentIcon' style='margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; padding: 0px 5px 0px 0px; color:white;border-style: solid; border-width: 1px; vertical-align: middle;'><span class='icon-book pull-left' style='margin-right: 4px;'></span>New Incident</a>"; //);
$('sneProblemIcon').insert({before:incidentIcon});
//New Change Icon
var changeIcon = "<a target='gsft_main' href='change_request.do?' class='btn btn-default homepage-button' id='sneChangeIcon' style='margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; padding: 0px 5px 0px 0px; color:white;border-color: white; border-style: solid; border-width: 1px; vertical-align: middle;'><span class='icon-collaboration pull-left' style='margin-right: 4px;'></span>New Change</a>"; //);
$('sneIncidentIcon').insert({before:changeIcon});
//New Ticket Icon
var ticketIcon = "<a target='gsft_main' href='ticket.do?' class='btn btn-default homepage-button' id='sneTicketIcon' style='margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; padding: 0px 5px 0px 0px; color:white;border-style: solid; border-width: 1px; vertical-align: middle;'><span class='icon-cart pull-left' style='margin-right: 4px;'></span>New Ticket</a>"; //);
$('sneChangeIcon').insert({before:ticketIcon});
//Move Update Set Picker
$('update_set_picker_select').className = '';
if($('update_set_picker').select('li')[0]){
$('update_set_picker').select('li')[0].className = '';
$('update_set_picker').select('li')[0].style.paddingRight="10px";
$('update_set_picker').select('li')[0].style.listStyleType ="none";
$('update_set_picker').style.height ="35px";
$('update_set_drill').style.color ="#FFF";
$('update_set_drill').style.marginTop = "2px";
$('update_set_picker').select('li')[0].select('a')[1].style.color ="#FFF";
$('update_set_picker').select('li')[0].select('a')[1].style.marginTop = "2px";
$('update_set_picker').select('li')[0].select('a')[2].style.color ="#FFF";
$('update_set_picker').select('li')[0].select('a')[2].style.marginTop = "2px";
$('update_set_picker_select').style.color ="#000";
}
if($('update_set_picker').select('legend')[0]){
$('update_set_picker').select('legend')[0].remove();
}
$('nav_header_stripe_decorations').insert({
top: $('update_set_picker')
});
$('update_set_picker').id = 'update_set_picker_new';
$('update_set_picker_select_title').id = 'update_set_picker_select_title_new';
Adding the buttons is ok it's moving the existing items so there is space for the new buttons.
Here's the result
I added extra css from the rounded buttons but essentially that's what you'll get.
Hope this helps
