Alternate Service Catalog Layout Option based on Service Offering

Jais_Hyltoft

Is it possible to have an Alternate Service Catalog Layout Option where you only see one big icon for each category (Service Offering). And that icon directs you to all the Request (Request offerings) in that category? User gets confused when there is too many Service Request icons on the front Home page.

Justin_Clarke

Definately would be great to have this. One of our developers posted the below when trying to get this going with no luck.
https://community.cireson.com/discussion/679/displaying-service-offering-image#latest

Joe_Burrows

Hi Jais 
It is possible and have seen custom stuff built by our services team as Brett mentions in https://community.cireson.com/discussion/679 

Is this a feature request? If so ill convert to an "idea" so the voting options appear.

Jais_Hyltoft

Hi Joe

Yes, please convert to an "idea" :-)

Joe_Burrows

Done and up voted

Sean_Terry

This would be a good option for us as well.

MaryT

I agree - it would be a good option for us

Dieter_Saerens

Any update about this from Cireson?

Ernest_Facciolini

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);

}

}

Tom_Hendricks

This is a significant improvement on that catalog layout, @Ernest_Facciolini.  My personal favorite is the alternate version that loads the SO image but there is a great case to be made for both.  This should really be featured in the Community Uploads section of this site, IMO.

Joe_Burrows

Agree looks great - have posted here: https://community.cireson.com/discussion/3884 

Tom_Hendricks

The 8.6.2 portal update appears to have broken the second version. 

the ServiceImage64 property is now null for all Service Offering images when using the /ServiceCatalog/GetServiceCatalog API, so all the images just get the broken picture treatment.

Gerhard_Goossens

Yeah, I reported it on 21 June.

https://support.cireson.com/Problem/Edit/PR75784/

I applied the suggested fix and it resolved the issue.