Home› Community Uploads
image

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 2018 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

  • Justin_WorkmanJustin_Workman Cireson Support Super IT Monkey ✭✭✭✭✭
    Very cool!  Works great in my lab!  Thanks @Ernest_Facciolini for this contribution!
  • Adam_DzyackyAdam_Dzyacky Product Owner Contributor Monkey ✭✭✭✭✭
    Great modification!
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Based on the tip shared by @Martin_Blomgren in this post, the alternate version of this (get icons from SO) can further optimized, is no longer broken by versions 8.6.2+, and no workarounds are necessary:
    $(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() {
    $('body').addClass('catOffering');
    var offeringImageBlock = $("div.so-blocks");
    if (offeringImageBlock.length > 0) {
        $.each(offeringImageBlock, function (index, value) {
            var soId = $(this).attr('data-service');
            $(this).empty();
            $(this).prepend('<img src="/ServiceCatalog/GetServiceOfferingImg/' + soId + '" />');
            $(this).click(function () {
                $('span.link[data-service="' + soId + '"]').click();
            });
        });
        $('#servicecat-content').one("DOMSubtreeModified", function () {
            SetServiceOfferingImages();
        });
    } else {
        setTimeout(SetServiceOfferingImages, 50);
    }
}
  • Ben_GillionBen_Gillion Customer IT Monkey ✭
    Thank you to everyone who contributed to this thread. Extremely useful.  :)
  • Steffen_DobritzSteffen_Dobritz Member IT Monkey ✭
    edited March 2020

    2 issues came up when I tried this solution. First IE11 interrupts and second if I clicked breadcrumb or sidebarmenu, the SO icons were replaced again with the RO icons. Thats why I changed it to:


    [code]

    $( document ).ready(function() {

       SetServiceOfferingImages();

       waitForEl("#service-catalog",function(){      

          $("#service-catalog").on("click", SetServiceOfferingImages);

       });

    });



    var waitForEl = function(selector, callback) {

     if (jQuery(selector).length) {

       callback();

     } else {

       setTimeout(function() {

         waitForEl(selector, callback);

       }, 100);

     }

    };



    function SetServiceOfferingImages(){

       waitForEl("div.so-blocks",function(){

          var offeringImageBlock = $("div.so-blocks");

          if (offeringImageBlock.length > 0) {


             $.each(offeringImageBlock, function (index, value) {

                var soId = $(this).attr('data-service');

                $(this).empty();

                $(this).prepend('<img src="/ServiceCatalog/GetServiceOfferingImg/' + soId + '" style="width:154px;height:125px !important;"/>');

                $(this).click(function () {

                   $('span.link[data-service="' + soId + '"]').click();   

                });

             });

          }

       });

    }

    [/code]

Sign In or Register to comment.