Customizing incident.js and similar forms
Mikkel_Madsen
Customer Advanced IT Monkey ✭✭✭
Just wanted to share a simple customization as inspiration :)
I wanted the contact phone numbers of the affected user to be visible and clickable at the main form.
When using @mention to notify people I always forget the username and have to scroll up the form so I added a litle helping text above the actionlog comment field :)
app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
formObj.boundReady(function () {
//Get Alternate Contact Method input element
var contactObject = $('input[name="ContactMethod"]');
//Hide input field
contactObject.css("display", "none");
//Insert Business phone and private phone as clickable links
contactObject.before('<span id="ContactPhone" class="help-block"><i class="fa fa-phone"></i> Business: <a href="tel:'+ viewModel.RequestedWorkItem.BusinessPhone + '">' + viewModel.RequestedWorkItem.BusinessPhone + '</a> | Private: <a href="tel:'+ viewModel.RequestedWorkItem.HomePhone + '">' + viewModel.RequestedWorkItem.HomePhone + '</a></span>');
//Insert Alternate contact method line and edit icon
contactObject.before('<span id="AlternateContact" class="help-block"> <i class="fa fa-info"></i> Alternate: <a href="tel:'+ viewModel.ContactMethod + '">' + viewModel.ContactMethod + '</a> <i id="EditAlternateContact" class="fa fa-edit cursor-pointer" title="Edit Alternate Contact Method"></i></span>');
//If edit icon is clicked -> show input field
$('#EditAlternateContact').click(function(){
contactObject.css("display", "inline");
$('#AlternateContact').css("display", "none");
});
//Add @mention help text with affected display name
$('label[for="commentBoxEditor"]').append('<span class="help-block" style="font-weight: 100;display: inline;"> ( To Notify affected user write: <span style="color: black;">@' + viewModel.RequestedWorkItem.DisplayName + ' </span>)</span>');
});
});
2
Comments
Good stuff @Mikkel_Madsen! I really like the Affected User being visible down by the comments. I can definitely relate to needing that information down there!
Nice one @Mikkel_Madsen !
The simple can't be simple for a very long time - just had to make it a bit more advanced 🤣
Added a listener so the phonenumbers and @mention text gets updated when affected user is changed
app.custom.formTasks.add('Incident', null, function (formObj, viewModel) { formObj.boundReady(function () { //Get Alternate Contact Method input element var contactObject = $('input[name="ContactMethod"]'); //Hide input field contactObject.css("display", "none"); //Insert Alternate contact method line and edit icon contactObject.before('<span id="AlternateContact" class="help-block"> <i class="fa fa-info"></i> Alternate: <a href="tel:'+ viewModel.ContactMethod + '">' + viewModel.ContactMethod + '</a> <i id="EditAlternateContact" class="fa fa-edit cursor-pointer" title="Edit Alternate Contact Method"></i></span>'); //If edit icon is clicked -> show input field $('#EditAlternateContact').click(function(){ contactObject.css("display", "inline"); $('#AlternateContact').css("display", "none"); }); //Insert business and home phone numbers setPhoneNumbers(viewModel.RequestedWorkItem.BusinessPhone, viewModel.RequestedWorkItem.HomePhone); //Insert @mention help text setAtMentionText(viewModel.RequestedWorkItem.DisplayName); }); //Adds listener to affected user object so when changed we update the phone numbers and @mention help text formObj.boundChange("RequestedWorkItem.BaseId",function (){ //User id of the new affected user baseId = viewModel.RequestedWorkItem.BaseId; //Get related user info of the new affected user $.ajax({ url: "/api/V3/User/GetUserRelatedInfoByUserId", data: {userId: baseId}, type: "GET", success: function (data) { //convert the json output to array var d = JSON.parse(data); //update phone numbers setPhoneNumbers(d.BusinessPhone, d.HomePhone); //update @mention help text setAtMentionText(d.DisplayName); } }); }); }); //Insert Business phone and private phone as clickable links function setPhoneNumbers(bPhone, hPhone){ //Destroys old phone object $('#ContactPhone').detach(); //Sets contact phone numbers $('#AlternateContact').before('<span id="ContactPhone" class="help-block"><i class="fa fa-phone"></i> Business: <a href="tel:'+ bPhone + '">' + bPhone + '</a> | Private: <a href="tel:'+ hPhone + '">' + hPhone + '</a></span>'); } //Add @mention help text with affected display name at comment section function setAtMentionText(dName){ //Destroys old help object $('#commentHelp').detach(); //Sets @mention help text $('label[for="commentBoxEditor"]').append('<span id="commentHelp" class="help-block" style="font-weight: 100;display: inline;"> ( To Notify affected user type: <span style="color: black;">@' + dName + ' </span>)</span>'); }@Mikkel_Madsen - How can i get the extraProps informations under the Affected User Text field?😀
@Nico_Redepenning - you can set the ExtraProps property on the field in the form definition(ie Incident.js). It looks like this:
{ DataType: "UserPicker", PropertyDisplayName: "AffectedUser", PropertyName: "RequestedWorkItem", Required: false, ExtraProps: "EmployeeId" },
@Nico_Redepenning did you find out how to mange it? 🙂
Added mobile phone to the contacts and only publish numbers if they exist.
app.custom.formTasks.add('Incident', null, function (formObj, viewModel) { formObj.boundReady(function () { //Get Alternate Contact Method input element var contactObject = $('input[name="ContactMethod"]'); //Hide input field contactObject.css("display", "none"); //Insert Alternate contact method line and edit icon contactObject.before(BuildAlternateContact(viewModel.ContactMethod)); //If edit icon is clicked -> show input field $('#EditAlternateContact').click(function(){ contactObject.css("display", "inline"); $('#AlternateContact').css("display", "none"); }); //Insert business, home phone and mobile numbers SetPhoneNumbers(viewModel.RequestedWorkItem.BusinessPhone, viewModel.RequestedWorkItem.HomePhone, viewModel.RequestedWorkItem.Mobile); //Insert @mention help text SetAtMentionText(viewModel.RequestedWorkItem.DisplayName); }); //Adds listener to affected user object so when changed we update the phone numbers and @mention help text formObj.boundChange("RequestedWorkItem.BaseId",function (){ //User id of the new affected user baseId = viewModel.RequestedWorkItem.BaseId; //Get related user info of the new affected user $.ajax({ url: "/api/V3/User/GetUserRelatedInfoByUserId", data: {userId: baseId}, type: "GET", success: function (data) { //convert the json output to array var d = JSON.parse(data); //update phone numbers SetPhoneNumbers(d.BusinessPhone, d.HomePhone, d.Mobile); //update @mention help text SetAtMentionText(d.DisplayName); } }); }); }); //Function to build the alternate contact string - returns the string function BuildAlternateContact(aContact) { // variable to hold the string we want to return at the end altString = '<span id="AlternateContact" class="help-block"> <i class="fa fa-info"></i> '; // If no alternate contact added if (aContact == null || aContact == '') { altString += 'Klik for at tilføje'; } // IF alternate contact add - make it a clickable telephone link else { altString += '<a href="tel:'+ aContact + '">' + aContact + '</a>'; } // Add en edit icon at the end of the string altString += ' <i id="EditAlternateContact" class="fa fa-edit cursor-pointer" title="Edit Alternate Contact Method"></i></span>'; //Return the builded string return altString; } //Insert Business phone and private phone as clickable links function SetPhoneNumbers(bPhone, hPhone, mPhone){ //Destroys old phone object $('#ContactPhone').detach(); // variable to hold the phonestring to add at the end phoneStr = '<span id="ContactPhone" class="help-block"><i class="fa fa-phone"></i> ' //If affected user has no phones in profile - write that as text if ((bPhone == null || bPhone == '') && (hPhone == null || hPhone == '') && (mPhone == null || mPhone == '')) { phoneStr += 'Ingen numre registreret' } // If one or more phone numbers in profile else { //if business phone in profile if(!(bPhone == null || bPhone == '')) { //Add business phone numbers as clickable link phoneStr += 'Business: <a href="tel:'+ bPhone + '">' + bPhone + '</a>'; } //if private phone in profile if(!(hPhone == null || hPhone == '')) { //If business in profile - add spacers before adding private number if(!(bPhone == null || bPhone == '')) { phoneStr += ' | ' } phoneStr += 'Private: <a href="tel:'+ hPhone + '">' + hPhone + '</a>'; } //If mobile phone in profile if(!(mPhone == null || mPhone == '')) { //If business or private phone in profile - add spacers before adding private number if((!(bPhone == null || bPhone == '')) || (!(bPhone == null || bPhone == ''))) { phoneStr += ' | ' } phoneStr += 'Mobile: <a href="tel:'+ mPhone + '">' + mPhone + '</a>'; } } phoneStr += '</span>'; //Sets contact phone numbers $('#AlternateContact').before(phoneStr); } //Add @mention help text with affected display name at comment section function SetAtMentionText(dName){ //Destroys old help object $('#commentHelp').detach(); //Sets @mention help text $('label[for="commentBoxEditor"]').append('<span id="commentHelp" class="help-block" style="font-weight: 100;display: inline;"> ( To Notify affected user type: <span style="color: black;">@' + dName + ' </span>)</span>'); }Hello everyone,
I am new to altering javascript, but this is exactly what I am looking for. Where would I paste the above code into incident.[js] to make this work in our tickets?
Thanks in advance.
@Ryan_Larsen - It would go into CustomSpace/custom.js.
Yep. Now that you mention it, that makes perfect sense. Thanks!