Service Portal

order guides

tip:

use cascade variables with variable names matching the catalog item variables rather than variable mappings from rule base entries, which doesn't seem to work too well in the portal

Widget Coding

submit value to server script - method 1:

take the value of a html field, and submit so that the server script fires

Client script:

c.data.duplfield = angular.element($('#dupl_field')).val();

c.server.update();

submit value to server script - method 2:

take the value of multiple html fields, and pass these to the server script 

Client script:

c.server.get({

            action: "get_dupls",

            msg : "hello server",

            sn_table : angular.element($('#tbl_name')).val(),

            duplfield : angular.element($('#dupl_field')).val()

})

server script:

if (input && input.action === "get_dupls"){

         gs.addInfoMessage('SERVER...');

      gs.addInfoMessage(input.msg);

        gs.addInfoMessage(input.duplfield);

        gs.addInfoMessage(input.sn_table);

       

        data.duplresult='blah blah';

     

}

Click a button:
Html:

<br/><br/><button ng-click="runtheoperation()" class="btn btn-danger action-btn pull-left">Click to check dupl</button>

Client script:

function($scope) {

  /* widget controller */

  var c = this;

   

    $scope.runtheoperation = function() {

   

      alert('the button was clicked!');

       

        };

}

Shifting array returned from server script into a client script and back into textarea
this nicely formats the array by shifting each element to a new line in the textarea

c.duplrecordsSize=r.data.duplrecordsSize;

var duplData=r.data.duplrecordsList;

c.duplrecordsList=duplData.join('\n');

(see widget example below for full HTML and client/server scripts)

Example Widget to run a glideAggregate to check duplicates on a table:

A simple widget to return duplicate records

HTML:

<title>Check ServiceNow Table for duplicates</title>

<div class='container'>

<!-- your widget template -->

  <label>Enter table name here</label>

    <input value ='sys_user' id='tbl_name'>

  <br/>

  <label>Enter field name here</label>

    <input value='email' id='dupl_field'>

  <br/>

  <label>Custom query string</label>

    <input value='active=true' id='custom_query'>

  <br/>

  <br/><br/><button ng-click="runtheoperation()" class="btn btn-danger action-btn pull-left">Click to check dupl</button>

<br/><br/>

   <label>results</label><br/>

   <textarea id='results_q' rows="10" cols="100">{{c.duplrecordsList}}</textarea>

</div>

<h1>Total list:{{c.duplrecordsSize}}</h1>

<!--<div class='div_results'>

{{c.duplrecordsList}}

</div>-->

CSS-SCSS:

.container {

  clear: both;

  text-align:left;

  align-content: left;

}

.container input {

  width: 100px;

  clear: both;

}

.container label {

  width: 150px;

  clear: both;

}

.container textarea {

  color:black;

}

CLIENT SCRIPT:

function($scope) {

  /* widget controller */

  var c = this;

    c.duplrecordsSize=0;

    //c.duplrecordsList=[];

    c.duplrecordsList='';

   

    $scope.runtheoperation = function() {

        //console.log("message", 'run the op');

        c.server.get({

               action: "get_dupls",

             msg : "Running glideaggregate to check for duplicates...",

               sn_table : angular.element($('#tbl_name')).val(),

               duplfield : angular.element($('#dupl_field')).val(),

               customQuery : angular.element($('#custom_query')).val()

           }).then(function(r){

              // alert('SIZE: ' + res.data.duplrecordsSize);

              //alert('test2: ' + r.data.duplrecordsSize);

              c.duplrecordsSize=r.data.duplrecordsSize;

              var duplData=r.data.duplrecordsList;

              c.duplrecordsList=duplData.join('\n');

             

        });

     

  };

}

SERVER SCRIPT:

(function() {

  /* populate the 'data' object */

  /* e.g., data.table = $sp.getValue('table'); */

    data.duplrecordsList=[];

    data.duplrecordsSize=0;

    if (input && input.action === "get_dupls"){

        data.duplrecordsList=(checkDuplUsers(input.customQuery, input.duplfield,input.sn_table));

       

      data.duplrecordsSize=data.duplrecordsList.length;

    }

function checkDuplUsers(customQuery, fieldParam, table){

  var ga= new GlideAggregate(table);

  ga.addAggregate('COUNT', fieldParam);

  if (customQuery){

    ga.addQuery(customQuery);

  }

  ga.addHaving('COUNT', '>', 1);

  ga.query();

    var dupls=[];

    dupls.push("The following " + ga.getRowCount() + " users are duplicate on " + fieldParam);

  while (ga.next()) {

        var DuplLine=ga.getAggregate('COUNT', fieldParam) + " => " + ga.getElement(fieldParam);

     dupls.push(DuplLine);

 }

    //gs.log(dupls,'duplWidget_arr');

    return dupls;

}

})();

Create a Service Portal

https://docs.servicenow.com/bundle/kingston-servicenow-platform/page/build/service-portal/reference/setup-service-portal.html 

Create a basic service portal

navigate to Service Portal > Service Portal configuration

navigate to Service Portal > Portals, then click New.

complete the page as per https://docs.servicenow.com/bundle/kingston-servicenow-platform/page/build/service-portal/task/create-a-portal.html

to begin with, you can configure all of the options as per the demo sp settings

Branding a portal

via /sp_config?id=branding_editor


have a play with the various options: navbar background, page background, etc

for more in-depth branding options, consult https://docs.servicenow.com/bundle/kingston-servicenow-platform/page/build/service-portal/concept/portal-css.html

the theme of the portal can also be altered by adding a new theme (sp_theme table) and editing the CSS variables as desired

Create a page

an easy way to do this: go to Service Portal Configuration> page editor> select the 'index' page> click on the page box in the map> scroll down and click 'clone page'

locate the cloned page and then rename it and modify it to suit, and reference it in the portal (service portals> portal> the portal you just created)

branding a page

navigate to the page in designer and change for example the background color (replace $sp-homepage-bg with orange)

section.page {
background-color: orange;
}
section.page, main.body {
    padding-top: 0px !important;
}