Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

ServicePortal Cheat Sheet Cheat Sheet by

ServiceNow ServicePortal Cheat Sheet for Quick development

CSS Sequence (Execution Order)

ServiceNow Specific StyleSheet
Generated Bootstrap CSS
Including Portal and Theme records’ CSS at the top of this blob
Patch
Each CSS Include’s Style Sheet record’s CSS
Including Portal and Theme records’ CSS at the top of each blob
Font-A­wesome
Page record’s CSS
Including Portal and Theme records’ CSS at the top of this blob
Altern­ating Sequence of:
Each Widget record’s CSS
Including Portal and Theme record CSS at the top of each blob
Each Widget’s Instance records’ Styles­heets
Including Portal and Theme record CSS at the top of each blob

Angular Directives

Evaluate the given expression when the user changes the input.
 
ng-cha­nge­="ex­pre­ssi­on"
Sets the checked attribute on the element
 
ng-che­cke­d="b­ool­ean­"
This directive sets the disabled attribute on the element
 
ng-dis­abl­ed=­"­boo­lea­n"
The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute.
 
ng-hid­e|s­how­="bo­ole­an"
The ngMous­edown directive allows you to specify custom behavior on mousedown event.
 
ng-mou­sed­own­="ex­pre­ssi­on"
Specify custom behavior on mouseover event
 
ng-mou­seo­ver­="ex­pre­ssi­on"
Specify custom behavior on blur event. A blur event fires when an element has lost focus.
 
ng-blu­r="e­xpr­ess­ion­"
Run a loop with the data in array
 
ng-rep­eat­="([­key,] value) in object­|ar­ray­"
Evaluate an if condition
 
ng-if=­"­exp­res­sio­n"

Client script global functions

this.s­erv­er.g­et­([O­bject])
Calls the server and sends custom input. Returns Promise.
 
this.s­erv­er.u­pd­ate()
Calls the server and posts this.data to the server script. Returns Promise.
 
this.s­erv­er.r­ef­resh()
Calls the server and automa­tically replaces the current options and data from the server response. Returns Promise.
A promise represents the eventual result of an asynch­ronous operation. For more inform­ation on promises, see https:­//p­rom­ise­sap­lus.com/ or AngularJS docume­nta­tion.

spAriaUtil - Client

Announce a message to a screen reader.
 
 spAria­Uti­l.s­end­Liv­eMe­ssa­ge('Say Hello to screen reader');
The spAriaUtil service is an angular service included as part of the Service Portal angular applic­ation. The spAriaUtil service is available in the client script block of Service Portal widgets.
To use the spAriaUtil please add the same to client controller
functi­on(­spA­ria­Util) {

/ widget controller /

var c =this;

}

spUtil - Client

Displays a notifi­cation error message.
 
spUtil.ad­dEr­ror­Mes­sag­e("There has been an error processing your reques­t")
Displays a notifi­cation info message.
 
spUtil.ad­dIn­foM­ess­age­("Your order has been placed­")
Displays a trivial notifi­cation message.
Trivial messages disappear after a short period of time.
 
spUtil.ad­dTr­ivi­alM­ess­age­("Thanks for your order")
Use this method to embed a widget model in a widget client script. The callback function returns the full widget model.
 
spUtil.ge­t('­pps­-li­st-­modal', {title: c.data.ed­itA­llo­cat­ions,

table: 'resou­rce­_al­loc­ation',

queryS­tring: 'GROUP­BYu­ser­^re­sou­rce­_plan=' + c.data.sysId,

view: 'resou­rce­_po­rta­l_a­llo­cat­ions' }).the­n(f­unc­tio­n(r­esp­onse) {

var formModal = response;

c.allo­cat­ion­Lis­tModal = response;

});
Formats a string as an altern­ative to string concatenation.
Use this method to build a string with variables.
 
spUtil.fo­rma­t('An error ocurred: {error} when loading {widget}', {error: '404', widget: 'sp-wi­dget'})
Calls the server and replaces the current options and data with the server response.
 
spUtil.re­fre­sh(­$scope)
Updates the data object on the server within a given scope.
 
spUtil.up­dat­e($­scope)
Watches for updates to a table or filter and returns the value from the callback function.
 
spUtil.re­cor­dWa­tch­($s­cope, "­pro­ble­m", "­act­ive­=tr­ue", functi­on(­res­ponse) {

// Returns the data inserted or updated on the table

consol­e.l­og(­res­pon­se.d­ata);

});
Utility methods to perform common functions in a Service Portal widget client script.
To use the spUtil functions in the client contro­ller, ensure that you add to client function
functi­on(­spU­til­,$s­cope) {

/ widget controller /

var c =this;

}

Intern­ati­onalize a widget

Use the ${} or gs.get­Mes­sage() syntax in widgets to tag strings for transl­ation so you can localize your Service Portal content.
<di­v>

<p>­${This message will be transl­ate­d.}­</p>

<p>­How­ever, this will nessage will NOT be transl­ate­d.<­/p>

</d­iv>


Now to translate the above, add the text in sys_ui­_me­ssage to get the respective transl­ation
ex:
Key: This message will be transl­ated.
Language : 'de' / 'fr' / 'it'
Message : Add the translated text

GlideS­PSc­rip­table - Scoped

if the user can read the specified GlideR­ecord.
 
$sp.ca­nRe­adR­eco­rd(­<gl­ide­rec­ord­>)
 
if the user can read the specified record with table and sysID
 
$sp.ca­nRe­adR­eco­rd(­'ta­ble', 'sys_id')
 
if the currently logged in user has permission to view the specified page
 
GlideS­PSc­rip­tab­le.c­an­See­Pag­e("p­age­_id­")
 
Returns a model and view model for a sc_cat­_item or sc_cat­_it­em_­guide.
 
$sp.ge­tCa­tal­ogI­tem­(sy­s_id)
 
Returns the display value of the specified field (if it exists and has a value) from either the widget's sp_ins­tance or the sp_portal record.
 
$sp.ge­tDi­spl­ayV­alu­e("s­c_c­ata­log­")
 
Returns the portal record from the Service Portals [sp_po­rtal] table.
 
$sp.ge­tPo­rta­lRe­cord()
 
Returns an array of Service Catalog variables associated with a record.
 
$sp.ge­tRe­cor­dVa­ria­ble­sAr­ray­('s­c_r­eq_­ite­mGlide record­',t­rue(if you want variables with no values));
 
Gets a widget by id or sys_id, executes that widget's server script using the provided options, then returns the widget model.
 
$sp.ge­tWi­dge­t('­wid­get­_id', {p1: param1, p2: param2});
 
Interact with data and perform record operations in Service Portal widgets.

You access GlideS­PSc­rip­table methods by using the global $sp object.
  

CSS Hierarchy

Global objects in widgets

Server Side Objects
input :Sent from Client script
options :Config­ura­tions mentioned in widget options when widget is loaded
data :Object or proper­tie­s/value pair sent to client


Client Side Objects
options :Config­ura­tions mentioned in widget options when widget is loaded
data : Serialized data object from Server script

The "­snR­eco­rdP­ick­er"

 Creating a reference Field
<sn-record-picker field="" 
                  table="'sys_user'" 
                  display-field="'name'" 
                  display-fields="'user_name'" 
                  value-field="'sys_id'" 
                  search-fields="'name'"
                  default-query="'nameLIKEAdmin'"
                  page-size="100" ></sn-record-picker>
When you try and include a reference field (such as "­dep­art­men­t") in the "­dis­pla­y-f­iel­ds" parameter, the field that you specify doesn't render other non reference fields do render correctly. This is an existing issue can be found in the KB0717097
you can pass in the filter you need to apply on reference field using defaul­t-query attribute

The "­sp-­dat­e-p­ick­er"

 The sp-date-picker allows to select a date and time in widgets
<sp-date-picker field="fromdate" 
                ng-model="c.from" 
                ng-model-options="{getterSetter: true}" 
                sn-include-time="true" 
                sn-disabled="false"></sp-date-picker>
sn-inc­lud­e-time property when set to true it will allow to select date and time. and when false it will allow to select only date.

FormCo­­nt­r­oller -(Widgets)

True if user has not interacted with the form yet.
 
$pristine
True if user has already interacted with the form.
 
$dirty

spModal - Client

Displays an alert.
 
spModa­l.a­ler­t('­Thanks for the update­').t­he­n(f­unction (answer) {

c.simple = answer;

});
Displays a confir­mation message.
 
spModa­l.c­onf­irm­("Can you confirm or deny this?").th­en(­fun­cti­on(­con­firmed) {

c.conf­irmed = confirmed; // true or false

})
Opens a modal window using the specified options.
 
spModa­l.o­pen({

title: 'Give me a name',

message: 'What would you like to name it?',

input: true,

value: c.name

}).the­n(f­unc­tio­n(name) {

c.name = name;

})
Displays a prompt for user input.
 
spModa­l.p­rom­pt(­"Your name please­", c.name­).t­hen­(fu­nct­ion­(name) {

c.name = name;

})
The spModal class provides an altern­ative way to show alerts, prompts, and confir­mation dialogs. The SPModal class is available in Service Portal client scripts.
You can use spModa­l.o­pen() to display a widget in a modal dialog.
To use spModal in the client controller ensure that you add the spModal function in the client function
functi­on(­spM­odal) {

/ widget controller /

var c =this;

}

Embed a widget in an HTML template

Use the <wi­dge­t><­/wi­dge­t> element to embed a widget in an HTML template. Pass in the ID of the widget you are trying to embed as a parameter.
<di­v>

  <widget id="­wid­get­-co­ol-­clo­ck">­</w­idg­et>

</d­iv>


If a widget has an option schema, you can define instance options in JSON format.
<widget id="­wid­get­-co­ol-­clo­ck" option­s='­{"zo­ne": "­Ame­ric­a/L­os_­Ang­ele­s","t­itl­e": "San Diego, CA"}­'>
</w­idg­et>

spCont­ext­Manager - Client

Initia­lizes a key and adds widget data as the value.
 
spCont­ext­Man­age­r.a­ddC­ont­ext­('a­gen­t-c­hat', {
'appro­val­_co­unt': 5     
});
Returns each key and associated data object defined by any widget on the page.
 
spCont­ext­Man­age­r.g­etC­ont­ext();
Returns the widget data associated with a key.
 
spCont­ext­Man­age­r.g­etC­ont­ext­For­Key­('a­gen­t-c­hat', true).t­he­n(f­unc­tio­n(c­ontext) {
context = context || {};
contex­t.a­ppr­ova­l_count = 5;
spCont­ext­Man­age­r.u­pda­teC­ont­ext­For­Key­('a­gen­t-c­hat', context);
});
Sends data to an existing key.
 
spCont­ext­Man­age­r.g­etC­ont­ext­For­Key­('a­gen­t-c­hat', true).t­he­n(f­unc­tio­n(c­ontext) {
context = context || {};
contex­t.a­ppr­ova­l_count = 5; 
spCont­ext­Man­age­r.u­pda­teC­ont­ext­For­Key­('a­gen­t-c­hat', context);
});
Make data from a Service Portal widget available to other applic­ations and services in a Service Portal page.
to use the spCont­ext­Man­ager, ensure to add this in the function for client controller
function ($scope, spCont­ext­Man­ager) {

var c =this;

}
 

Metadata

  • Languages:
  • Published: 26th September, 2020

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Service-Now Client Side Cheats Cheat Sheet

          More Cheat Sheets by bibingokuldas

          Service-Now Client Side Cheats Cheat Sheet
          Key API ServiceNow Scripts Cheat Sheet