Hiding "null" fields in the configration item details dialog

Jakob_Gottlieb

Hello Everyone!

great to see this new community.

Currently I am trying to help out a customer by removing all the fields that are "null" value in the configuration item details dialog.

another solution could also be to change the null to an empty string, since their end users don't know what null is.

I tried to make some custom.js additions, but I am having a hard time getting it to work.

Does anyone have a good place to start (in the js code events etc) or even an example of how to do this?

thanks!

- Jakob

seth_coussens

Let me know if this answers your question in regards to users. You can use something similar for other modal types as well.

Basically, we are assigning a function to the click event on the 'i' next to user names in the user picker, so that when clicked for more information, we wait 250ms for the modal to populate and then we hide all the elements where the value is null.

//hide null values in user object info
app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
	formObj.boundReady(function () {
		$('.input-userpicker .open-modal').each(function (index){
			$(this).on('click', function (e) {
				console.log("Clicked for user information...");
				setTimeout(function (){
					$('#objectInfo tbody td').each(function(index){
						var ele = $(this);
						console.log("Hiding null elements...");
						var par = ele.parent('tr');
						if(ele.text() === 'null')
							par.hide();
					});
				}, 250);
			});
		});
	});
});

It would then look something like this:

seth_coussens

This is probably what you are looking for, it will only run the code on the Configuration Items page (designated by the GUID for the CI page in the URL) and will wait until the grid is fully loaded and then attach a click event to the entire grid. It will then hide on click. It appears to work for refreshes on the grid, and page changes.

//hide null values for configuration items
$(document).ready(function (){
   if(window.location.href.indexOf("03a1c11e-47f1-470c-b115-f34a1693de59") > -1){
      console.log("I'm on the CI Search Page!");
      setTimeout(function (){
         $('table.k-selectable').on('click', function(e){
            console.log("You clicked a cell!");
            setTimeout(function (){
               $('#objectInfo tbody td').each(function(index){
                  var ele = $(this);
                  console.log("Hiding null elements...");      
                  var par = ele.parent('tr');
                  if(ele.text() === 'null')
                     par.hide();
               });
            }, 250);
         });
      }, 1000);
   }
});

It looks like this then:

Ben_Tey

//hide null values in user object info
app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
	formObj.boundReady(function () {
		console.log("I'm on the Incident Page!");
		$('.input-userpicker .info-icon').each(function (index){
			$(this).on('click', function (e) {
				console.log("Clicked for user information...");
				setTimeout(function (){
					$('#objectInfo tbody td').each(function(index){
						var ele = $(this);
						console.log("Hiding null elements...");
						var par = ele.parent('tr');
						if(ele.text() === 'null')
							par.hide();
					});
				}, 250);
			});
		});
	});
});

Finally... found the solution to hide user object info in v7.x
There are change of code in the portal for icon of assignee.
Rename the class from .open-modal to .info-icon

seth_coussens

Let me know if this answers your question in regards to users. You can use something similar for other modal types as well.

Basically, we are assigning a function to the click event on the 'i' next to user names in the user picker, so that when clicked for more information, we wait 250ms for the modal to populate and then we hide all the elements where the value is null.

//hide null values in user object info
app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
	formObj.boundReady(function () {
		$('.input-userpicker .open-modal').each(function (index){
			$(this).on('click', function (e) {
				console.log("Clicked for user information...");
				setTimeout(function (){
					$('#objectInfo tbody td').each(function(index){
						var ele = $(this);
						console.log("Hiding null elements...");
						var par = ele.parent('tr');
						if(ele.text() === 'null')
							par.hide();
					});
				}, 250);
			});
		});
	});
});

It would then look something like this:

Jakob_Gottlieb

wow thanks for the fast result!.. it is not possible to do with All types at once? (will try it now)

Jakob_Gottlieb

not sure if this is the correct one .. I am looking for business services in CIs. I thought your example was for users in CI, Users is not a CI type?

This looks like it is for a Incident form user picker?

seth_coussens

Basically the code for hiding the values would work on that popup as well, you just have to figure out how to target the correct elements for the click event. You'd have to determine if there is a specific page you'd like to see this on. It get's trickier still as you'd want this in a grid view the way you are describing and while it would be pretty easy to get the first page, you'd have to have an event to catch a change to the next 20 items in the grid as those elements don't exist prior to the click event.

Jakob_Gottlieb

I do understand your code, but I am having a hard time figuring out where to find the form names, event names like open-modal etc.

Jakob_Gottlieb

ok thank you. Will try some more. I wish there was some kind of diagram of these events to make this easier. thanks a lot!

seth_coussens

This is probably what you are looking for, it will only run the code on the Configuration Items page (designated by the GUID for the CI page in the URL) and will wait until the grid is fully loaded and then attach a click event to the entire grid. It will then hide on click. It appears to work for refreshes on the grid, and page changes.

//hide null values for configuration items
$(document).ready(function (){
   if(window.location.href.indexOf("03a1c11e-47f1-470c-b115-f34a1693de59") > -1){
      console.log("I'm on the CI Search Page!");
      setTimeout(function (){
         $('table.k-selectable').on('click', function(e){
            console.log("You clicked a cell!");
            setTimeout(function (){
               $('#objectInfo tbody td').each(function(index){
                  var ele = $(this);
                  console.log("Hiding null elements...");      
                  var par = ele.parent('tr');
                  if(ele.text() === 'null')
                     par.hide();
               });
            }, 250);
         });
      }, 1000);
   }
});

It looks like this then:

Jakob_Gottlieb

wow amazing work! .. this will help me find the other stuff I need later!

it works like a charm! .. have a great day.

Ben_Tey

Excellent ! exactly what customer needed. I have it to hide specific field.

Leigh_Kilday

What if I wanted to retain my NULL values but show only specific fields? I want my analysts to know that certain fields have not been populated, but we are capable of displaying them.

I've also received requests to reorder these fields.

Leigh_Kilday

I figured out how to hide specific fields. The title of the field can be substituted for the 'null' value in the aforementioned example.

I'm still not sure about:

• Field ordering
• Replacing 'null' with something like 'Not Defined'
• Updating the User CI info popup on the RO form (Create Request on Behalf Of)

Leigh_Kilday

This no longer works in v7. Does anybody have a solution?

Ben_Tey

@seth_coussens can help to fix it ? This no longer works in v7.x

Ben_Tey

//hide null values in user object info
app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
	formObj.boundReady(function () {
		console.log("I'm on the Incident Page!");
		$('.input-userpicker .info-icon').each(function (index){
			$(this).on('click', function (e) {
				console.log("Clicked for user information...");
				setTimeout(function (){
					$('#objectInfo tbody td').each(function(index){
						var ele = $(this);
						console.log("Hiding null elements...");
						var par = ele.parent('tr');
						if(ele.text() === 'null')
							par.hide();
					});
				}, 250);
			});
		});
	});
});

Finally... found the solution to hide user object info in v7.x
There are change of code in the portal for icon of assignee.
Rename the class from .open-modal to .info-icon

Marc-Andre_Lafleur

Thanks everyone, this is great.

I added support for when the portal is in mobile / small window mode. Seems to work well on 8.1.1 and 7.x.

//hide null values in user object info<br>app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {<br>&nbsp;formObj.boundReady(function () {<br>&nbsp;&nbsp;$('.input-userpicker .info-icon').each(function (index){<br>&nbsp;&nbsp;&nbsp;$(this).on('click', function (e) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log("Clicked for user information...");<br>&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function (){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(app.isMobile()) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("Hiding null elements for mobile page...");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#objectInfo #info dl dd').each(function(index){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var infoItem = $(this)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(infoItem[0].innerText == "null"){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;infoItem.prev().hide();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;infoItem.hide();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("Hiding null elements for desktop page...");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#objectInfo tbody td').each(function(index){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ele = $(this);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var par = ele.parent('tr');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(ele.text() === 'null')<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;par.hide();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;}, 250);<br>&nbsp;&nbsp;&nbsp;});<br>&nbsp;&nbsp;});<br>&nbsp;});<br>});

Tom_Hendricks

I have not tried this yet, but I had to add a like just for the fact that you are addressing this!