WIXLIB

SAP Web IDEHow-To GuideProvided by Customer Experience GroupHow to Extend a Fiori Application: Purchase OrderApprovalApplicable Releases:SAP Web IDE 1.4Version 2.0 - October 2014

Extend a Fiori Application: Purchase Order ApprovalDocument HistoryDocument VersionAuthored ByDescription1.0Customer ExperienceGroupFirst release of this guide2.0Customer ExperienceGroupUpdate for SAP Web IDE release 1.42

Extend a Fiori Application: Purchase Order ApprovalTABLE OF CONTENTS1.Business Scenario . 42.Background Information . 43.Prerequisites . 44. Step-by-Step Procedure . 54.1Start creating a new EXTENSION Project . 54.2Select Purchase Order Approval app from SAP Gateway . 64.3Extend the app by hiding an existing control . 114.4Extend the app by adding a new UI field to an extension point . 134.5Extend the app by replacing a view . 184.6Extend the existing OData service in Gateway Service Builder . 234.7Replace the OData Service by an extended OData Service . 234.8Extend the data model using the EDMX editor, then add a reference to the new dataproperty in the UI logic . 284.9Deploy the application to SAP Gateway . 334.10Verify successful deployment of the app . 363

Extend a Fiori Application: Purchase Order Approval1.BUSINESS SCENARIOSAP Web IDE is a next-generation cloud-based meeting space where multiple project stakeholderscan work together from a common web interface -- connecting to the same shared repository withvirtually no setup required. It includes multiple interactive features that allow you to collaborate withyour colleagues and accelerate the development of your HTML5/UI5 applications.2.BACKGROUND INFORMATIONIn this How-To Guide, we will show you how to extend a standard SAP Fiori application using a SAPWeb IDE. The different possibilities of extending a Fiori app view are shown (hide a control, extend byimplementing an extension point, replace a view, replace a service.3.PREREQUISITESTo connect to your SAP Web IDE system, open the browser and enter the URL of your system.4

Extend a Fiori Application: Purchase Order Approval4.STEP-BY-STEP PROCEDUREThe following major steps will be described in detail step-by-step with screenshots for every step.1.2.3.4.5.6.Start creating a new extension projectSelect Purchase Order Approval app from SAP Gateway (GM0)Extend the app by hiding an existing controlExtend the app by adding a new UI field to an extension pointExtend the app by replacing a viewOPTIONAL - Go into the Gateway Service Builder and show how to extend the existing ODataservice (separate document by Andre Fischer)7. OPTIONAL - Replace the OData Service by an extended OData Service (assuming the existingOData Service has been modified by adding a new field)8. OPTIONAL - (if OData Service replacement is not shown) - For demo purposes, extend thedata model using the EDMX editor, then add a reference to the new data property in the UIlogic9. Run the application with mock data10. Deploy the application back to SAPUI5 ABAP Repository11. Verify that the app is deployed by importing the app from SAP Gateway to SAP Web IDE4.1Start creating a new EXTENSION ProjectExplanationScreenshot1. Start SAP Web IDE from yourbrowser.2. Click on Local folder and startby creating a new extensionproject(File New ExtensionProject)5

Extend a Fiori Application: Purchase Order Approval4.2Select Purchase Order Approval app from SAP GatewayExplanationScreenshot1. From step 1 in the wizard,click Remote., and selectSAPUI5 ABAP Repository toaccess the remote SAPGateway system which hasthe standard SAP Fiori POApproval applicationdeployed.2. In the Select Application fromSAPUI5 ABAP Repositorydialog, select the SAPGateway System GM0 (GM0Client 200).3. All available applications onGM0 are shown.6

Extend a Fiori Application: Purchase Order Approval4. Search for "purchase" toshow search and filtercapabilities5. Select MM PO APV ApprovePurchase Orders and clickOK.7

Extend a Fiori Application: Purchase Order Approval6. You may change theproposed project name to e.g.POApprovalExtended or leaveit as proposed by SAP WebIDE‘MM PO APVExtension’Then click Next.7. Click Finish. An extensionproject is created in yourworkspace.8. If authentication is required,enter User Name and PW forthe SAP Gateway system.8

Extend a Fiori Application: Purchase Order Approval9. The application PreviewPane automatically opens inPreview Mode. Once theapplication is loaded and thedata has been fetched fromthe backend, you can see thatthe application is fully running.10. Explore the features of thepreview.a. Display the app in thedifferent screen sizesb. When in Small size,change the orientationc. At the end, go back toLarge or Medium size9

Extend a Fiori Application: Purchase Order Approval11. In the application Outline,select the Show propertyExtensible Elements in thedrop down list12. Toggle to Extensibility Modeby clicking Preview Modedown arrow. Notice that theapp gets a shadow.Hover the mouse of thecontrols in the app. Noticehow views are highlighted andthe scrolling occursautomatically.10

Extend a Fiori Application: Purchase Order Approval4.3Extend the app by hiding an existing controlExplanationScreenshot1. In the app, navigate to theview S4 by scrolling down inthe detail view until you seethe Items table, click on anitem.Note: You may need totoggle off Extensibility Mode,because in Extensibility Modeyou cannot navigate to otherviews.2. We are going to hide thePricing Conditions in the viewS4.Make sure you are inExtensibility Mode.Select the Pricing Condition atthe bottom of the view. Tohighlight the control you needto point the mouse pointer tothe right or left side of thetable.Alternatively, you may selectin the Outline thePricingCondTable under S4.3. Select Hide Control in thedrop-down of PossibleExtensions and click OK tohide it - busy indicatorappears, followed by a popupmessage saying the extensionwas added successfully.Alternatively, you can rightclick on PricingCondTable inthe Outline and select HideControl11

Extend a Fiori Application: Purchase Order Approval4. A pop-up window appears toindicate that the control issuccessfully hidden. ClickYes to refresh the application.5. Navigate to S4 view and showthe control was hidden6. In Outline section, underShow field, drop down toselect Extended Elements.Now, you can see that underS4 elementPricingCondTable is listedas Hidden.7. Close the Extensibility Paneby clicking on the X on the topright12

Extend a Fiori Application: Purchase Order Approval4.4Extend the app by adding a new UI field to an extension pointExplanationScreenshot1. Highlight the application folderand start the ExtensibilityPane (Tools ExtensibilityPane or Ctrl-Shift-E) if notdone yet.2. In the application Outlinesection, select the Showproperty ExtensibleElements in the drop downlist13

Extend a Fiori Application: Purchase Order Approval3. Expand S2 view in the Outlineand select the extension pointextListItemInfo4. Check that the possibleextension at the bottom of theApplication Outline showsExtend View and click OK.14

Extend a Fiori Application: Purchase Order Approval5. Show that the extension pointwas successfully extendedand click Yes to refresh theapplication6. Check to see that the elementextListItemInfo displays(Extended). Select it andclick Go to Code, ExtensionCode at the bottom.15

Extend a Fiori Application: Purchase Order Approval7. You are redirected back to theCode Editor and thegenerated extension fragmentfile is opened8. Paste the following code: ObjectAttributetext "{i18n / 9. The filename has a prefixed *to indicate that the file hasbeen edited and not saved.Click Save.10. Run the app in theExtensibility Pane (Tools Extensibility Pane)11. You can now see the addedpurchase order number andthe label in English. The valueof the purchase order hasbeen fetched from thebackend.Check the detail view to verifythe same purchase ordernumber.16

Extend a Fiori Application: Purchase Order Approval12. In the top bar, click on thedown arrow next to thelanguage English. Selectanother language, e.g.French.13. Show that the language of thelabel has changed accordingto the language selected14. Repeat for other languages.At the end, you may go backto English.17

Extend a Fiori Application: Purchase Order Approval4.5Extend the app by replacing a viewExplanationScreenshot1. Select S3 view (detail view) inthe Outline.Notice the icon tab bar andremember the number oficons you can see. In the caseof the screenshot, there are 2icons (information and notes).Other POs may have othericons shown, depending onthe PO data.2. Select Replace with a copyof the parent view in thedrop-down of PossibleExtensions. Click OK.18

Extend a Fiori Application: Purchase Order Approval3. On the success message,click No. There is no need torefresh the application at thismoment, as we want to applysome changes to the code.4. Check the application Outlineto validate that the S3 viewnow has the indication of(Replaced with S3Custom)19

Extend a Fiori Application: Purchase Order Approval5. Select S3 view in theOutline (if not alreadyselected) and click Go toCode at the bottom.You are redirected back tothe Code Editor and thecopied view file opens.6. You are redirected back to theCode Editor and the copiedview file opens.7. We will be adding more icontabs to the tab bar. The fileon the right contains theextension we want to apply.Open the file and copy thecode.ViewReplacementCode.xml.txt20

Extend a Fiori Application: Purchase Order Approval8. Paste the code to theS3Custom.view.xml file asfollow:At line 31, you can findmultiple IconTabFilter items.Paste all the code before the IconTabFilter items.9. Click Save to save the file.10. Select index.html, click Runto run the app.21

Extend a Fiori Application: Purchase Order Approval11. Show the result.In this particular PO, we have2 additional icons that havebeen added.At the end, you may close theApplication Preview browsertab.22

Extend a Fiori Application: Purchase Order Approval4.6Extend the existing OData service in Gateway Service Builder(These steps are described in the guide “Creating a ‘Fiori Like’ Application - SO Tracking”)4.7Replace the OData Service by an extended OData ServiceExplanationScreenshot1. Select your project folder andstart a new wizard to replacethe service (File New Extension)2. Make sure the right projectname is displayed in the textfield. Click Next.23

Extend a Fiori Application: Purchase Order Approval3. Click on Replace Service toselect the OData Servicereplacing wizard, and thenclick Next.4. At wizard step 3 (DataConnection), click on ServiceCatalog to get all availableOData Services on the SAPGateway system.Click the drop down listand select the Gatewaysystem (GM0). The list ofOData Services is beingfetched.Scroll down the list todisplay all OData Servicesavailable on the Gatewaysystem selected.24

Extend a Fiori Application: Purchase Order Approval5. Search for "poapproval" todisplay search and filtercapabilities.Expand the OData Serviceand show defined datacollections for the ODataServiceZGBAPP POAPPROVAL DEMO SRV is shown here.Select the relevant ODataService,ZGBAPP POAPPROVAL DEMO SRV.6. Scroll down toWorkflowTaskCollectionand expand it25

Extend a Fiori Application: Purchase Order Approval7. Scroll down to the end of theWorkflowTaskCollection andshow that the new fieldDemoExtension has beenadded8. Go back up to the list, selectZGBAPP POAPPROVAL DEMO SRVand click Next.9. At wizard step 4, click Finishto confirm adding theextension.26

Extend a Fiori Application: Purchase Order Approval16. We will now add a text field tothe UI to display the extendedOData field.Double-click the fileextListInfoCustom.fragment.xml in the view folder.17. Paste the following code: ObjectAttribute text "ODataExtension: {DemoExtension}"/ 18. The filename has a prefixed *indicating the file has beenedited and not saved. Savethe file.19. Select the index.html fileand Run the application.20. You can now see the newOData field.27