Geek Speak
I am sure that those who read this blog title, will know instantly that this is pure "Geek Speak". But if you can appreciate this title, you will probably like this example.
Use Case:
I had a scenario recently where someone wanted to maintain user records for each of their external clients that call in. They however did not have a definitive list of who all of those people were. So we had to utilize a "populate as you go" type methodology. When a person called in, if they are not in the system, a user account would be created and associated with the record quickly, and without leaving the form. Reference fields, like the "Caller" field have a lookup popup that could allow me to click the "New" button and create a user record. However I wanted to customize a specific view for these type of users.
In Service-Now there are many different types of popups that you can utilize on your form. The one that I decided to use is called a "GlideDialogForm". This is a popup that loads a form, in my case a user form. You can specify a specific view to display, which makes it very nice for customization purposes. I saw on some forums how you can pass values INTO the popup form, but I needed to RETURN the record created to my original form and populate the field, again without leaving the form. Thus my conundrum.
I saw a handful of forum posts like...
How do I create (Ajax Style ??) Pop-up's
This one explains how to pass values INTO the popup form.
Pass values when calling a GlideDialogForm with a UI Action
And one on Servicenowguru.com explaining a concept of "QuickForms". There are so many different applications for this technique.
http://www.servicenowguru.com/system-ui/glidedialogwindow-quickforms/
But again, how to return the newly created record to my current form without leaving or refreshing the form.
Method - Here is how I did it.
I found that the "GlideDialogForm" has a callback capability. As in this example of create a new GlideDialogForm object, you would normally put in the window title and table as parameters, but you can thirdly add in a callback function.
var dialog = new GlideDialogForm('User Management', 'sys_user', dothis);
By default this callback function will contain, as standard returned parameters....
callbackFunc(action_verb, sys_id, table, displayValue).
This made it perfect for me. The callback included the sys_id of the newly created record which I could then insert into the caller field. Seamless method to accomplish my goal.
Results - here is how it looks and the code used.
I created an icon next to the caller field that would display if this field is not populated via a client script (see it below). This icon would then popup a dialog window with the user creation form with the view I wanted.
Here is what the caller field with the icon looks like.
Here is what the popup would look like. This screenshot does not display the view that I had created, but you can get the idea. Create whatever view on the user form to display in here.
Once you submit the form, it then populates the caller field like so.
To bring this all together, create an onLoad client script with the following code.
I also added in a variable "edit" which if true, this same icon will appear even if the field is populated. The popup will open the user record to make any edits you desire.
function onLoad() {
var field = 'caller_id';
var table = g_form.getTableName();
var edit = 'false'; //If true, the icon will appear if the field is populated so you can edit the selected user account.
var lookupfield = 'lookup.' + table + '.' + field;
var usericon = $(lookupfield);
var fieldvalue = g_form.getValue(field);
var fieldid = -1;
if (usericon){
if (edit == 'true'){
if (fieldvalue != ''){
fieldid = fieldvalue;
}
usericon.insert({
after:'<a id="AddUserPopup"><img width="16" height="16" border="0" src="images/icons/user_licensed.gif" title="Add User Popup"></a>'});
var userpop = $('AddUserPopup');
userpop.observe('click', function() { userPopup(fieldid); });
}
else {
if (fieldvalue == ''){
usericon.insert({
after:'<a id="AddUserPopup"><img width="16" height="16" border="0" src="images/icons/user_licensed.gif" title="Add User Popup"></a>'});
var userpop = $('AddUserPopup');
userpop.observe('click', function() { userPopup(fieldid); });
}
}
}
}
function userPopup(fieldid) {
var dialog = new GlideDialogForm('User Management', 'sys_user', dothis);
dialog.setTitle("User Management");
dialog.setSysID(fieldid); //pass in sys_id to edit existing record
dialog.addParm('sysparm_view', 'default'); //Specify a view you have created
dialog.addParm('sysparm_form_only', 'true');
dialog.render();
}
//this is my callback function. All I am doing is taking the sys_id and using the setValue to place it in the caller_id field.
function dothis(action, sys_id, table, displayValue) {
g_form.setValue('caller_id', sys_id);
}
Enjoy!
<script></script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22945975-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
4 Comments
