Home Analyst Portal

Customizing incident.js and similar forms

Mikkel_MadsenMikkel_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>&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 ✭

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

Sign In or Register to comment.