SAP Fiori Application To Display SAP Ariba Requisition Data – Part 5

This is part 5 of the 6 series blog. Please start with Part 1: Introduction to understand the Use case, Solution Architecture, High-Level functionality, and context of this blog series.

This blog series is divided into 6 parts:

Part 1: Introduction

Part 2: SAP Ariba – API Setup

Part 3: SAP Integration Suite – Integration Flows Build

Part 4: Ariba Requisitions Service Application

Part 5: Ariba Requisitions Fiori Application

Part 6: Central Fiori Launchpad Setup

Note: Fiori application built in this blog is ArbaReqsFA4-router. It is the same as the Ariba Requisitions Fiori Application depicted in the architecture diagram.

Build Ariba Requisitions Fiori Application (ArbaReqsFA4-router) Using SAP Business Application Studio

Create Multitarget Application Project

On SAP Business Application Studio,

  1. Click on the View menu
  2. Select Find Command… to bring up the command finder.

Picture%2048

Picture 48

On the Command finder, type Fiori: Open CF Application Router Generator and Click on enter to display the Application Router Generator screen.

Picture%2049

Picture 49

On the Application Router Generator screen, provide values as specified in the below tables and Click on Finish.

Step Field Name Value
1 Application router project path Leave the default value as shown
2 MTA ID ArbaReqFA4
3 MTA description A Fiori application for ariba reqs.
4 Add router module Managed Approuter
5 Finish Click on Finish button

Picture%2050

Picture 50

Note: ArbaReqsFA4 appears in the Projects pane. Wait for the notification The files has been generated appears at the right bottom of the screen.

Generate SAPUI5 Template-Based Application

On SAP Business Application Studio,

  1. Click on the View menu.
  2. Select Find Command… to bring up the command finder.

Picture%2051

Picture 51

On the Command finder, type SAP Business Application Studio: New Project from Template and Click on enter to display New Project From Template screen.

Picture%2052

Picture 52

On New Project From Template Screen,

  1. Select SAP Fiori application
  2. Click on Start to go to the Floorplan Selection screen

Picture%2053

Picture 53

On the Floorplan Selection screen, provide values as specified in the below tables and Click on Next.

Field Name Value
Application Type SAPUI5 freestyle
Which floorplan do you want to use? SAPUI5 Application
Next Click on Next button to display Data Source and Service Selection screen

Picture%2054

Picture 54

On Data Source and Service Selection screen, provide values as specified in the below tables and Click on Next.

Step Field Name Value
1 Data Source Connect to an OData Service
2 OData service URL

This is the URL of the BTP Service you deployed in BTP Service section.

https://<your value>-dev-arbareqs-srv.cfapps.us10.hana.ondemand.com/v2/catalog

Note: URL without the entity.

3 Next Click on Next button to display Entity Selection screen

Picture%2055

Picture 55

On the Entity Selection screen, provide values as specified in the below tables and click on Next.

Step Field Name Value
1 View Name arbarequisitions
2 Next Click on the Next button to display the Project Attributes screen

Picture%2056

Picture 56

On the Project Attributes screen, provide values as specified in the below tables and click on Next.

Step Field Name Value
1 Module Name arbarequisitions
2 Application Title Ariba Requisitions
3 Description A Fiori app for ariba reqs
4 Project folder path

/home/user/projects/ArbaReqsFA4

Note: This is the path to the ArbaReqsFA4 application router project created in the previous section

5 Add deployment configuration to MTA project Yes
6 Add FLP configuration Yes
7 Configure advanced options No
8 Next Click on the Next button to display the Deployment Configuration screen

Picture%2057

Picture 57

On the Deployment Configuration screen, provide values as specified in the below tables and click on Next.

Step Field Name Value
1 Please choose the target Cloud Foundry
2 Destination Name

CAPArbaReqsDest

Note: This is the destination created earlier in the BTP Destination section

3 Next Click on the Next button to display the Fiori Launchpad Configuration screen

Picture%2058

Picture 58

On the Fiori Launchpad Configuration screen, provide values as specified in the below tables and click on Finish.

Step Field Name Value
1 Semantic Object Object
2 Action display
3 Title Ariba Requisitions
4 Next Click on the Finish button to generate the Fiori project files in the ArbaReqFA4 directory

Picture%2059

Picture 59

Note: Wait until dependencies are generated and a message The project has been generated appears at the right bottom of the screen.

Layout Editor and UI Changes

In SAP Business Application Studio, perform the below steps in same sequenece.

  1. In the Projects panel, click on the ArbaReqsFA4 project to display the full project structure.
  2. Navigate to AribaRequisitions.view.xml file under ArbaReqsFA4 –> arbarequisitions –> webapp –> view directory.
    1. Right click on the AribaRequisitions.view.xml file
  3. Select Open With…
  4. Select Layout Editor
  5. Displays Layout Editor showing the empty canvas.

Picture%2060

Picture 60

On Layout Editor, perform the below steps in the same sequence

  1. Type “list” and press enter to get search results in the Controls pane.
  2. Select List from the search results.
  3. Drag and drop in the AribaRequisitions.view.xml canvas.
  4. Select Entity Set as /Requisition
  5. Bind Title to field UniqueName
  6. Bind Description to field Name

Picture%2061

Picture 61

Build and Deploy Ariba Requisitions Fiori Application Using SAP Business Technology Platform

On Explorer –> Projects pane,

  1. Select the ArbaReqsFA4 project to show the complete structure.
  2. Right click on mta.yaml file.
  3. Select Build MTA Project to start the build process. The build process creates a .mtar file that packages the project for deployment. Wait for the build process to complete and show a message saying MTA archive generated.
  4. ArbaReqsFA4_0.0.1.mtar file is created and saved in ArbaReqsFA4/mta_archives

Picture%2062

Picture 62

On Explorer –> Projects pane,

  1. Select the ArbaReqsFA4 project to show the complete project structure.
  2. Right click on ArbaReqsFA4_0.0.1.mtar file.
  3. Select Deploy MTA Archive to start the deployment process. Wait for the ‘Process finished’ message to appear in the Task: Deploy MTA Archive panel

At this point, the SAP Ariba Requisitions Fiori is deployed as an application in your BTP SubAccount –> Space with the name ArbaReqsFA4-router.

Picture%2063

Picture 63

Testing Ariba Requisitions Fiori Application (ArbaReqsFA4-router)

Go to the SubAccount and then to the Space where you deployed the ArbaReqsFA4-router application.

  1. Shows the list of all applications deployed to your SubbAccount –> Space
  2. Click on the ArbaReqsFA4-router to show ArbaReqsFA4-router – Overview screen

Picture%2064

Picture 64

On ArbaReqsFA4-router – Overview screen,

  1. Make sure the application is in Started status. (If not, use the Start button to start the application)
  2. Click on the Application Route link to open the application in a new browser window.

Picture%2065

Picture 65

You should see a new browser window with contents as below.

Picture%2066

Picture 66

Next In Series

Part 6: Central Fiori Launchpad Setup