This post we’ll go through how to add a new custom icon, next to the lock, compound, … icons.
This is not something that can be done with configuration in ICN. It needs some customization which is near hacking but that will give us what we want.
First step, if you are intending to display an icon based on a custom property, you will have to, either add the property as an icon so it gets fetched, or customize ICN to fetch it, this is explain here.
When this is done, you can proceed to the customization of the client to use the property and display the icon. This is a 2 step process.
- Aspect the factory of IconValue which is the multiStateIcon method of the class ecm.widget.listview.decorators.common to add your icon when toString is called on the returned object
- Aspect the createResultSet method of the class ecm.model.ContentItem to increase the size of the first column of the Content list view
First will result in this customization, here I’m using an existing class (ecmRecordIcon) since we are not using it, but you can add some css code in the css of your plugin and use your own icon of course:
// No need to use .prototype on common since it's already a Singleton, no instance are create with new
aspect.after(common, "multiStateIcon", function (result) {
aspect.after(result, "toString", function (resToString) {
if (this.item && this.item.attributes.MultiFiledIn) {
resToString += '<img class="ecmStatusIcon ecmRecordIcon" alt="Multi Filed In Document" title="Multi Filed In Document" src="' + this._blankGif + '" />';
resToString += '<div class="dijitHidden">Multi Filed In Document</div>';
}
return resToString;
});
return result;
});
The second will look like this:
// ContentItem.createResultSet is a static method from ContentItem, no need to aspect the prototype
aspect.after(ContentItem, "createResultSet", function (result) {
if (result && result.structure && result.structure.cells && result.structure.cells.length > 0) {
var s = result.structure.cells[0][0];
s.width = "71px"; // 71 is good for one new icon, add 16 per icon
s.widthWebKit = "71px"; // You can also reuse te value and just add 16px to make it more flexible and cleaner
}
return result;
});
And this is it. This way the IconValue will add your icon when its toString is called, and the resultSet will add some extra space to make sure it is still displayed on one line.