Angular Directives - Form (snRecordPicker / snChoiceList / spDatePicker)

[stel]

Hi

Me and my developer-mates have found some very usefull directives from ServiceNow, you can find them with this URL:

https://YOURINSTANCE.service-now.com/scripts/js_includes_sp.jsx

For example if you search for "snRecordPicker" you will find the whole directive.

So I created a quick demo form to show the functionality of snRecordPicker, snChoiceList and spDatePicker. The form will look like this:

And here is the code:

HTML Template

<div>   <form class="form-horizontal">       <div class="form-group">           <label>               <span style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.firstname != ''}"></span>               First name           </label>           <input type="text" class="form-control" placeholder="First name" ng-model="c.firstname">       </div>       <div class="form-group">           <label>               <span style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.lastname != ''}"></span>               Last name           </label>           <input type="text" class="form-control" placeholder="Last name" ng-model="c.lastname">       </div>       <div class="form-group">           <label>               <span style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.manager.value != ''}"></span>               Manager           </label>           <sn-record-picker field="c.manager" table="'sys_user'" display-field="'name'" display-fields="'email'" value-field="'sys_id'" search-fields="'name'" page-size="100" placeholder="Manager" default-query="'name=Stefan Lutz'"></sn-record-picker>       </div>       <div class="form-group">           <label>               <span style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.gender}"></span>               Gender           </label>           <sn-choice-list sn-model="c.gender" sn-options="c.genderchoicelistoption" sn-value-field="gendervalue" sn-text-field="genderdisplay" sn-items="c.genderchoice"></sn-choice-list>       </div>       <div class="form-group">           <label>               <span style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.entrydatemodel != ''}"></span>               Entry date           </label>           <sp-date-picker field="entrydate" sn-disabled="c.entrydatedisabled" ng-model="c.entrydatemodel" sn-change="" ></sp-date-picker>       </div>       <div class="form-group">           <label>               <span style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.exitdatemodel != ''}"></span>               Exit date           </label>           <sp-date-picker field="exitdate" sn-disabled="c.exitdatedisabled" ng-model="c.exitdatemodel" sn-change="c.exitdateChange()" Placeholder="Exit date"></sp-date-picker>       </div>   </form> </div>

Client Script

var c = this;   // Firstname / Lastname   c.firstname = "";   c.lastname = "";   // Gender   c.gender = "";   c.genderchoice = [{   genderdisplay: "Male",   gendervalue: 'M'   }, {   genderdisplay: 'Female',   gendervalue: 'F'   }];   c.genderchoicelistoption = {   hideSearch: true,   placeholder: "Gender"   };   // Manager   c.manager = {   displayValue: "",   value: "",   name: 'managerfield'   };   // Entry Date Settings   c.entrydatemodel = c.data.now;   c.entrydatedisabled = true;   c.entrydate = {   placeholder: "${Entry date}",   name: 'entrydate'   };   // Exit Date Settings   c.exitdatemodel = "";   c.exitdatedisabled = false;   c.exitdate = {   placeholder: "${Exit date}",   name: 'exitdate'   };

Server Script
var now = new GlideDateTime(); data.now = now.getDate().getDisplayValue();

Mandatory: If you want the field mandatory and not only look like, then you have to build a button and check the fields for valid values onClick.

Angular Providers:

You can create your own Directive in the "Angular Providers" Module of the Service Portal Application:

Now you have to add this to your widget:

And in your HTML you can use it with <my-own-record-picker></my-own-record-picker>. It sometimes makes it easier to understand what a directive does.

The whole include has a lot of stuff, so let the community know if you find more usefull directives

Kind Regards

Stefan

[mspeirs]

For anyone wondering how to make the spDatePicker include time, you need to add an attribute sn-include-time.

Example: <sp-date-picker field="entrydate" sn-disabled="c.entrydatedisabled" ng-model="c.entrydatemodel" sn-change="" sn-include-time="true"></sp-date-picker>

[shferoz1]

How to get new changed value from <sp-date-picker> directive??

[stel]

Hi

You have to use a model and in the client script you can use it. The model always has the current value:

HTML:

<sp-date-picker field="entrydateadd" sn-disabled="" ng-model="c.entrydatemodel" sn-change="" Placeholder="${Entry date}"></sp-date-picker>

Client Script:

c.entrydatemodel

[shferoz1]

When I do console.log(c.entrydatemodel), I get first default value which is empty. When ever I change the value it's not populating   new value in console log.

I am trying to broadcast new Value after verifying in console log, so that I can use it in my another widget.

Many thanks for your quick response and for all your support.