Options
Hiding "null" fields in the configration item details dialog
Jakob_Gottlieb
Premier Partner IT Monkey ✭
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
0
Best Answers
-
Options
seth_coussens
Member Ninja IT Monkey ✭✭✭✭
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:
10 -
Optionsseth_coussens
Member Ninja IT Monkey ✭✭✭✭
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:
12 -
OptionsBen_Tey
Partner Adept IT Monkey ✭✭
//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
5
Answers
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: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?
It looks like this then:
it works like a charm! .. have a great day.
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.
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:
//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); }); }); }); });There are change of code in the portal for icon of assignee.
Rename the class from .open-modal to .info-icon
I added support for when the portal is in mobile / small window mode. Seems to work well on 8.1.1 and 7.x.