Adding thumbnail images to List widget items

Sat Feb 18, 2012 3:07 pm

Please can someone advise whether it is currently possible to add thumbnail images to List widget items?

Sat Feb 18, 2012 10:37 pm

Just place the image component inside the list. You can also place grid there first - to help you with layout.

Thu Jul 05, 2012 9:48 pm

Hello,
Does this still work? My console.log output shows a userId after each img[src] value. As you can see the last userId=dfb6ae4a068a479bad01a083012590fa is being set for each image src. I thought this used to work maybe 2 weeks ago. But now it does not.

Am I doing something wrong or is this a possible bug????
Thanks.

My Javascript below is executing as part of a restful binding (Array -- ListItem) at pageload event.

--------------------------------------------------------------------------------------------------------

var userId = value;
var img = $("[dsid='imgConnectionPicture']");
var apiurl = localStorage.getItem("SgiOpenApi");
var imagesrc = apiurl+"/pictures/"+userId+"?thumbnail=true"
img.attr('src',imagesrc);
console.log(Tiggr('imgConnectionPicture'));
console.log("userId = " + userId);

The element id= id="j_20" is really id="j_20_0", - id="j_20_x" when inspecting each element in debugger. The console output only shows id="j_20". THerefore each element of list is being set the same when each userId is different.

I am also binding some text to a label during the same event and the text is working fine. Just the image src is incorrect.

Console.Log output from Javascript above.

----------------------------------------------------------

[
img class="\"mobileimage1" name="\"imgConnectionPicture"
]
userId = 2ec8fef299fb48e0815fa08301258fc0

[
img class="\"mobileimage1" name="\"imgConnectionPicture"
]
userId = 8fae396ceb3a4e069322a0830125908e

[
img class="\"mobileimage1" name="\"imgConnectionPicture"
]
userId = 34e9c4e4c29a4cfca4b1a0830125908a

[
img class="\"mobileimage1" name="\"imgConnectionPicture"
]
userId = dfb6ae4a068a479bad01a083012590fa

Thu Jul 05, 2012 9:50 pm

Sorry my img html was stripped out of the previous message.
Hopefully this works better.

img class="mobileimage1" src="http://openapi.scenegenesis.com:91/pictures/dfb6ae4a068a479bad01a083012590fa?thumbnail=true" id="j_20" dsid="imgConnectionPicture" name="imgConnectionPicture" _tmpl="true"

userId = 2ec8fef299fb48e0815fa08301258fc0

img class="mobileimage1" src="http://openapi.scenegenesis.com:91/pictures/dfb6ae4a068a479bad01a083012590fa?thumbnail=true" id="j_20" dsid="imgConnectionPicture" name="imgConnectionPicture" _tmpl="true"

userId = 8fae396ceb3a4e069322a0830125908e

img class="mobileimage1" src="http://openapi.scenegenesis.com:91/pictures/dfb6ae4a068a479bad01a083012590fa?thumbnail=true" id="j_20" dsid="imgConnectionPicture" name="imgConnectionPicture" _tmpl="true"

userId = 34e9c4e4c29a4cfca4b1a0830125908a

img class="mobileimage1" src="http://openapi.scenegenesis.com:91/pictures/dfb6ae4a068a479bad01a083012590fa?thumbnail=true" id="j_20" dsid="imgConnectionPicture" name="imgConnectionPicture" _tmpl="true"

userId = dfb6ae4a068a479bad01a083012590fa

Thu Jul 05, 2012 10:39 pm

How do you get the userId, what is 'value'?

code
var userId = value;
/code

?

Fri Jul 06, 2012 1:31 am

userId is passed into the Javascript function from a Response Mapping. The userId response from a rest service is contained in the Array of responses that are mapped to the list control. My list control contains a single item, containing a gridcontrol. The grid control has two cells containing a label and an image control. The userId is mapped to the image controls asset parameter (named imgConnectionPicture). The asset parameter has the Javascript function defined (as seen in the above post).

The console.log is within the Javascript function - as you can see the userId values are unique for each iteration of the data array. But the image src value is not.

Fri Jul 06, 2012 2:35 am

Please attach an image of the mapping.

Fri Jul 06, 2012 1:59 pm

Image mapping attached.

Also notice the Javascript function at the bottom of the Response Mapping view, called UpdateConnectionImage. I also tried mapping the UserId to that javascript directly and it also failed the same way.

Fri Jul 06, 2012 6:46 pm

Looks like the UserId is coming from a REST service. Did you check that it doesn't return the same id?

Tue Jul 17, 2012 6:00 pm

Max, yes the id is different each time.

To provide some follow-up on this issue, I found a work around that seems to work. I needed to access the img[index] in order to correctly set the [src] value. At each iteration through the javascript function, I used the length of the img control (called commentuserimage) to obtain the correct index value. It seems this should have worked automatically, but it did not. It worked when setting label text for the same array, but not img controls.

The work around javscript below:

var userId = value;
var img = $("[dsid='commentuserimage']");

// Need to set the actual img[src] to the correct img[index] of the HTML image.

var imgLength = (img.length - 1);
var imgIdxValue = img[imgLength];

var apiurl = localStorage.getItem("SgiOpenApi");
var imagesrc = apiurl+"/pictures/"+userId+"?thumbnail=true"

imgIdxValue["src"] = imagesrc;