Fiori - Approve Travel Expense Enhancement

[Former Member]

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.

[Former Member · Accepted solution]

Hi Ram,

Thank you for sharing part of your solution - I am looking into doing the same as this myself.

As for the problem you have encountered: 'CSRF Token validation failed' I have had this issue before with Gateway services - not while working on Fiori, but when setting up my own gateway services.

I have a few suggestions which you might like to try (althought I don't know if they are relevant with Fiori):

First, try going to SICF and navigating to the node for your gateway service (usually in SAP/OPU/OData/SAP). Double click on it. Under the "Service Data" tab you will see a yellow button "GUI Configuration", click this and then enter a new line: ~CHECK_CSRF_TOKEN   value: 0

This will mean that the tocken is not required so you won't have this problem.

Alternativly, in order to get the token, you can do an OData get requests (maybe for the metadata, or something else), and in the header enter "X-CSRF-Token":"Fetch" . This will get a tocken for you, in the return structure: response.headers['x-csrf-token'] . After this you can use this token in all subsequent GETs PUTs and POSTs.

Here is my example code for this:

OData.read(

    {

      requestUri: myUri,

      headers: {   

        "X-CSRF-Token":"Fetch"  

      }

    }, function (data, response) {

      //if it gets here request successful

      token = response.headers['x-csrf-token'];

      console.log("token:  "+token);

      //alert(token);

    }, function (err) {

      //if it hits here request failed

    });

I hope this helps - but sorry if it doesn't.

I look forward to hearing more about your solution

If you had the time, it would be great if you could post a Blog about how you did all of this (it would help me, and I'm sure lots of other people out a lot!)

Thank you,

Lindsay

[Former Member]

Hi Ram

Do you mind sharing the details about the oData service reading the attachment info? Are you using the standard CL_ATE_ATTACHMENT class in the app package P_SRA008_ODATA

I have started looking into making similar enhancements, however we've various attachment file types supported such as TIF, PDF etc.

Thank you,
Vishal