Add a Carousel Widget to Catalog Item for Product Images

[Avery Brown]

I'm trying to add the Carousel Widget to a Catalog Item, as a widget variable to display multiple photos on the catalog item. 

After cloning the widget, there is a function that I'm trying to replicate outside of the SP to pull in the images that I believe will unlock the answer to this problem. 

$sp.getRelatedList('sp_carousel_slide','carousel');

I understand what it's doing just not the values it's returning, so that I can replicate it via glide record. Does anyone have any info?

[Saurav11]

Hello,

If you are cloning the OOB widget please check the below article:-

https://community.servicenow.com/community?id=community_question&sys_id=6259a3bd1b714850fff162c4bd4bcbca

Please mark answer correct/helpful based on Impact

[Avery Brown]

Yeah I've seen that article, but the person did not answer my question. I am not using the Catalog Item widget. I want to leave that Widget Alone. I want to create a widget that mirrors the functionality of the Carousel Widget, and then insert that as a Variable Using a Custom Variable (Previously Macro With Label)

I've got the carousel displaying now on the item, however it's not pulling my images. Can anyone see anything in the screenshot below I may be doing wrong?

[shloke04]

Hi @Avery Brown 

Server side of your widget is incorrect. Reason being, you need to store that as a JSON object and then utilize it in your HTML portion of the script.

Please modify your Server script as below:

Server:

data.slide = getSlideDetails();
	
	function getSlideDetails(){
		var slideDetails = [];
		var gr = new GlideRecord('sp_carousel_slide');
		gr.addQuery('carousel','Enter the sys id of Carousel here');
		gr.query();
		if(gr.next()){
			var obj = {};
			obj.Name = gr.name.toString();
			obj.URL = gr.url.toString();
			obj.Background = gr.background.toString();
			slideDetails.push(obj);
	}
		return slideDetails;
	}

Now you also need to modify the HTML portion of your code as well as shown below:

HTML:

 <uib-slide ng-repeat="slides in data.slide">
<div class="container">
<a href="{{::slides.URL}}" title = "${Open Carousel item}:{{::slides.Name}}">

So basically you need to use the JSON object Name in HTML portion of code for example

for name-->Use Name as defined in server "{{::slides.Name}}"

For background in HTML use {{::slides.Background}}

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

[Aniko Hegedus]

Hi,

Thanks so much for this code snippet, it has been really helpful for me.
Although I there is one tiny mistake in it: 

obj.Background = gr.background.toString();

should be 

obj.background = gr.background.toString() + ".iix";

Otherwise it works very well.

In fact I got inspired by your code and was manage to meet my requirement to display carousel images on the basis of a condition. I wrote a quick summary about it here.

Thanks much for the help,
Aniko