Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Fiori - Approve Travel Expense Enhancement

Hi Experts,

I'm trying to enhance the Fiori - Approve Travel Expense. Enhancement is, to display the attachment/image associated with the trip .

I created a oData service using Netweaver Gateway which brings image/attachment in base 64 format.

Code Level changes :

In in main webcontent "views/details/Home.view.html"

Added this line , which creates a button 'View Attachment'

<div data-sap-ui-type="sap.m.Button" data-text="View Attachments" data-press="viewReceipt"></div>

And in "controllers/details/Home.controller.js"

created a function "viewReceipt":

viewReceipt:function()

{

     var oContext = this.getView().getBindingContext('tea');

     var tripNo = oContext.getProperty('trip_number');

     var empNo = oContext.getProperty('employee_number');

     // local proxy for cross-domain access

     var uri = "/sap/opu/odata/sap/ZTRIP_ATTACHMENT_DISPLAY"; 

          // create OData model from URL 

     var oModel = new sap.ui.model.odata.ODataModel(uri, true);

          // create an additional JSON model for the result of the read request 

          var imgModel = new sap.ui.model.json.JSONModel(); 

          function successSubmitBatch(oData, oResponse, aErrorResponses)

          {

               // The result of the request can not be used "directly". As only a single entity is read, it needs to be wrapped in an array to enable aggregation binding. 

                var imgResult = {results:[oData.__batchResponses[0].data]};

               //imgModel.setData(imgResult);

                imgModel.setData(imgResult.results[0]);

          if(imgResult.results[0].results[0].lv_bin == "Trip has no Attachments")

               {

                    console.log("No Attachment!");

                    sap.m.MessageToast.show("Trip has no Attachments.",{onClose:jQuery.proxy(this.onFinishDialog,this)});

               }

               else

               {

                    console.log("Success");

                    //Carousel

                    var oCarousel = new sap.ui.commons.Carousel({

                         visibleItems: 1,

                         orientation: "horizontal",

                         height: "500px",

                         width: "400px"

                    });

                    //Add Images to Carousel

                    for(i=0;i<imgResult.results[0].results.length;i++)

                    {

                         var src = imgResult.results[0].results[i].lv_bin;

                         oCarousel.addContent(new sap.ui.commons.Image({

                         src : "data:image/gif;base64,"+src,

                              alt : "Receipt Image "+i,

                              height : "100%",

                              width : "100%"

                         }));

                    }

                    //Dialog

                    var oDialog = new sap.m.Dialog({

                         title: "Receipts",

                         width: "auto",

                         height:"auto",

                         maxWidth:"100%",

                         maxHeight:"100%",

                         scrollLeft:100,

                         scrollTop:100,

                         applyContentPadding: false,

                         resizable: false,

                         keepInWindow:true,

                         autoClose: true

                    });

                    //Close Button for Popup Dialog

                    var obtnClose = new sap.m.Image({

                         src: "img/close.png",

                         alt : "Close",

                         height : "30px",

                         width : "30px",

                         press:function(){

                              oDialog.close();

                         }

                    });

                    obtnClose.setTooltip("close");

                    oDialog.addContent(obtnClose);

                    oDialog.addContent(oCarousel);

                    oDialog.open();

               }

          }; 

Everything is working , 'View Attachment' button working and its bringing the image. But once we close the browser and open it again , It shows the the error ''Trip has no Attachments" which is because , service do not returns the image data . I get this error in  'CSRF Token validation failed' when I do inspect element in browser.

Tags:

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question