Infotype Operations via Fiori Like Application on HCP

[RishiKhandelwal]

So here I tried my hands on performing Infotype operations like (DISPLAY/CREATE/UPDATE and DELETE) for a custom Infotype in SAP on-premise system via  a Fiori like application. This is a custom full page SAPUI5 application with use of CSS on standard controls to alter some of their standard delivered properties.

 

I managed to display the data from SAP on my SAPUI5 front end as well as was able to perform CREATE/UPDATE and DELETE operation with changes happening in SAP data in real time, with the help of SAP Gateway operations.

 

Standard CSS Classes of controls which were modified-

 

a. Text in Header Bar

.sapMText { font-size: 1.75rem; font-family: cursive; line-height: 3.7rem; }

 

b. Header Bar Size

.sapMBar { height: 4.5rem; line-height: 4rem; }

 

c. Footer button Icon Colour

.sapMFooter-CTX div.sapMBtnInner, .sapMIBar-CTX.sapMFooter-CTX .sapMBtnIcon {

color: white;

text-shadow: 0 1px 0 rgba(0,0,0,0.5);}

 

d. Buttons on Home Page

.sapMBtnIcon { color: black; }

 

.sapMBtnInner {

border: 2px solid black;

background: white;}

 

e. Input Box

.sapMInputBaseInner {

background: white;

border: 2px solid black;}

 

Home Page-

 



 

On the home Page an Employee Personnel number can be given as input and on clicking the Search button below it Infotype data from SAP can be fetched and displayed. Here I modified the standard CSS classes to change the colours of buttons as well added a bit thick border line around the buttons, Input box header and footer. Also increased the size of header and text inside it.

 

Footer have the buttons as Infotype operations like EDIT(pencil) for updating the data DELETE(trash can) for delete, ADD for Creating a New record as well as home button to navigate to this home screen from any of those Infotype Operations.

 

Displaying the Data-

 



Now the record can either be deleted or changed/updated. Since REST Operation "PUT" using gateway does not send a response body back, I used the response header to send back the data like Changed by and Changed on, back to front end from the newly updated Infotype record. From their just picked the values and set the value of the respective box where I wanted to display in the view controller.

 

Delete-

 



 

Above, a dialog box to confirm the DELETE action can be seen and information message box once the data is deleted successfully. Clicking on OK here will remove all the data and UI controls and screen will be defaulted back to home page.

 

Same way Data can be updated or a new record can be created from the SAPUI5 application.

 

Create -

 



 

In the backend for all these operations I used standard FM.

 

Moving on may be I will try my hands changing/creating employee related data like Communication, address or bank details via a SAPUI5 app because SAPUI5 let you CHANGE, BY DESIGN !!! :smile: