Home› Analyst Portal

Customizing incident.js and similar forms

Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭
in Analyst Portal

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.

image.png


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 :)

image.png 


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>&nbsp;&nbsp;Business: <a href="tel:'+ viewModel.RequestedWorkItem.BusinessPhone + '">' + viewModel.RequestedWorkItem.BusinessPhone + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;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">&nbsp;<i class="fa fa-info"></i>&nbsp;&nbsp;&nbsp;Alternate: <a href="tel:'+ viewModel.ContactMethod + '">' + viewModel.ContactMethod + '</a>&nbsp;&nbsp;<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;">&nbsp;&nbsp;( To Notify affected user write: <span style="color: black;">@' + viewModel.RequestedWorkItem.DisplayName + ' </span>)</span>');
	});
});

Comments

  • Justin_WorkmanJustin_Workman Cireson Support Super IT Monkey ✭✭✭✭✭

    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!

  • Adam_DzyackyAdam_Dzyacky Product Owner Contributor Monkey ✭✭✭✭✭

    Nice one @Mikkel_Madsen !

  • Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭

    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">&nbsp;<i class="fa fa-info"></i>&nbsp;&nbsp;&nbsp;Alternate: <a href="tel:'+ viewModel.ContactMethod + '">' + viewModel.ContactMethod + '</a>&nbsp;&nbsp;<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>&nbsp;&nbsp;Business: <a href="tel:'+ bPhone + '">' + bPhone + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;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;">&nbsp;&nbsp;( To Notify affected user type: <span style="color: black;">@' + dName + ' </span>)</span>');
}
  • Nico_RedepenningNico_Redepenning Customer IT Monkey ✭

    @Mikkel_Madsen - How can i get the extraProps informations under the Affected User Text field?😀

  • Justin_WorkmanJustin_Workman Cireson Support Super IT Monkey ✭✭✭✭✭

    @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" },

  • Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭

    @Nico_Redepenning did you find out how to mange it? 🙂

  • Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭

    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">&nbsp;<i class="fa fa-info"></i>&nbsp;&nbsp;&nbsp;';
	
	// 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 += '&nbsp;&nbsp;<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>&nbsp;&nbsp;'
	
	//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 += '&nbsp;&nbsp;|&nbsp;&nbsp;'
			}
			
			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 += '&nbsp;&nbsp;|&nbsp;&nbsp;'
			}
			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;">&nbsp;&nbsp;( To Notify affected user type: <span style="color: black;">@' + dName + ' </span>)</span>');
}
  • Ryan_LarsenRyan_Larsen Member IT Monkey ✭

    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.

  • Justin_WorkmanJustin_Workman Cireson Support Super IT Monkey ✭✭✭✭✭

    @Ryan_Larsen - It would go into CustomSpace/custom.js.

  • Ryan_LarsenRyan_Larsen Member IT Monkey ✭
    https://community.cireson.com/discussion/comment/24327#Comment_24327

    Yep. Now that you mention it, that makes perfect sense. Thanks!

Sign In or Register to comment.