Displaying images in SAPUI5 received from the Nort...

NabiZamani · ‎02-08-2017

If you check the Category Entity of the V2 Northwind service you can see that each Category has a Property Picture of type Edm.Binary (see the $metadata). This also means that you will get the pictures per default when you request a list of all categories by calling http://services.odata.org/V2/Northwind/Northwind.svc/Categories?$format=json or if you get one Category directly by calling http://services.odata.org/V2/Northwind/Northwind.svc/Categories(1)?$format=json

As you can see the Picture property is actually returned as a String, in fact it's the Base64 encoded file content. If you want the real binaries of a given picture you can simply call http://services.odata.org/V2/Northwind/Northwind.svc/Categories(1)/Picture/$value (try it in your browser). Unfortunately, the Northwind service only sends Content-Type:application/octet-stream in the response header. If you check the content of the file (after you saved it on your disk as "$value") you can tell that this must be a bitmap file. However, renaming the file from $value to $value.bmp won't help to open the file because it is kind of corrupted. See Extracting Northwind Odata Service images on google groups for some background informationn:

This is an artefact of Northwind's Access heritage. The 78 superfluous bytes are a proprietary OLE header that Access creates when saving bitmaps.

Furthermore, because of this "corrupted file format" we can't just use any of these (only for the Northwind service!):

<!-- HTML5 -->

<img src="http://services.odata.org/V2/Northwind/Northwind.svc/Categories(1)/Picture/$value">



<!-- SAPUI5 XMLView -->

<Image src="http://services.odata.org/V2/Northwind/Northwind.svc/Categories(1)/Picture/$value" />

This won't work because of MS OLE/Access as mentioned in the google groups article from above. It's not a general HTML5, OData, or SAPUI5 issue!

But how can we display the pictures from the Northwind service?.

In HTML5 there multiple ways of displaying images, i.e. by using Data URIs (basically Base64 encoded files). Here is both an HTML5 and SAPUI5 XMLView example:

<!-- HTML5 -->

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 

AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 

9TXL0Y4OHwAAAABJRU5ErkJggg==" >



<!-- SAPUI5 XMLView -->

<Image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 

AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 

9TXL0Y4OHwAAAABJRU5ErkJggg==" />

This will display an image using Data URIs. In both cases you will see the same image, which is a simple red dot. Now let's display a bitmap picture from the Northwind service using Data URIs by using an sap.m.Image Control (see a running jsbin example😞

<html>

    <head>

        <meta charset="utf-8">

        <title>SAPUI5 single file template | nabisoft</title>

        

        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

            id="sap-ui-bootstrap"

            data-sap-ui-theme="sap_bluecrystal"

            data-sap-ui-libs="sap.m"

            data-sap-ui-bindingSyntax="complex"

            data-sap-ui-compatVersion="edge"

            data-sap-ui-preload="async"></script>

            <!-- use "sync" or change the code below if you have issues -->

 

        <!-- XMLView -->

        <script id="myXmlView" type="ui5/xmlview">

            <mvc:View

                controllerName="MyController"

                xmlns="sap.m"

                xmlns:mvc="sap.ui.core.mvc">

               

                <!-- sap.m.Image supports Data URIs -->

                <Image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 

AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 

9TXL0Y4OHwAAAABJRU5ErkJggg==" />

                

                <Image id="myImage"/>

 

            </mvc:View>

        </script>

 

        <script>

            sap.ui.getCore().attachInit(function () {

                "use strict";

 

                //### Controller ###

                sap.ui.define([

                    "sap/ui/core/mvc/Controller",

                ], function (Controller) {

                    "use strict";

 

                    return Controller.extend("MyController", {

                        onInit : function () {

                          var sUrl, oImg;

                          

                          sUrl = "https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/Categories(1)/Picture?$format=json";

                          oImg = this.byId("myImage");

                          

                          $.get( sUrl, function( data ) {

                              var sTrimmedData = data.d.Picture.substr(104);

                              oImg.setSrc("data:image/bmp;base64," + sTrimmedData);

                          });

                          

                        }

                    });

                });

 

                //### THE APP: place the XMLView somewhere into DOM ###

                sap.ui.xmlview({

                    viewContent : jQuery("#myXmlView").html()

                }).placeAt("content");

 

            });

        </script>

 

    </head>

 

    <body class="sapUiBody">      

        <div id="content"></div>      

    </body>

</html>

All we need to do is getting the Base64 encoded file content and trimming the first 104 bytes. Then we can set the src property of our sap.m.Image Control using a Data URI. Of course, you can use OData, DataBinding, formatters etc. for this as well - see this running jsbin example.

Keep in mind that the following should usually work (see comments for assumptions):

<!-- HTML5 -->

<!-- Picture is an Edm.Binary property of Employee Entity-->

<img src="/path/to/my/service.svc/Employees(1234)/Picture/$value" >

<!-- Employee Entity has a Media Link and returns the Employee's image as binaries-->

<img src="/path/to/my/service.svc/Employees(1234)/$value" >



<!-- SAPUI5 XMLView -->

<!-- Picture is an Edm.Binary property of Employee Entity-->

<Image src="/path/to/my/service.svc/Employees(1234)/Picture/$value" />

<!-- Employee Entity has a Media Link and returns the Employee's image as binaries-->

<Image src="/path/to/my/service.svc/Employees(1234)/$value" />

Only for the Northwind service this does not work (what a pity). So you don't have to use Base64 Strings and Data URIs... Also make sure to set the correct Content-Type header in your responses.

-Nabi

Displaying images in SAPUI5 received from the Northwind OData service

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z