Get a Jumpstart with our Sample Apps
Results 1 to 13 of 13

Thread: Can't Display Image in List control

  1. #1
    Member
    Real Name
    Greg Carmody
    Join Date
    Apr 2017
    Location
    Sydney Australia
    Posts
    105

    Default Can't Display Image in List control

    Hi,

    In my app I am displaying images in a column in a List control. This was working fine previously, however I have now converted the data source from SQL to client side data cache. I am populating the list using the method, setListColumnsAndPopulate. What was previously displaying as an image is now displaying as a text string. (I'm sure the image data is correct, as I can select a row, and the image will display correctly in the detail view image control; its just that it is displaying as text in the list control itself, not as an image).

    I assume I need to apply the correct formatting to the list column as it seems to be ignoring what is set in the field properties in the List control. However, I don't know what the correct syntax should be ?

    Any help appreciated.

    Greg

  2. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,280

    Default Re: Can't Display Image in List control

    Is your List field set to Image?
    If the Image Data type set to Base64
    Does your Image data include the Base64 prefix?
    If the Base64 prefix property set properly?

  3. #3
    Member
    Real Name
    Greg Carmody
    Join Date
    Apr 2017
    Location
    Sydney Australia
    Posts
    105

    Default Re: Can't Display Image in List control

    Is your List field set to Image?
    -> Yes. As this list is being populated with the "setlistcolumnsandpopulate" method from the client-side data cache, I have set the data source in the list to "static" and entered the column headings as : "id_image=N|name=C|overview=L|image=B|asset_name=C|assets_idassets=N".
    Setting image=B causes the list control to treat the column as an image, and also the detail image control thinks its an image as well.

    If the Image Data type set to Base64
    -> it originates as a BLOB from the database and then is cached in the client-side data cache. Original image is jpg encoded.

    Does your Image data include the Base64 prefix?
    ->does it need to ? It was working fine before when the data source was SQL.

    If the Base64 prefix property set properly?
    ->there is a setting "Embed Images into HTML". If I tick this I think the image needs to be base64 encoded. But if I don't I assume it does not? (currently it is not ticked)

    Attached are the settings I currently have. If you remember the thread you replied to yesterday regarding setting the column widths in a list that is populated using the setlistcolumnsandpopulate method, you gave me some default layout settings to set as the list appears to ignore field settings when using this method to populate the data. I am assuming the same thing is happening here ? Any image settings will be ignored and I will need to set them using a layout default column setting.

    Greg


    photo_issue1.PNGphoto_issue2.PNGphoto_issue3.PNGphoto_issue4.PNGphoto_issue4.PNG

  4. #4
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,280

    Default Re: Can't Display Image in List control

    It's not a big problem using setListColumnsAndPopulate... but it's only really been implemented for the simplest of Lists. After it's base features... you're pretty much on your own.

    When dealing with Data Cache, you need to understand that you're working with strings... and that your SQL BLOB gets converted to base64 data... a string. Any features of the List Control used when loading SQL Data are completely over-written when using setListColumnsAndPopulate. You now do not have the benefit of having the List Control pre-process anything.

    Therefore, you must do everything yourself. It's certainly possible. You should contact Alpha to see what they have as a solution for this. I believe a solution may be in the templating for the column... as that's what I've done here. This is a List fed by a Data Cache using setListColumnsAndPopulate...

    ListPopulate.PNG

  5. #5
    Member
    Real Name
    Greg Carmody
    Join Date
    Apr 2017
    Location
    Sydney Australia
    Posts
    105

    Default Re: Can't Display Image in List control

    I sort of worked out most of what you are saying......when looking at the data in the image field of the list, and then comparing it to the original jpg I ran through a base64 converter, they are the same. Also, if I don't select the HTML embed option in the list, the image doesn't appear in the detail view.

    I started looking at templating, but ran into a dead end due to lack of information. Can you give me some clues on how you set up the template in your example ?

    Thanks,
    Greg
    PS>what's the best way to contact Alpha for an issue like this?

  6. #6
    Member
    Real Name
    Greg Carmody
    Join Date
    Apr 2017
    Location
    Sydney Australia
    Posts
    105

    Default Re: Can't Display Image in List control

    I think this is close. It now think there is an image in this column, but it displays it as small black box with an 'X' :

    lObj.layouts.Default.columns[2].data.template = "<img src="{data.image}/jpeg;base64", width="100" height="100" />";

  7. #7
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,280

    Default Re: Can't Display Image in List control

    Sometimes it's best to study what Alpha does for this stuff. Since you're working with a Data Cache... and... Alpha converts binary image data to base64 for the cache... that's what the template needs to work with. If you feed a List control with SQL... including base64 image data from a table... and examine the List Object... you'll find something like the span used below...

    Code:
    lObj.layouts.Default.columns[3].data.template = '<span id="{dialog.ComponentName}.LISTCUST.CUSTIMAGE.I.{*dataRow}">{*if CustImage == ""}{*else}<img  id="{dialog.ComponentName}.LISTCUST.CUSTIMAGE.IMG.{*dataRow}"   style="width:100px;" src="data:image/jpg;base64,{CustImage}" />{*endif}</span>&nbsp;';
    In my case, my image data is in the 4th column... zero based column 3. My BLOB image field is CustImage.

  8. #8
    Member
    Real Name
    Greg Carmody
    Join Date
    Apr 2017
    Location
    Sydney Australia
    Posts
    105

    Default Re: Can't Display Image in List control

    Thanks David. This worked. I thought it would be somewhat seamless to change the data source from SQL to data cache. But is not the case by a long shot.

    Greg

  9. #9
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,280

    Default Re: Can't Display Image in List control

    When you starting feeding the List Control by hand using setListColumnsAndPopulate you are basically on your own... everything must be done manually. It is nice to know, however, that you can get at every aspect of that Control.

    Another option is to use the <listObject>.populate() method. This replaces only the data... it doesn't wipe out the entire guts of the List Control.

    The column names in your Data Cache must match the columns in the List Control.

    You must set up the List Control to expect the same data coming from the Data Cache as from SQL. E.g. If your List Control is pulling in BLOB Image data... .populate from a Data Cache will not work.
    The List Control must be set up to expect Character Image Data, with all the base64 and prefix stuff set up in the List Field for that Image.

  10. #10
    Member
    Real Name
    Greg Carmody
    Join Date
    Apr 2017
    Location
    Sydney Australia
    Posts
    105

    Default Re: Can't Display Image in List control

    It would be good if this was explained in the videos and documentation.

    With the <listObject>.populate() method,I assume I can use your magic incantation in the template field of the list control to to handle the base64 conversion?

    Greg

  11. #11
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,280

    Default Re: Can't Display Image in List control

    What I'm saying is that you don't have to. The .populate() method does not gut the List control... it leaves the List control properties alone... and only data goes in. But, your List control must be set up initially to handle base64 image data... since that's what you'll be feeding it from the Data Cache.

    You've never detailed what your end goal is... so who knows if .populate() or even .setListColumnsAndPopulate() will be the best answer for you. However, at least .populate() will not force you to rebuild the List control after loading data.

  12. #12
    Member
    Real Name
    Greg Carmody
    Join Date
    Apr 2017
    Location
    Sydney Australia
    Posts
    105

    Default Re: Can't Display Image in List control

    Yes, understand all that. My question was regarding the best way to setup the image field for base64. On that point, I found that if I tick, "Embed images into HTML" that will do it.

    Greg
    PS> I followed the video which showed how to use 'setlistcolumnsandpopulate' method to populate the data from a client-side data cache. If I had known I could have used the .populate() method, would have saved me a lot of pain!

  13. #13
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,280

    Default Re: Can't Display Image in List control

    That's the great thing about Alpha... there's always a few ways to get things done. And for the same reason, it's the frustrating thing about Alpha... documentation is fragmented and incomplete... even for brand new stuff. There should be a cross reference note in each of those populate methods.

Similar Threads

  1. Data-bound image will not display in a list control
    By spoweroz in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 05-08-2017, 10:54 PM
  2. Replies: 1
    Last Post: 03-26-2017, 10:03 PM
  3. Image full screen from list control / additional tools in ink control
    By aal_fareed in forum Mobile & Browser Applications
    Replies: 3
    Last Post: 10-26-2016, 03:32 PM
  4. Display UX List image?
    By Peter.Greulich in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 05-25-2014, 01:29 PM
  5. Display jpg image in an unbound image control
    By boba in forum Alpha Five Version 10 - Desktop Applications
    Replies: 1
    Last Post: 03-08-2012, 06:07 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •