Spend Management Blogs by SAP
Stay current on SAP Ariba for direct and indirect spend, SAP Fieldglass for workforce management, and SAP Concur for travel and expense with blog posts by SAP.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

former_member680688
Participant
‎2022 Sep 10 3:12 AM
1,174
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

 

Part 5: Ariba Requisitions Fiori Application


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 48


 

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


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 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 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 52


 

On New Project From Template Screen,

  1. Select SAP Fiori application

  2. Click on Start to go to the Floorplan Selection screen



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 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 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 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 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 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 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 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 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 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 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 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 65


 

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


Picture 66


 

Next In Series


Part 6: Central Fiori Launchpad Setup

 
1 Comment
Popular Blog Posts