Images on datagrid - Forum - Mobile - Progress Community

Images on datagrid

 Forum

Images on datagrid

This question is answered

Hi there,

We have a datagrid with images on each row, we are able to return the images correctly from the BLOB field. When assigning the images to the image control, the images are all displaying one row lower than they should be. The dataset is correct, it just seems to be the assignment of the image that is giving us issues. The image control in the first row of the grid is displaying the default 'no-image' of the control and not our default.

Seems there is a delay between our assignment and the control rendering. The assignment of the image to the image control happens via a local storage variable with javascript. Anyone able to help us align the images correctly? 

Thanks in advance.

Verified Answer
  • Cause:

    The following error...

    The URL: GET appdesigner.rollbase.com/.../2wBDAAQDAwMDAgQ…dcavddzPbL2w+b2S9n7jmgBx9LRbClzBW1rhSleVaaUuLt7OMVX2/Mvze3h7ZcfacgAB//2Q== 414 (Request-URI Too Large)

    ..was occuring because when mapping the tt-cimage JSDO element to the imgPart element, the src attribute was assigned the image bytestream

    <img src=".../2wBDAAQDAwMDAgQ…dcavddzPbL2w+b2S9n7jmgBx9LRbClzBW1rhSleVaaUuLt7OMVX2/Mvze3h7ZcfacgAB//2Q==" .../>

    The client would then process the src value as a target URL and run a GET operation on the server.

    the correct value for src should be

    "data:image/jpg;base64,.../2wBDAAQDAwMDAgQ…dcavddzPbL2w+b2S9n7jmgBx9LRbClzBW1rhSleVaaUuLt7OMVX2/Mvze3h7ZcfacgAB//2Q=="

    In other words we need to prepend "data:image/jpg;base64," to the image bytestream.

    This can be achieved on the client via JS. However in the case of datagrids, the value is assigned AFTER the JSDO read operation is complete for the grid item. This causes the src value to be assigned to the next image grid element.

    Resolution:

    Build the content type directly on the AppServer, ie prepend the "data:image/jpg;base64," to the CLOB temp table field that stores the image bytestream.

    ASSIGN phDataset:GET-BUFFER-HANDLE(1)::tt-cimage = "data:image/jpg;base64," + BASE64-ENCODE(encdmptr) 

All Replies
  • has anyone got any ideas for me?

    This is pretty urgent.

  • A screenshot would help understand the issue. Also do share the javascript code that you use. Thanks.

  • The below javascript is in the local storage variable edit js. The local storage variable is linked to the clob field, returned by the dataset.
    Appery("imgPart").attr("src","data:image/jpg;base64," + value);
     
     
     

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

    Disclaimer


    From: Santosh Patel [mailto:bounce-sapatel@community.progress.com]
    Sent: 07 November 2014 11:24 AM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by Santosh Patel

    A screenshot would help understand the issue. Also do share the javascript code that you use. Thanks.

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • The code to display the image is it within the data mapping?

  • Hi John,
     
    Yes it is.
     

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

    Disclaimer


    From: john.goodland [mailto:bounce-johngoodland@community.progress.com]
    Sent: 07 November 2014 12:18 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

    The code to display the image is it within the data mapping?

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • great - Can you upload the image to here showing the data mapping.

  •  

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

    Disclaimer


    From: john.goodland [mailto:bounce-johngoodland@community.progress.com]
    Sent: 07 November 2014 12:30 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

    great - Can you upload the image to here showing the data mapping.

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • Is the image on the grid called imgPart? I dont see any mapping to that.

  • The local storage variable is setting the value of the image control with the javascript code.
    That’s the way I thought it should be done as the database is sending back the image in a binary format and needs to be converted on the client side.
     
     

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

    Disclaimer


    From: john.goodland [mailto:bounce-johngoodland@community.progress.com]
    Sent: 07 November 2014 12:59 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

    Is the image on the grid called imgPart? I dont see any mapping to that.

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • This is the appserver code:
     
        
            FIND FIRST catimage WHERE catimage.pm-partno EQ phDataset:GET-BUFFER-HANDLE(1)::pm-partno NO-LOCK NO-ERROR.
            IF AVAILABLE catimage THEN DO:  
     
                COPY-LOB FROM OBJECT catimage.cti-image TO encdmptr NO-CONVERT NO-ERROR.
                ASSIGN phDataset:GET-BUFFER-HANDLE(1)::tt-cimage = BASE64-ENCODE(encdmptr)
                       encdmptr = ?.
            END.
            ELSE DO:
                COPY-LOB FROM FILE "c:\MidasWeb\MidasWeb\MobileImg\noimage.jpg" TO OBJECT encdmptr NO-CONVERT NO-ERROR.
                ASSIGN phDataset:GET-BUFFER-HANDLE(1)::tt-cimage = BASE64-ENCODE(encdmptr)
                       encdmptr = ?.           
            END.
           
            IF phDataset:GET-BUFFER-HANDLE(1)::tt-cimage EQ ? THEN DO:           
                COPY-LOB FROM FILE "c:\MidasWeb\MidasWeb\MobileImg\noimage1.jpg" TO OBJECT encdmptr NO-CONVERT NO-ERROR.
                ASSIGN phDataset:GET-BUFFER-HANDLE(1)::tt-cimage = BASE64-ENCODE(encdmptr)
                       encdmptr = ?.
            END.  
     
    Here is the data mapping:
     
     
    Then in edit js. Next to the local storage variable “ltest” I am using this javascript:
     
    Appery("imgPart").attr("src","data:image/jpg;base64," + value);
     
    This is the full detail of what I’m doing. Maybe this could also help someone else in the future that’s trying to do the same thing.
     
     

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

    Disclaimer


    From: mflanegan [mailto:bounce-mflanegan@community.progress.com]
    Sent: 07 November 2014 01:38 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by mflanegan
    The local storage variable is setting the value of the image control with the javascript code.
    That’s the way I thought it should be done as the database is sending back the image in a binary format and needs to be converted on the client side.
     
     

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

     

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

     

    Disclaimer

     
    From: john.goodland [mailto:bounce-johngoodland@community.progress.com]
    Sent: 07 November 2014 12:59 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

    Is the image on the grid called imgPart? I dont see any mapping to that.

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • Have you tried moving the mapping to the imgPart and not the local variable?

    Use something like this for the JS behind the imgPart

    element.attr("src","data:image/jpg;base64," + value);

  • Hi John,
     
    This is the result:
     
     

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

    Disclaimer


    From: john.goodland [mailto:bounce-johngoodland@community.progress.com]
    Sent: 07 November 2014 01:53 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

    Have you tried moving the mapping to the imgPart and not the local variable?

    Use something like this for the JS behind the imgPart

    element.attr("src","data:image/jpg;base64," + value);

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • The JS behind the local variable is it just:-

    Appery("imgPart").attr("src","data:image/jpg;base64," + value);

    Also, in chrome if you inspect the element then goto resources and view the JSON dataset for the grid. Copy this JSON dataset throw it into http://json.parser.online.fr/ and the answer should become clear. You are looking at what the JSON dataset says for imgPart

  • I was using the safari browser previously when I tried your way with mapping the field to the image control. I now tried to test it on chrome.
    The image displays in the right place then suddenly disappears. In the debugger I get this error message:
     
    ‘Resource interpreted as Image but transferred with MIME type text/html’
     

    Meyrick Flanegan

    Developer - Managed Services

    Email: mflanegan@elcb.co.za

     

    ELCB Information Services (Pty) Ltd

    Customer Service Email  elcb@elcb.co.za · www.elcb.co.za

    E A S T  L O N D O N

    Tel: +27(43)  704 0700

    Fax: +27(43) 704 0701

    J O H A N N E S B U R G

    Tel: +27(11) 879 6179

    Fax: +27(11) 454 0384

    P O R T  E L I Z A B E T H

    Tel: +27(41) 373 0529

    Fax: +27(86) 650 0135

    Disclaimer


    From: john.goodland [mailto:bounce-johngoodland@community.progress.com]
    Sent: 07 November 2014 02:04 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

    The JS behind the local variable is it just:-

    Appery("imgPart").attr("src","data:image/jpg;base64," + value);

    Also, in chrome if you inspect the element then goto resources and view the JSON dataset for the grid. Copy this JSON dataset throw it into http://json.parser.online.fr/ and the answer should become clear. You are looking at what the JSON dataset says for imgPart

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • Is imgPart an image on your grid? If so, try removing the JS behind the imgPart mapping