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
  • I have removed the JS. The image doesn’t appear at all now, not even for one second. It just displays the images like the last screen shot I sent you.
     

    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:22 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

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

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • I need to see the JSON dataset for the grid. Could you drop this into http://json.parser.online.fr/ and see whats in imgPart?

  • No problems :)

    My beer account is available for donations in PUG - Dusseldorf ;)

  • Hi john,
     
    There seems to be a new error now:

    GET https://appdesigner.rollbase.com/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAQDAwMDAgQ…dcavddzPbL2w+b2S9n7jmgBx9LRbClzBW1rhSleVaaUuLt7OMVX2/Mvze3h7ZcfacgAB//2Q== 414 (Request-URI Too Large)
     
    From the research I have done, it looks like I would need to use a post instead of a get. If you agree with this are you able to tell me how would one implement this on the client side?
     
    Thanks in advance.
     
     

    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:43 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by john.goodland

    No problems :)

    My beer account is available for donations in PUG - Dusseldorf ;)

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • Hi There,

    After my image has been returned correctly, it is being run again and is looking at remote address,  54.208.2.17:443 and the request URL begins with appdesigner.rollbase.com followed by the value of the image. This is causing error 414 (Request-URI Too Large), therefor causing the image control to be cleared.

    Why would this be happening? and what can one do to prevent this from happening?

    Thanks in advance.

  • Why do you pass the image bytestream in the request URL?  

  • It’s the only way we know how to do it, what would you suggest doing?
     

    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: ymaisonn [mailto:bounce-ymaisonn@community.progress.com]
    Sent: 11 November 2014 02:50 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by ymaisonn

    Why do you pass the image bytestream in the request URL?  

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • My apologies,
     
    I am not passing in the request. I am getting it returned in the dataset which is json formatted string data.
     

    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: 11 November 2014 03:22 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by mflanegan
    It’s the only way we know how to do it, what would you suggest doing?
     

    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: ymaisonn [mailto:bounce-ymaisonn@community.progress.com]
    Sent: 11 November 2014 02:50 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by ymaisonn

    Why do you pass the image bytestream in the request URL?  

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • The dataset should return in the response body, so such an error shall not occur.

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

    is a request (not a response) sent from the client to the server to read data.

  • The error does not occur the response body, it is happening in the get but the get should not be firing. Is there any way we can stop the get from firing?
     

    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: ymaisonn [mailto:bounce-ymaisonn@community.progress.com]
    Sent: 11 November 2014 07:13 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by ymaisonn

    The dataset should return in the response body, so such an error shall not occur.

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

    is a request (not a response) sent from the client to the server to read data.

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.

  • 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) 

  • Hi
     
    Yes, this sorted out the issue. Thank you very much for your help.
     

    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: ymaisonn [mailto:bounce-ymaisonn@community.progress.com]
    Sent: 14 November 2014 01:11 PM
    To: TU.Mobile@community.progress.com
    Subject: RE: [Technical Users - Mobile] Images on datagrid
     
    Reply by ymaisonn

    Cause:

    The following error...

    he 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

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

    In other words we need to prepend "date:image/jpg;base64," before 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 "date:image/jpg;base64," to the CLOB temp table field that stored the image bytestream.

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

     

    Stop receiving emails on this subject.

    Flag this post as spam/abuse.