Cireson Partners, Customers and Community members share your customizations and examples here to help benefit the community as a whole to earn Kudos and badges.

DISCLAIMER

All files and projects located here are provided and come "as-is" and without any warranty or support. Use at your own risk. Your use of Community Uploads is subject to our Terms of Use.

Cireson does not and will not support or maintain these enhancements, extensions, and scripts.

For Team Cireson uploads click here.

Service Catalog Layout Option based on Service Offering

Ernest_FaccioliniErnest_Facciolini Customer IT Monkey ✭
edited May 2 in Community Uploads
(Re post from discussion here)

I created a working proof of concept for just this type of functionality. To implement, just place the following code in your custom.js file. You will need to update the guid of your home page view, as indicated in the script, and then place a .png named with the guid of each of your service offerings in the "C:\Inetpub\ciresonportal\Images" folder. You can easily discover the guid of your service offerings in the Service Manager Console, or by using the developer tools to view the data-service attribute of the <div> for each service offering. I also have an alternative version which reads the base64 image data that is attached to  the Service Offering in the SCSM Console, which is below the first example.

Note that in the code we are using some Timeouts to wait for specific elements to become available, as we are not modifying any existing code to raise additional events.

Code: (sorry about formatting, it looks great in edit view!)
 
$(function(){
var pageURL = window.location.href
if (pageURL.indexOf('94ecd540-714b-49dc-82d1-0b34bf11888f') > 0) //put your home page view guid here
{
runServiceCatalogCustomization();
}
});

function runServiceCatalogCustomization(){

if($('#servicecat-content').length > 0) {
SetServiceOfferingImages();
}else {
setTimeout(runServiceCatalogCustomization, 50);
}
}


function SetServiceOfferingImages() {

if ( $("div.so-blocks").length > 0) {
$("div.so-blocks").each(function() {
var sccServiceID = $(this).attr('data-service')
$(this).empty();
$(this).prepend('<img src="/Images/' + sccServiceID + '.png" />');
$(this).click(function() {
$("span.link[data-service=" + sccServiceID + "]").click();
});

})
$('#servicecat-content').one("DOMSubtreeModified",function(){
SetServiceOfferingImages();
});
} else {
setTimeout(SetServiceOfferingImages, 50);
}
}

Alternate version, which uses the icon attached to the service offering:

$(function(){
var pageURL = window.location.href
if (pageURL.indexOf('94ecd540-714b-49dc-82d1-0b34bf11888f') > 0)
{
runServiceCatalogCustomization();
}
});

function runServiceCatalogCustomization(){

if($('#servicecat-content').length > 0) {
SetServiceOfferingImages();
}else {
setTimeout(runServiceCatalogCustomization, 50);
}
}


function SetServiceOfferingImages() {
if ( $("div.so-blocks").length > 0) {

$.ajax({
url: "/ServiceCatalog/GetServiceCatalog",
type: "POST",
dataType: "json",
data: "{}",
contentType: "application/json; charset=utf-8",
        success: function (data) {
$.each(data.Data, function(index, value) {
$("div.so-blocks[data-service=" + data.Data[index].ServiceOfferingId + "]").empty();
$("div.so-blocks[data-service=" + data.Data[index].ServiceOfferingId + "]").prepend('<img src="data:image/png;base64,' + data.Data[index].ServiceImage64 + '" />');
$("div.so-blocks[data-service=" + data.Data[index].ServiceOfferingId + "]").click(function() {
$("span.link[data-service=" + $(this).attr('data-service') + "]").click();
});

})
$('#servicecat-content').one("DOMSubtreeModified",function(){
SetServiceOfferingImages();
});
},
error: function (e) {
alert(JSON.stringify(e));
}
});
} else {
setTimeout(SetServiceOfferingImages, 50);
}
}

Comments

Sign In or Register to comment.