locked
Showing an image from web where src needs formatting beforehand RRS feed

  • Question

  • Hi,

    Am new to Lightswitch (and not that experience a programmer to begin with!) so bear with me for asking a simple question. Basically I want to do something that I don't think can be that hard but I am at a loss where in Lightswitch I should be focussing.

    I am developing a basic phone app. My data source is a SharePoint 2010 site with various lists. One of the lists is a staff list and one of the fields in the individual person records is a single line of HTML that includes the absolute URL of a small image of the staff member. When the app views a staff record I want to display the image, as well as other details. For reasons unrelated to the app the field isn't purely the absolute URL, it also has HTML either side that I need to remove, a bit like: <div><img src="http://blah"/></div>

    So, my question is what is the correct way to go about this. Should I be adding a Data Item to the ViewStaffMember screen and then manipulating and writing the formatted URL to that? And if so how do I then get that into an image source? Can I just add the unformatted URL field to the Screen and format it as a Picture (as well as format the URL in the Post Render Code)?

    I hope the above makes sense, happy for anyone to just point me in the right direction in terms of the required reading. Grateful for any ideas.

    Cheers,

    Paul

    Wednesday, February 25, 2015 4:29 PM

Answers

  • Hi RedHotBelgian,

    It should be easy as you say.

    // Default custom control with 'Screen' as context

    myapp.AddEditHotel.ScreenContent_render = function (element, contentItem) { var img = $("<div><img src='https://i1.social.s-msft.com/profile/u/avatar.jpg?displayname=redhotbelgian&size=extralarge&version=e7fa12cc-8fa4-40aa-9af5-e2a5e9a3bdae'/></div>"); $(img).appendTo(element); };

    // Custom control with example context 'Person.ImageHtml' myapp.AddEditHotel.Person_ImageHtml_render = function (element, contentItem) { var img = $(contentItem.value); $(img).appendTo(element); };

    If it contains the odd DIV element, that is probably fine. Try it and see.

    Cheers

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Marked as answer by RedHotBelgian Thursday, February 26, 2015 11:40 AM
    Wednesday, February 25, 2015 5:21 PM

All replies

  • Hi RedHotBelgian,

    It should be easy as you say.

    // Default custom control with 'Screen' as context

    myapp.AddEditHotel.ScreenContent_render = function (element, contentItem) { var img = $("<div><img src='https://i1.social.s-msft.com/profile/u/avatar.jpg?displayname=redhotbelgian&size=extralarge&version=e7fa12cc-8fa4-40aa-9af5-e2a5e9a3bdae'/></div>"); $(img).appendTo(element); };

    // Custom control with example context 'Person.ImageHtml' myapp.AddEditHotel.Person_ImageHtml_render = function (element, contentItem) { var img = $(contentItem.value); $(img).appendTo(element); };

    If it contains the odd DIV element, that is probably fine. Try it and see.

    Cheers

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Marked as answer by RedHotBelgian Thursday, February 26, 2015 11:40 AM
    Wednesday, February 25, 2015 5:21 PM
  • Dave! 

    You are a legend. I tried your solution and it worked first time! I didn't even have to format the HTML which is a result. Looking at the code I think the problem is my unfamiliarity with JS as much as anything. I was caught up looking for where to set 'src' paths and so on and have a datatype set to image, seems that is all unnecessary!

    As an added bonus your examples mean that currently every member of staff, if they viewed their page, sees a picture of me which I am sure is a feature they will love.

    Thanks again Dave. In the absence of a button labelled 'Make this man King' I shall click 'Mark As Answer'.

    -Red Hot Belgian. 


    Thursday, February 26, 2015 11:39 AM
  • Thank you for your kind words, you are most welcome. Glad we have a similar sense of humour :O

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, February 26, 2015 12:00 PM