arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs o-—--unity Like pme Learners! uooon 3 RSS Feed e new SAP BTP Learning group for guidance pport to achieve your learnings goals. Aska Question Write a Blog Post Former Member February 5, 2015 | More than 30 minute read Simple Exercise on OData and SAP UI5 Application for the basic CRUD Operation Fs 473 © 176697 Contents 1. Introduction 2. Creation of OData Service 2.1. Creation of Data Service 214 Pre-requisites Creation of Data Model Generate Run time Objects Service Implementation. Registration of Service. hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 87arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs 3.Consumption of OData Service SAP UIS application. 3.1 Consuming OData Service for CRUD operation using UIS Application, 3.11 Pre-requisites Creation of SAP UI5 Application. Create a Dashboard for Employee details display. Pop-up window for Data Modify, Create button for Data Creation. 4,Source code used. List of Abbreviations/Acronyms Term Pc MPC cRUD Explanation Data Provider Class Model Provider Class Create, Read, Update, Delete 1. Introduction In the demo we are going to see an example on SAP UIS application for CRUD operation using SAP UI5 and OData Operations. This demo can be split in to two main divisions. + Creation of OData Service + Consuming an OData Service using SAP UIS application. 2. Creation of OData Service We are going to create an OData service for the custom Employee Details with the basic operations Create, Read, Delete and Update (CRUD). 2.1 Creation of OData Service hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 2187arias v7.98 Follow Like 3) RSS Feed ‘Simple Exerese on ODala and SAP UIS Applicaton forthe basic CRUD Operation | SAP Slogs In this example we are going to see the creation of OData service using the SAP Gateway Service Builder(SEGW). The OData Service can also be built by various ways available and we took the Gateway Service Builder approach here. In this example, the Data has been deployed in the embedded deployment model where the single system acts as both Gateway and Backend system. The below mentioned are the steps are used to create the OData service. + Pre-requisite + Creation of Data Model + Generate Runtime Objects + Registration of Service + Service Implementation 2.1.1 Pre-requisites In the pre-requisite, we are going to create a transparent table which is going to act as a back end table and function module for the Create, Read, Update and Delete (CRUD) operation to be used in this OData creation, 1. Creation of Table, we will create a Z table with basic employee details. Once the table is created, please create some entries. Later, these entries will be displayed in the UI dashboard. 9 VOR Hs S&S OM GEM tecvialsettnos mises. Aovend smut. le | ar On Typo nach ; ee ee | a f (oa ola | a ee ee 2. Create Function Modules for Create, Read, Update and Delete operation, Important Note: Create the Function Module as Remote-Enabled Function Module. ‘+ Function Module for Create Operation hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-us-applicatonforthe-basic-cus-operation’ 3187arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on OData and SAP UIS Application or the basic CRUD Operation | SAP Blogs Functon rece (elena cae ace sn, SYPID oprzonat TuPE 2104 SUCCESS) TPE BOOLEAH NSERT TO zmm_exp VALUES 1s_enp. IF ay-aunre =. n0rF, + Function Module for Read Operation ee Active Function module Z81_EMPID 1 VALUE (ET swe) THE 2101 EMP Tr 10 GTP 4venpid 18 wor mITIAL. a: | seunct + Row zmm_eap INTO TABLE e2_cap a2 | gare enpid = 1¥_enpid. ae | SELECT + FROM smmenp INTO TABLE et_enp. a5 | ewe. 16 a7 ENDFONcTION. ‘+ Function Module for Update Operation hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-application-forthe-basic-cud-operation’ 467arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Slogs Functon modue meme ore —~SSCS~*d Ae —_Aermaes import \"roor |" Crangng | Tables _(Grceptone AGGounOgeT 25 | exproncrrom. 2 3 2 a g 5 z 2 t 2 s KE(IV_aNPID) TYEE nos ENPTE SUCCESS) TYPE BOOLEAN DELETE FROM emm_enp WHERE expid ~ iv_empid. IF ay-aubre = 0. ‘ey_suecess = "x. ENDIF. 2.1.2. Creation of Data Model ‘The Data model is used to describe the OData Services which contains Entity, Properties, and EntitySet and so on, In this example, we are going to build a OData service using SAP Gateway Service Builder (SEGW) 1. Go to Transaction Code: SEGW, which will land you in the Gateway Service Builder. hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cus-operation’ 5167arias v7.98 Follow Like 3 RSS Feed ‘Simple Exercise on OData and SAP UIS Application forthe basic CRUD Operation | SAP Blogs yen Ese Goto Ege Sytem Hop 48 €@@ DHMH D008 DH OB SAP NetWeaver Gateway Service Builder UGA) B19) eh) 2, Create a Project Empbyes Prajact mates Project Type [Seniea wen £AP annotations Generation Stateay _[Sndard Object Directory Entry Package [eTMP 1 Person Respanstle 3, Once the Project is created, create Entity and EntitySet by the Import option available hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-us-applicationforthe-basic-cu-operation/ as7arias v7.98 Follow Like 3 RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs * qi + Glentity splay Beco + Ciruntime » Cisenice mai Redefine > Indude > Data Model fom File RFC/BOR Interface Search Help 4. Give the Entity, Structure and the EntitySet create option as below. We are going to use the already created employee table structure here. —_ RR come 5, Select all the Data source parameters and press Next. Erebrec tase GUE reat Cesrnon OI Bees 6, Press Finish to complete the Data Model creation. hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’arias v7.98 Follow Like 3 RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs Note: There are number of ways to define the Data Model and we have chosen the import->DDIC structure option here, [any 8 We 15CConpledeter Ton A010 ame 5K, Tee |tane ibe Demo ‘gen Que leno roeree [eres Bowe AGU erp Erpeje ire ‘eas Gia erodes roere Desaniter ano 7. The Entity and EntitySet are created now, and we can see the entity type has been created with reference to the given ABAP Structure. SAP NetWeaver Gateway Service Builder (DIGI) 16) (els) Bie) i) = 9am pe an Souci Te toe " Brebyes 20 8. Once it is added, we have the properties created now as below. Choose Empid as a Key here, the key also can be defined at the step 6 by marking the key field as “Is. Key’. Spear ae ta 2.1.3. Generate Run time Objects 1. Once all the above activities are completed, generate the run time objects by pressing the Ctrl+F3 button, This will pop up the below window with all the option to generate the run time objects. hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-ui-applicationforthe-basic-cud-operation’ 367arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Slogs jel Provder Class hss name mime enc —_—| Bese Class Name [2ck_me_EMp mec Like 6 | Data Provider Cass v Generate Classes ass ta 3) RSS Feed see Base Class Name ( Service Resistration Technical Model Name | model verson Technical Service Narre | Senice Version a | ws) 2. Once this activity is complete, we have the objects generated as below. This will generate the Data Provider Class, widely we call it as DPC and Model Provider Class and this we call it as MPC class, DPC: Business Logic for CRUD operation goes here. MPC=>Data Model Class, where we can see the data model defined. SAP NetWeaver Gateway Service Builder (Cac) ] [22 ]) | [I>] +O am pe + €i pata Model + GUEntty Types > an > Giassocations ~ GleEntty Sets + =D Employeeset + Gi service implementation > an ~ Gi service Maintenance B carenay hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 9187arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs 2.1.4 Service Implementation In this section, we are going to generate the Business logic using the RFC Function Module we have created earlier for the CRUD Operations. Instead of using RFC Function Module, we can also use Business Object Repository. Also you can use your own custom logic in the DPC_EXT classes for the data operations. 1, Go to Service Implementation, select the Create Operation and go to Map to Data Source. Model ~ = Employeeset aa + Bdelte) Derby + Boetent can + @ Geten +B updat: Runtime Artif » Ciservce Mante — Detals Go to ABAP Workbench 2, Select the Function Module for Create Option as below and press Continue Remote RFC Destination 3. Then the below window will be open with the Data Source Parameter and the Data Mapping has to be done as follows. Also we have an option “Propose Mapping’, which. does the data mapping automatically. Create Drag and drop the Data Source Parameter as shown below for the Mapping Operation. hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicatonforthe-basic-crud-operation’ 10167arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on OData and SAP UI Application forthe basic CRUD Operation | SAP Slogs Similarly, we have defined the mapping for Delete, Getfintity, GetEntitySet and Update operation using the Function Modules we have already created. Delete We have added one more Property, Empid to fetchthe records from the backend based on the Key. We have added one more Property, Empid to fetch the records from the backend based on the Key. Update ig" Once the mapping is completed, generate run time objects (Ctri+F3 ) and go to your Data Provider Class(DPC) to find the ABAP coding has been generated automatically, hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-us-applicationforthe-basic-cus-operation’ 187arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UI Application forthe basic CRUD Operation | SAP Blogs ustetace EEDA EWS | trlemerted Ace yiweer/27_s9 pec coat stavice Get generton satay Cal excesten hanna Save the RFC clog m the spain bp (wees 45852, Coot stxrice Ser o2c necson (avees/2e ea pec cam sence. Leg masege the bane caleeceorme wok uecate 2 CREATE equa (CeatenuD) srecate 2 DELETE cust (GHDekts) ecate 2 READ reuse (Gan4v0) - OUR Execute 9 READ request (CRea4U0)- FED Once the above all activities are completed, we have to register the OData service to consume them. 2.1.5. Registration of Service 1, Go to gateway and select the Gateway service. You will find the OData service is yet to be registered as the Registration status traffic light button is grey. 2. Select the Service and press the Register Ebreoster button to complete the Registration of the OData service and press yes to continue ‘You will now be redirected to the selected system. O smnmwone sl hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 1267arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs 3, Select the package assignment as local object and continue the process, Follow _ | Ted te © Like catenin mm Siena D 3 RSS Feed oa Tac ane Bate eos Weraton — ea ken mnewet 4. On press of continue will register the OData Service. You can also add the service using the Transaction code: /IWFND/MAINT_SERVICE. 5. Select the Gateway Client and this will launch you in the SAP Netweaver Gateway Client, This can also be accessed separately using the T-code : /IWFND/GW_CLIENT. Execute the uri: /sap/opu/odata/sap/ZMM_EMP_SRV/$metadata to test the OData service hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-application-forthe-basic-cud-operation’ 13967arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on OData and SAP UIS Application forthe basic CRUD Operation | SAP Slogs By this successful response, the OData service has been built and itis working fine, Further we will see, how can we consume the OData service using SAP UIS application in the next chapter. Metadata Uri: http://<:/sap/opu/odata/sap/ZMM_EMP_SRV/$metadata : OData Service Metadata document can be accessed here. Entity Set : http://:/sap/opu/odata/sap/ZMM_EMP_SRV/EmployeeSet : The Employee records can be accessed here, Replace the tags , with your server and port details. 3. Consumption of OData Service using SAP UI5 application In this example, we will create a SAPUIS application for Employee and we will see the ‘see how the OData service can be consumed for the basic CRUD operation. Whereas the below are the CRUD methods and their equivalent HTTP methods in the OData service. Create POST [Read GET Update UPDATE Delete DELETE 3.1 Consuming OData Service for CRUD Operation using SAP UIS Application In this example, we are going to create a UI5 application by which we can consume the already created OData service for the basic CRUD operation. This app contains the following details: + Pre-requisite + Creation of SAP UI5 Application + Create a Dashboard to display Employee Details hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 14167arias v7.98 Follow Like 3) RSS Feed hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaton-forthe-basic-cud-operation’ ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs + Popup window for Data modify operation + Create button for Data creation 3.1.1 Pre-requisites We need an Eclipse IDE with version Kepler, Luna or any other latest version with the ‘SAP UIS plugin to develop the SAP UIS application. If you want to know how the SAP UIS development plugins can be added to edipse, click here. 3.1.2. Creation of SAP UI5 Application Create a New SAP UIS project by the below path in the menu bar 1, Go to Menu bar : File->New->Other->SAP UIS Application development(Application Project) and then press next. new Eas Select » wizard —*> Create an Applicaton Project c Werards: > BIB 7 > @ IPA > @& Maven > G OData Development » & Perforce > @ Plug-in Development > G Remote System Explorer 3 > SAP Mobite Platform G Semantic File System a Finish | [Caneel O(c ae 2, Give the project name, with the option to create a Initial view, The view can be created separately as well. 15167anes 738 Single Exes on ODala and SAP US Appicaton fr the base CRUD Operation | SAP Bogs New EEE Follow Select a wizard —~ Create an Application Project, | Like Wizards: > & Ae = 3) RSS Feed ; > & Maven > @} OData Development > & Perforce > @ Plug-in Development > G& Remote System Explorer > G SAP Motile Platform > @ Semantic File system Si Ce 3, Provide the view name and choose the Paradigm as JavaScript and press Finish, hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-application-forthe-basic-cud-operation’ 1667arias v7.98 ‘Simple Exercise on OData and SAP UIS Application forthe basic CRUD Operation | SAP Blogs oe Lola Follow Create a New View Choose a project and name and specify the development paredigm Like 6 Project" {EmpCRUD = Folder; WebContent/empcrud SS __ Development Paradigm: 3) RSS Feed XML Develop ¢ view using XML (JSON Develop @ view using JSON HTML Develop 2 view using HTML Oo Joe 4, By this, we have created an empty SAPUIS project called “EmpCRUD” with view “EmpDetails” as below. Se ee Tic iatnwecerrarermermona 3.1.3 Create a Dashboard for Employee details display hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 767arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs 1, Create a dashboard with the Table contains fields as Employee Id, Name, Address and Designation. Assign the same to the Page and return the page. (EmpDetails.view.js) createContent : function(oController) { eae Ds 11 Table oF Qashboard to show the Employee Data var olable = nev sap.m.Table({ Ad: “Employees”, itenpress + [ oContreller.TtenPress,oController J, ue iw Sap. Label(( 2. You can execute and view the dashboard the option "Web App Preview” as below. Also you can use the option “Run on Server", but you need to install Tomcat / any other web server for the same, hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 18167arias v7.98 Follow ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs 3, Then it appears in the Eclipse as below. Further you can copy and paste the url in the chrome browser, You can use any browser, but I have used chrome as the debugging in bit easy, Like 3) RSS Feed ®) bttp:/localhost:51512/EmpCRUD/index html 4, In the browser, it appears as below. An empty Dashboard is built now. 5, Now the Dashboard is built, we will see how the data can be populated here. Go to “EmpDetzils.controllerjs” and in the onlnit function, write the coding as below to fetch the data from server. This will do a OData call to fetch the data from the server in JSON format. This data further has to be bind to the table we built already. Replace the tags , with your respective server details ZMM_EMP_SRV: Name of the OData Service, we already built. EmployeeSet: Name of the entity set name for employees. fontnit: function) ( ‘ar sServiceUrl = “hotp://cServer ane» s /sap/opu/edate/ s0p/24_£°P_SRV"; Var Qvodel = new sap.ul.model.cdata.opatatacel (sservicelrl,trve); ‘ar oleomodel = new cop. nod $eon.2500eodel() 5 Model. reed("/Eeployecset?" ull null true, function(cDsta,repsonse){ ovonedel.eetaea(eData) Ds sapaut.getCore() setiodel(o2sontodel)s is 6. The data binding happens as below. hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cus-operation’ 19167arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs / Temp je to map the data tothe respective colum ‘Var template = new sap.e.Colunnlistiten({ - id: “first template Follow type: “navigation, visible: true, cells: [ w Like beoestrrsrt fis 3) RSS Feed text "{Empdes)” » 1 ys ‘age addContent(oTable); return oPages, Run the app again in the “Web App Preview” to see the data displayed in the dashboard as below. When prompted for login credentials to your backend server, provide your User id/Password credentials to continue. 7. When you run/execute the application, it may not run due to ‘Access-Control- Allow-Origin’ issue. To overcome this issue, we have an option available with chrome browser, Make sure you close out all instances of Google Chrome including ending all its processes in the Windows Task Manager. Right-Click on your Google Chrome Icon, Go to the Target: and add the command "-disable-web-security”, apply the settings as below. This should allow you to overcome the "Access-Control-Allow-Origin’ issue and the application should run in the chrome browser. (Geet [Cregeen | (Atered) hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 20167arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs '8.When executed again, the employee data appears in the chrome browser as below. Follow Like me 3) RSS Feed By this READ (GET) operation is complete. Further we will see the remaining operations below. 3.1.4 Pop-up window for Data Modify 1. We will create @ popup window with text areas for Employee Id, Emp Name, ‘Address and Designation with three buttons Update, Delete and Cancel for the modify operations. Go to View,js and add the coding as below. var SSRUPE SRR IPIBUREAC Ueda”, texts “Undate'y tapi [ otontreller.tpdate, oCentreller } De ‘var @BRADEL Te BAPLMBUREARC “Delete”, { texts "Deletes otantreller.oelete, ocentroller } ) ver 4 texts “cancel, ops [ otonteeller.cancel, ocenteoller ] 3 ncel’ contenthidth:"1e=", contents] De 2. We have the dialog box or the pop-up window created now. Further we will see how we can make use of the dialog box for the modify operation. On the press of employee details, we will open a dialog box where we will show the employee details and it can be modified or deleted. We will read the employee details hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 21167arias v7.98 Follow teePress Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs from the selected item and will populate the dialog box. The key, “Employee id” we will disable for edit. Function(evt) { s0p. ek getCore() -byT4("Diatog) .open()s sep iek.getvore() bytd("updoce")seerdsible(tree)) Sapued.getCore() -byld("Delete") setvisible( true); var oSelectedtten = evt.getParseeter("Listztee"); var SID = oSelectediten.getBindingContex:() .petProrerty("Enpid"); Var stage = oSelectedTeen. getBindingcontext().getProperty("sepnane”); var sAddr = oSelectedIten. getBindingcontert().getProperty(“Empada"); Ver stole ~ eselectedrten.getBindingcontent().gethroperty("Eapses")s oh getcore() byr4("rd").seevaue(s10); i. getCore()-byla("are") -setValue( stone); oh getCore() -byld(“Address").setVelue( edie); 3. Once it is done, re -run the application to see a dialog window pop-up on a selection of the item. The selected record details are shown now. But the buttons "Update", "Delete” and “Cancel” actions are yet to be defined. LS 4, Go to the controller.js. where you can define the action of the Update button. hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cud-operation’ 22167arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs Follow Like 3) RSS Feed 5, GET in the OData call is used to fetch the X-CSRF token, Once the token is fetched, it act as an authentication to do the further update(PUT) operation. Note: You need a CSRF token to be fetched to perform the Modify/Insert operation. To know more about the CSRF token dick here, Re-run the application to test the update operation, I have updated the address and pressed update button, ‘AddiModity Employes Enter Emp isis bea numben ayura ier Ades | anager 6. On the success, we will reload the main page with the newly updated details, 1 the page at tocatnost65463 says = hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 23167arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs Follow 7. On the press of Ok button, the page will be re-loaded with the newly updated details. % Like ese RV RSS Feed nt The update operation is complete, We will further see the Delete operation details. 8. Go to the controllers. where we can define the action of the Delete button, q Pee ape hp geome) ene Tse, BY s/te/ sore oe stltstoeee'= + =e Sone Hit ate tan’ fepowe bears ee-rter cont.roectt » fetes) ( 9. GET in the OData call is used to fetch the X-CSRF token, Once the token is fetched, it act as an authentication to do the further delete(DELETE) operation. Note: You need a CSRF token to be fetched to perform the Modify/Insert operation. ‘To know more about the CSRF token dick here, Re-run the application to test the delete operation, I have selected a record and pressed delete button. hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaton-forthe-basic-cuc-operation’ 24167arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UI Application forthe basic CRUD Operation | SAP Blogs 10. On the success, we will reload the main page with the deleted details, The page at localhosti65463 says: 11. On the press of Ok button, the page will be re-loaded with the modified details. 12. The Delete operation is complete. On the press of the cancel button we will close the dialog box by adding the below in the controller js cel Actich sero ssetcore() bye Dialot.tloe( 3.1.5 Create button for Data Creation 1. We will place a button “Create New Employee” in the dashboard and by this we will see the creation of a new employee. Go to view.js where we will create button Submit, Save. We will add the Save button to the Dialog box. hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-us-application-forthe-basic-cud-operation’ 25167arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UI Application forthe basic CRUD Operation | SAP Blogs TEAR IHRE < ‘exe “Creste ter exployee", oy eg raed [ otoretollen Save, ocentrotier J ea{{eenestenter tap 24(aust bes ranber)*D)y ev subse input bel((tents*Enter Address"), Soe xengets 30, far Saterese™ bel (tents"Enter SesSenation"), Protein, cbeoet cerca, ts De 2, We will add the button Submit button to the main dashboard as below. swe. oftters = nulls Table binditess(."/results",teeplate, mull, offlters); 2 3. Further we will go to controller:js to do the action for the “Create New Employee”. We will use the same dialog box, we have already created for the modify operation. We will hide the “Save” button it we will hide the “Update”, “Delete” button. the modify operation and while creation, hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-us-applicaion-forthe-basic-cud-operation’ 26167arias v7.98 ‘Simple Exercise on OData and SAP UIS Application forthe basic CRUD Operation | SAP Blogs HteaPress: function(evt) { getCore().byId{"Dislog™).open(); 2 dote( true); etvisible( true), Follow oselectadzten = evt.getvarameter(“Listiten"); var 510 = oselectedrten.getOindingtontext() get>roperty(“eepie"): vw Like Nar these © ebeleceeaitos-geceindtogceneees() petrropersi{aeprece i War shdir + oSelectediten getfindingContert() getProperty(ceepadd’); Sir hole = oSelecteaiten pettindingContent() getOroperty(-enpdes"); sap-ui .getCore().byT4("1d").setvalue(s1D); 3) RSS Feed s0p.ui.getCore().byla("None”).setValue stare) ; sap.ui.getcore().byla("Address").setvalue(siddr); sap ui. getcore().bylo( Role”) .setvalue(sRole) ; gap.ui getCore().byle("Id"). setenabled( false); h 4, Re-run the application to see the new button “Create New Employee” visible in the main page and on the press of the button, a dialog box with the employee details can be added. 5. While press on the save, nothing will happen as we are yet to write the function for the "Save" action. Go to the controller,js, where we can define the action for the “Save” button. hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operation’ 27167arias v7.98 ‘Simple Exercise on ODala and SAP UI Application forthe basic CRUD Operation | SAP Blogs var cerry = (3: Pap. eter) 0/2412) peony Follow Like 3) RSS Feed uaction(dare comet) steeechaploybe ranted Sceenefly"): a fenetiorier) tert toployee coestion rates") ps d, Merscecere) SS ns ae Meet trrer in sees auest * 9 remuest + capone * + reponse ps 6. GET in the OData call is used to fetch the X-CSRF token, Once the token is fetched, it act as an authentication to do the further Create(POST) operation. Note: You need a CSRF token to be fetched to perform the Modify/Insert operation. To know more about the CSRF token diick here, Re-run the application to test the Create operation. 7. On the success, we will reload the main page with the newly created details hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cus-operation’ 28167arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on OData and SAP UI Application or the basic CRUD Operation | SAP Blogs x The page at localhost65463 says: 8. On the press of Ok button, the page has been re-loaded with the newly created details, ‘The Create operation is complete. By then we have completed all the basic CRUD operations 4. Source code used The source code used in this project is also given as a reference here. Indexshtml rea meapeeuleeut-cmpribte”cantenterteede> cevipt sneeraccurces/ap ut care.se* sp. loca lessurces (nore) a0 ape = new Sapte iotatPages “treats or poet = Sopot ovew(Sa:"tagoetasst”, vewhoes enero. reas, ‘ype: sap. ut cores ave.vetye 8195 op. ateage age); hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 29167arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs op. placate corte saps seven engers este ¢ reneroF epcr.npat ats etantollentane + faneton() 1 feemerofegcru.cnsetstle evemeonent + fanettonocorteation ¢ Page = ne sn. 40 »: ar ottrpd = nw rap. tte apt texts “ante ‘oot [ oantrttentpiote, scotrtter Ds to! | ocantrotte. cole soncrotter | ms var obtecan + new sapnstbton Cancel”, sao: [ otantrtier cancel strate] Ds or obtrsub = no eap.m batten "Sibao", hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs Ds or oberSay = na sap.n button Soe" { tao: [ otantrtter save, ofontration J Ds corte now sapeniabel{ {tester tp Taste 2 ume! DD oe sspuntopt votergtn: 2, » ert ftent"Eter ere", new spam sop soxtengtn 38 De ue apa (toes "Ener arene D), ow sap tabel{ (tots "Ener dessgtion we apap uotteun oboe, obtcan, opts var fable = nev sep.n tbe ‘etrene + ( ocanrollen.tenoresocoreler J, cole: ( oe apn catun(t ears nso. esatene tee “te now sapencatun(t hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 31167arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs texts one 9 » Follow ev ap. Like tere hrs » » 3) RSS Feed ev ap. tees “essgntionn » » ) » ar tenpate new saps. Cohan sstten cons: ¢ nee sapiecabentrib ¢ eet: pte)” » sents “(eran » nee super cabett torts sy" » cage adeonters tobe); eae adecontert 800 ? hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 3267arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs EmpDetails.controller.js sap usscontrlen(npenu.Empaetatle®, “canted oon» controle 4 dutatlotad ad ts Wo contre (Af svatable) ae alresy cesta + pranaerf exper. tptetais onde: fanctend) ar sServiceir = Shts/ehest rons seen"): sap sk.getcarl) bys nress) setnbet"); sp. etcret)y2d(ole) setae) sap. gotcret).by4(Te") set eabed(ve); » seve: funetlond { var seeery = 05 etry ple 280. getorl) aya) gett; trypan sap.estcret) hyd Mone). getaae() etry sngndte so. wtCoret) byateress) geval}: try ngs so. 0hgtCoret) oye ole".aetlue: ossta.resese(( sucess: “netps// eat nme :gort #09 /opfacsa/s9/2M SHY Eployeeser", menses +f esequestedeaen” + Houten, , hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 34167arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs » anctionaata,eespnce) neser_car/ taken « reponse testers socor(toke' J: "accept ¢ appheatton ssn’, % czas. ressst tenctionsata,roquest) ere (eploy Coated Suceestuby"}s ocak ion. render) » fevetionterr) slert(tpioye creation Fath"): de fantiontrn) ¢ sleterirror In Get — Request + newest +" fesprst 4 resgenseh: be Updates fenctint) se otntey = 0 eney ode sap getcore)byT4Te").getvatues tnt trnames sap teCore) byt ae") etal: tnt toate sap getore) bya aciress) gestae: ctney trodess sap. getor() bya le") ptieue(): coats. recast eaters vechsuestesonth : onuiptenest", scomenttype ¢ “appltestion stone", » fanetionesta, vesnee) | reader ter_otan = resgance. ease carat’ J var oheaars = ( hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 35167arias v7.98 Follow Like 3) RSS Feed ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs Saecee? + “appleaton/ jon, » ata. reuest rosa oesta spf. she/eaployesec "sot ape"), ) ‘functontatayreciest) start rpdte secese: d fanesiontsrr) suet rupste Fs » 2 famertonters) ¢ sterqserrar sn cat = Seqsst 4 raguest + © Response Deete: fnctiont) var seeery = 05 sal gore) yet) grat}: cmatacreest(t reqestrd + “yetpsl/ ost nes spore 0) /sep/oplodtal som SHV /eptoyeser(™ + nheunetaenie = omatpsagcet™, ? fanceton(cot, response) ( reaaer_carf taken « sorpone tears cer Ftato' 5 ar oheners = ¢ ‘accept ¢ “appeation/$eon', sats. racuet( hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 36167arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs onsite atm si aloe May a, Follow Like danaeetry roves) 3) RSS Feed reales sce decent ern teeters) ¢ recite Fst Ds >, feciontr Ws » cane stencton( tart tyd-atog tee) , » Alert Moderator Assigned Tags SAPUIS hitps:ologs.sap.com/2015/02/05Isimple-exercise-on-odata-and-sap-uis-applicaionforthe-basic-cus-operaton’ 37167arias v7.98 ‘Simple Exercise on ODala and SAP UIS Application forthe basic CRUD Operation | SAP Blogs SAP Enterprise Portal pRUDIdpdkiksons usirlg Odata Model (XSODATA) in SAP UIS By Former Member Aug 5, 2016 baPbik sus Stucio JExtension By Former Member Sep 21, 2014 Attachment delete and rename operation in SAP UI5 By Former Member Jun 26, 2015 Related Questions V Minimum system component requirment for a custom ui5 application. By Former Member Dec 18, 2015 In View Controller: OData is not defined By Former Member Sep 19, 2016 SAP UI5 - Read SOK rows from Excel in SAP UI5 and Upload to SAP Backend using Odata By Nehit Gurubaxani Jan 29, 2019 Join the Conversation a sap SAP Teched ‘Tune in for tech talk. Stay for inspiration. Upskill your future. = SAP BTP Learning Group SAP Business Technology Platform Learning Journeys. + Coffee Corner & Join the new Coffee Corner Discussion Group. 68 Comments hitps:ologs.sap.com/2015/02/05isimple-exercise-on-odata-and-sap-uis-applicationforthe-basic-cud-operation’ 38167