Custom Configuration Item Information

Matthew_Dowst

I'm trying to create a custom configuration item information popup, for when you click the "i" icon in an object picker, but I can't figure out what control to trigger it on. I'm using the code from the post Hiding "null" fields in the configration item details dialog as a template. However, it only works on user pickers and I'm trying to do this on an object picker. I'm trying to figure out what to change the line "$('.input-userpicker .info-icon').each(function (index){" to so that it would work on an object picker. 

Nicholas_Velich

Hi Matthew,

Breaking down the line: "$('.input-userpicker .info-icon').each(function (index){", we have the following:

1. $('.input-userpicker .info-icon')  <-- This is your JQuery selector, which uses similar rules/syntax as CSS selectors. A JQuery selector is finding items on an HTML page that match whatever criteria you specify between the single quotation marks. In this case, it is using the "." syntax, which is the selector for an HTML class. Additionally, it is using a space between the two classes, which indicates there is a descendant element. Long story short, this portion of the line saying "find me all instances of the 'info-icon' class that are within a 'input-userpicker' class element."
2. .each(function (index) <-- Since there might be several matching elements on a single page, this part is simply looping through each returned element. During each loop iteration, the "index" variable is used to represent one instance of the element.

For what you are looking to accomplish above, you will likely need to change the JQuery selector portion from (1). To figure out what selector to use, use the element inspector on your browser (Ctrl + Shift + C in Chrome) to examine the various HTML elements on the page. You will need to look for any combination of classes, unique IDs, attributes or other selectors to be able to uniquely identify elements you want to add the pop-up window logic to.

One other thing to note with JQuery selectors (and CSS as well) is that you need to be careful not to be too generic in your selectors, as you could end up making changes to unintended elements on the page. For example, in (1) above, the "info-icon" class alone would have been enough to do the job, but there is a higher likelihood that the info-icon is used on other parts of the page. Therefore, by only looking for info-icons that are within an element with the input-userpicker class, we are more focused with where the changes are applied.

Hopefully this helped!

Thanks,
Nick

Tom_Hendricks

Your code example is specifically targeting user pickers, as you mentioned.  This can be solved with JQuery, after you know a little more about where you will be clicking and what attributes those elements have.

(Single) Object Picker:
For whatever reason, the "i" icon next to objects is very different than the one next to users in the user picker, even though they appear to be identical.  If you use the browser dev tools (F12) and inspect the element, you will find that it is a <div> element, not an <i> element, as with the user picker.  Furthermore, the classes applied to it are less descriptive.  But since it is different, that will help you avoid interfering with the user pickers.

$('div[data-cid="objectpicker"] div.open-modal.fa-info-circle').on('click',myAwesomeFunc);<br><br>var myAwesomeFunc = function (e) {<br>    alert('Stuff just happened with the thing.');<br>};<br></code></pre><br>Unless you are extremely keen on celebrating the (very) little things, I assume you would want to replace the alert window in "myAwesomeFunc" with something a bit more useful, of course.<br><br><b>Multiple Object Picker:</b><br>This one could be trickier, since it it is usually part of a controller Cireson has created which is, at a very high level, a bunch of related controls grouped together, pre-defined and loaded with bindings to other code.&nbsp; I am writing this between meetings and do not have time to fully test this approach, but here are some facts and a suggestion to get us started.&nbsp; First, the icon for this type of control is an <i> element again, more similar to the user picker controls.&nbsp; HOWEVER, the icon does not have the click event in this case--its parent <div> does.&nbsp; (One of the few things I like about the Firefox dev tools better than Chrome is how it shows the event icon inline with the elements--a great time-saver!)<br><br>By default, that parent div is bound to the <b>view.relatedItemController.showMoreInfo</b> function on click (using the affected CI control for this example).&nbsp; You <i>should</i> be able to simply unbind this and bind your own function.&nbsp; That would look like this:<br><br><pre class="CodeBlock"><code>// Change the click event on multi-object pickers' info icon<br>// BE CAREFUL NOT TO AFFECT THE TRUE CONTROL CENTER INTEGRATION THAT IS BOUND TO A NEIGHBORING DIV ELEMENT!!!<br>// Also Note: This will probably not work on mobile device view -- adjustments needed for that<br>$('div.affecteditems-grid div[data-bind*="visible: view.relatedItemController.isMoreInfo"]').unbind('click');

$('div.affecteditems-grid div[data-bind*="visible: view.relatedItemController.isMoreInfo"]').bind('click',myAwesomeFunc);

var myAwesomeFunc = function (e) {
    alert('Stuff just happened with one of the things.');
};
// Change the click event on object pickers' info icon<br>$('div[data-cid="objectpicker"] div.open-modal.fa-info-circle').off('click');<br>

Again, this could use some tweaking probably, but hopefully this helps set you on the right path.  This is specific to the affected items grid.  Removing 'div.affecteditems-grid' from the beginning of the JQuery selector could help this apply to others such as related items, but I wanted to scope this to a single control to start with.

Nicholas_Velich

Hi Matthew,

Breaking down the line: "$('.input-userpicker .info-icon').each(function (index){", we have the following:

1. $('.input-userpicker .info-icon')  <-- This is your JQuery selector, which uses similar rules/syntax as CSS selectors. A JQuery selector is finding items on an HTML page that match whatever criteria you specify between the single quotation marks. In this case, it is using the "." syntax, which is the selector for an HTML class. Additionally, it is using a space between the two classes, which indicates there is a descendant element. Long story short, this portion of the line saying "find me all instances of the 'info-icon' class that are within a 'input-userpicker' class element."
2. .each(function (index) <-- Since there might be several matching elements on a single page, this part is simply looping through each returned element. During each loop iteration, the "index" variable is used to represent one instance of the element.

For what you are looking to accomplish above, you will likely need to change the JQuery selector portion from (1). To figure out what selector to use, use the element inspector on your browser (Ctrl + Shift + C in Chrome) to examine the various HTML elements on the page. You will need to look for any combination of classes, unique IDs, attributes or other selectors to be able to uniquely identify elements you want to add the pop-up window logic to.

One other thing to note with JQuery selectors (and CSS as well) is that you need to be careful not to be too generic in your selectors, as you could end up making changes to unintended elements on the page. For example, in (1) above, the "info-icon" class alone would have been enough to do the job, but there is a higher likelihood that the info-icon is used on other parts of the page. Therefore, by only looking for info-icons that are within an element with the input-userpicker class, we are more focused with where the changes are applied.

Hopefully this helped!

Thanks,
Nick

Tom_Hendricks

Your code example is specifically targeting user pickers, as you mentioned.  This can be solved with JQuery, after you know a little more about where you will be clicking and what attributes those elements have.

(Single) Object Picker:
For whatever reason, the "i" icon next to objects is very different than the one next to users in the user picker, even though they appear to be identical.  If you use the browser dev tools (F12) and inspect the element, you will find that it is a <div> element, not an <i> element, as with the user picker.  Furthermore, the classes applied to it are less descriptive.  But since it is different, that will help you avoid interfering with the user pickers.

$('div[data-cid="objectpicker"] div.open-modal.fa-info-circle').on('click',myAwesomeFunc);<br><br>var myAwesomeFunc = function (e) {<br>    alert('Stuff just happened with the thing.');<br>};<br></code></pre><br>Unless you are extremely keen on celebrating the (very) little things, I assume you would want to replace the alert window in "myAwesomeFunc" with something a bit more useful, of course.<br><br><b>Multiple Object Picker:</b><br>This one could be trickier, since it it is usually part of a controller Cireson has created which is, at a very high level, a bunch of related controls grouped together, pre-defined and loaded with bindings to other code.&nbsp; I am writing this between meetings and do not have time to fully test this approach, but here are some facts and a suggestion to get us started.&nbsp; First, the icon for this type of control is an <i> element again, more similar to the user picker controls.&nbsp; HOWEVER, the icon does not have the click event in this case--its parent <div> does.&nbsp; (One of the few things I like about the Firefox dev tools better than Chrome is how it shows the event icon inline with the elements--a great time-saver!)<br><br>By default, that parent div is bound to the <b>view.relatedItemController.showMoreInfo</b> function on click (using the affected CI control for this example).&nbsp; You <i>should</i> be able to simply unbind this and bind your own function.&nbsp; That would look like this:<br><br><pre class="CodeBlock"><code>// Change the click event on multi-object pickers' info icon<br>// BE CAREFUL NOT TO AFFECT THE TRUE CONTROL CENTER INTEGRATION THAT IS BOUND TO A NEIGHBORING DIV ELEMENT!!!<br>// Also Note: This will probably not work on mobile device view -- adjustments needed for that<br>$('div.affecteditems-grid div[data-bind*="visible: view.relatedItemController.isMoreInfo"]').unbind('click');

$('div.affecteditems-grid div[data-bind*="visible: view.relatedItemController.isMoreInfo"]').bind('click',myAwesomeFunc);

var myAwesomeFunc = function (e) {
    alert('Stuff just happened with one of the things.');
};
// Change the click event on object pickers' info icon<br>$('div[data-cid="objectpicker"] div.open-modal.fa-info-circle').off('click');<br>

Again, this could use some tweaking probably, but hopefully this helps set you on the right path.  This is specific to the affected items grid.  Removing 'div.affecteditems-grid' from the beginning of the JQuery selector could help this apply to others such as related items, but I wanted to scope this to a single control to start with.