Hello community,

here is an easy example how to manipulate binary objects in UI5, in this case an image. What does it mean exactly? In this experimental case I want to show how to change an image via JSON binding. At first we create a JSON file which contains an JPEG image in base64 format, in our case the UI5 logo. Here the JSON file, with a part of the base64 encoding in E_DATA:

{

  "BinaryFile" : [

    {

      "E_DATA" : "/9j/4AAQSk...jr1dYuv/9k=",

      "E_MIMETYPE" : "image/jpeg",

      "E_FILENAME" : "SAPUI5.jpg"

    }

  ]

}

The E_DATA contains the image in base64 format – this format can be used by JavaScript of any browser. E_MIMETYPE and E_FILENAME are self-explanatory.

Now we take a look at the HTML file:

<!doctype html>

<html>

  <head>

    <title>BinaryFileJPEG</title>

    <meta http-equiv="Content-Type" content="text/html" />
    <meta charset="ISO-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <script src="resources/sap-ui-core.js" type="text/javascript"
      id="sap-ui-bootstrap"
      data-sap-ui-libs="sap.ui.commons, sap.ui.table"
      data-sap-ui-theme="sap_bluecrystal">
    </script>

    <script type="text/javascript">

//-Begin----------------------------------------------------------------

  //-Sub to execute when the DOM is fully loaded------------------------
    $(function() {

      //-Variables------------------------------------------------------
        var oModel, Base64 = "", MimeTyp = "", FileName = "";

      //-Load JSON file into model--------------------------------------
        oModel = new sap.ui.model.json.JSONModel();
        oModel.loadData("zBinaryFileJPEG.json", null, false);
        sap.ui.getCore().setModel(oModel, "oModel");

      //-Get the data for the image-------------------------------------
        Base64 = oModel.getData().BinaryFile[0].E_DATA;
        MimeTyp = oModel.getData().BinaryFile[0].E_MIMETYPE;
        FileName = oModel.getData().BinaryFile[0].E_FILENAME;

      //-Set the data of the image--------------------------------------
        document.getElementById("image").setAttribute("data", "data:" +
          MimeTyp + ";base64," + Base64);

      //-Refresh content------------------------------------------------
        document.getElementById("content").innerHTML =
          document.getElementById("content").innerHTML;

    });

//-End------------------------------------------------------------------

    </script>

  </head>

  <body class="sapUiBody" role="application">

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

  </body>

</html>

 

As you can see it is very easy to understand. The HTML file contains four sections. In the first section we load the JSON file into the model. In the second section we load the data from the model into variables. In the third section we manipulate the object with the ID image and set the data attribute with the mimetype and the base64 encoded image data. Last but not least in the fourth section we refresh the content.

The result looks like this:

binfile.JPG

It seems to be doubtful to work on this way. Sure, you are right with images, but this is only an example, But, think about over if you work with other content in other formats and in other context, e.g. to transfer data via OData to your client. I know the $value way, but this way is easier to handle.

Enjoy it.

Cheers

Stefan

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Stefan Schnell Post author

    Hello community,

    I extended the range of functions of BinFile2ABAP to create base64 encoded JSON files for local databindings as simulation for backend databindings, via OData and SAP Gateway. You can find BinFile2ABAP here.

    Enjoy it.

    Cheers

    Stefan

    (0) 

Leave a Reply