Hello,
In this blog we will learn How to deploy the Ui5 Fiori app on SAP ABAP repository with BAS & WEBIDE, also learn about fiori app tile creation in launchpad designer.
What is SAP UI5
SAP ui5 is a framework, it consists of Libraries. Used for Creating responsive apps.
Fiori Launchpad
SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.
Fiori launchpad is responsive because it adapts the layout in the Device Screen.
Prerequisites
- User must have access to SAP Logon.
- User must have access of TCodes: SE80, /ui2/flp, /ui2/flpd_cust, /ui2/FLPD_CONF, /ui2/_FLPCM_CUST, /ui2/FLCM_CONF, /ui2/semobj, PFCG
- You access to SAP BTP co*ckpit.
Deploy the Fiori app using Business application Studio (BAS)
SAP Business application studio is a cloud based developer tool to develop UI based applications
Launch the BAS from Cloud co*ckpit
2. Select your desired project –> open the Terminal –> Go to the Project Dir (cd project dir) –> run the command ‘npm run deploy-config’ or ‘npx fiori add deploy-config’.
3. Give the required information
Choose the Target --> ABAP
Select the Destination (If destination is not created, create a destination on SAP BTP co*ckpit)
Provide the SAPUI5 ABAP Repository Name and Description.
Provide the Package detail
Provide the Transport Request and execute the command "npm run deploy".
You will get a message "SAP UI5 Application has been uploaded and registered successfully".
4. Go to the given link and check the deployed fiori app
5. Now you will get the Fiori app on SAP system.
Deploy the Fiori app using WEBIDE
Go to the WEBIDE, right click on your project --> Select Deploy --> Choose your System (Deploy to SAPUi5 ABAP Repository)
2. You will be on next page (Deployment Option), Here select your required ABAP or Cloud system --> Next.
Note: If you are deploying first time, select Deploy a new application. Else application is already deployed, select update an existing application 
3. Provide application Name, Description, Package, in - Deploy a New Application Screen and select Next.
4. If the selected package is local, Choose Finish. If it requires TR, select TR for your application.
A notification message displays once the application is deployed successfully.
5. Go to SAP Logon Pad --> Tcode SE80 --> Select BSP Application from Dropdown --> find your deployed application.
Steps to create a Tile and Target mapping in Fiori launchpad Designer
Create Semantic Object using TCode - /n/ui2/semobj.
Click on Edit Button
Select New Entries.
Provide the new Semantic Object, Object Name and Description and Click on Save Button.
2. Go to SAP LogOn --> Execute the TCode - /ui2/FLPD_CUST (Launchpad Designer).
3. Click on Setting Button --> Select the TR --> choose Ok.
4. If catalog information is not available, create a catalog --> Click on Plus Button --> provide the required information --> click on Save.
5. If catalog already exist, select the catalog --> Click on Add tile plus Button.
6. Select a Tile template, here I am going to select App launcher - Static.
7. Provide the Title, information, Semantic Object, Action and other required Information Click on Save Button.
8. Create a Target Mapping à Go to Target Mapping à Click on Create Target Mapping.
9. Provide the required information Semantic Object, Action, Title, URL, ID and Click on Save Button.
Note: How to get URL --> Go to the WEBIDE --> your project --> manifest.json file --> Find the URL info.
How to get ID: Go to the WEBIDE --> your project --> manifest.json file --> find the ID.
10. The Fiori app tile has been created successfully. Go to Fiori launchpadv --> App Finder --> Search your application.
10. The Fiori app tile has been created successfully. Go to Fiori launchpadv --> App Finder --> Search your application.Note: If Fiori app is not found on Fiori Launchpad à we have to assign the PFCG Role for catalog and contact security team to assign the Role.
Conclusion
The Fiori app has been deployed on SAP ABAP repository. The Fiori app tile has been created.
With this we come to an end of this blog. Hope you find it useful.
Keep learning & Keep Sharing!!
