Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Tip: How To Manipulate Binary Objects in UI5 Context with JSON.

stefan_schnell
Active Contributor
‎02-14-2015 3:36 PM
0 Kudos
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:



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.
1 Comment
Labels in this area
Popular Blog Posts