Custom Popup Record Look-up Widget

patricklatella · ‎06-29-2020

Hi Friends!

Wanted to share a widget I created that can be used on catalog items to enable the user to look up specific information on a record from the Service Portal. I developed this to be used as an embedded widget on a catalog item...when attached to a "Macro" variable, a button is displayed on the catalog item; clicking the button opens the popup. In my simple example below the widget is used to look up the selected company's record, see if the "Manufacturer" field is True/False, and display the answer to the user. This is a single, simple example; by changing the table, query, and text this widget can be re-purposed for a multitude of uses. I've entered in some comments to help you see how the HTML, Client and Server scripts talk to each other.

There are other many cool things that can be done with this, and this may not be perfect...but this provides a good starting point...enjoy!

(reference: I got the nuts and bolts for the <sn-record-picker> part of the widget from a great post by my friend Nathan Firth at NewRocket) @nathanfirth

Widget looks like this on the catalog item...the small text is your variable "Question" text, and you can change the button to say whatever you like.

Then when you click the button, you get the popup modal.

Here's the script:

HTML:

<div>
<button class="btn btn-primary" ng-click="c.openTheModal()">${Show Popup}</button>
</div>

<div class="form-group">
<label>Select a Company</label>
<sn-record-picker field="data.company"
table="'core_company'"
display-field="'name'"
display-fields="'name'"
value-field="'sys_id'" search-fields="'name'"
page-size="100"
default-query="'whatever query string you want goes here'">
</sn-record-picker>
</div>

<div>

<div ng-if="data.showYes">
<h2>${The selected company is a manufacturer}
</h2>
</div>

<div ng-if="data.showNo">
<h2>${The selected company is not a manufacturer}
</h2>
</div>

<div ng-if="data.noCompany">
<h2>${Please select a company}
</h2>
</div>
</div>
</div>
</div>
</script>

Client script:

function($scope, spUtil, $window, $uibModal) {

var c = this;

c.data.noCompany = false;//tells the HTML to not show that div block

//popup modal
c.openTheModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate2',//this needs to be a unique value, and match the HTML
scope: $scope
});
}

c.closeModal = function() {
c.data.noCompany = false;//tells the HTML to not show that div block
c.data.showYes = false;//tells the HTML to not show that div block
c.data.showNo = false;//tells the HTML to not show that div block
c.data.company.displayValue='';//clears
c.data.company.value='';
c.modalInstance.close();
}
//end popup modal

c.data.company = {value:'',displayValue:''};

c.refresh = function(){
c.data.showYes = false;//tells the HTML to not show that div block
c.data.showNo = false;//tells the HTML to not show that div block
c.data.noCompany = false;//tells the HTML to not show that div block
c.data.company.displayValue='';
c.data.company.value='';
}

c.checkRecords = function(){
if(c.data.company.value == ''){
c.data.noCompany = true;//tells the HTML to show that div block
}
else{
c.server.update().then(function(response){
c.data.noCompany = false;//tells the HTML to not show that div block
})}
}
}

Server Script:

(function() {
if(!input)
return;

data.showYes = false;//tells the HTML script to not show that div block
data.showNo = false;//tell the HTML script to not show that div block

//look up the company to see something about that company
//this example is looking if "Manufacturer" field is true
var companySysId = input.company.value;

var company = new GlideRecord('core_company');
company.addQuery('sys_id', companySysId);
company.query();

if(company.next()){
if(company.manufacturer == true){
data.showYes = true;//tells the HTML script to show that div block
}
else{
data.showNo = true;//tells the HTML script to show that div block
}
}
})();