How to display a dynamic image in LightSwitch HTML Search Data screen

Question

I have a database and LightSwitch HTML screen for searching.  Two of the database fields need to be combined with a constant to form the URL of a .jpg image I would like to display with each row of the search datagrid.  One of the database fields also needs to have a regex run on it before it is combined to form the file name.

Example:
Field 1 = This Is My Image
Field 2 = BrownCow
Constant = "_image.jpg
I would like to display the URL http://www.mywebsite.com/This_Is_My_Image_BrownCow_image.jpg on the datagrid row.

Where and how would I go about doing this?

Help is appreciated!

Answer 1

Hello,

I have moved this thread to Visual Studio LightSwitch - General Questions forum for better response.

Best regards,

---

Amanda Zhu <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

It sounds like you'll need to do some String concat() operation on the values of screen.Field1 and screen.Field2, but what is unclear to me is what control are you using?  The HTML client doesn't have a native datagrid, unless you are using a custom control or a commercial product like Component One's controls.  Additionally, you want to show only the link to the Image or the actual image itself?

Answer 3

Yes, I know how to concatenate to get the string I need.  I am trying to display the image, using a URL.  You're right that the HTML client doesn't have a datagrid...I was using the SilverLight template by mistake.  But the problem is the same except with a list.

I have created a computed property but it does not display.

I found this article: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/185/Computed-Properties-With-the-LightSwitch-HTML-Client.aspx but I'm not sure what I should write for Javascript, or even if this is the right way to go.

Making things simple seems to make other things pretty complicated :-)

Answer 4

Hello,

If you are simply trying to display the image, I would suggest using a custom control and constructing the image source string during the render event.

In the screen designer, change control type of the row template to Custom Control.  Click on the 'Edit Render' hyperlink in the property window and construct your custom html in the created function.  Code will looks something like the following.  Make sure the control is databound to the table selected item, which should be similar to MyTableITems(item).

myapp.MyTableItems.RowTemplate_render = function (element, contentItem) {
    var imageTag = "<img src='http://www.mywebsite.com/" + contentItem.value.Part1.replace(" ", "_") + "_" + contentItem.value.Part2.replace(" ", "_") + "_image.jpg' />";
    $(imageTag).appendTo($(element));
};

Hope that helps,

Elizabeth Maher

---

This posting is provided "AS IS" with no warranties, and confers no rights.