Deploying SAP UI5 Application / Fiori Application &

SAP FIORI LAUNCHPAD CONFOGURATION

Deploying SAP UI5 Application from Eclipse to SAP
ABAP UI5 Repository:
Open Eclipse & right click your project and choose export & select
Archieve file under general category.
Browse & export to desktop & provide file name as .ZIP (i.e.
XYZ.ZIP ) then click on finish.
Open desktop and extract the zip file, after extracting automatically a
project folder is generated.
Now login to backend server(i.e. ECC server ABAP) and open tcode
SE38 & provide program name /UI5/UI5_REPOSITORY-
LOAD and execute the program.
Provide the SAP UI5 name & choose upload then execute
Browse to desktop & choose to project folder(which we have exported
from eclipse .zip file) .
Click on OK & scroll down & choose CLICK HERE TO UPLOAD , &
provide the description , package details then continue.
(Now the Application will be uploaded to BSP category)
We will get a security popup, just click on ALLOW(it will ask for each
& every file in your folder).
After uploading all the files will get the message as upload finished.

Note: Deployment for SAP UI5 Application from ECLIPSE is finished.

Deploying SAP FIORI Application from SAP WEB IDE

TOOL to SAP ABAP UI5 Repository:
Open SAP WEB IDE TOOL -> right click fiori project -> deploy -> deploy to
SAP UI5 ABAP REPOSITORY.
Choose system ID (collect from basis administrator) then deploy as new
application & click on next.
Provide application name & description & save it -> click on next & finish.

Note we can find our deployed UI5/FIORI application under ABAP REPOSITORY
server in below path:
Open SICF - TRANSACTION CODE
->/default_host/sap/bc/UI5_UI5/sap/ZApplnDeployed Appln name
Deploying SAP UI5 Application / Fiori Application &
SAP FIORI LAUNCHPAD CONFOGURATION

SAP FIORI LAUNCHPAD CONFIGURATION STEPS:

ECLIPSE TOOL SAP ABAP UI5 SAP
FIORI
REPOSITORY
LAUNCHPAD
UI Project
integrate
UI5 USER1(TABL
deploy APPLACATION ET)
UI5
APPLICATION

USER2(MOBILE
)

SAP WEB IDE TOOL

FIORI PROJECT
integrate
FIORI
APPLACATION
FIORI
D deploy USER3(DESKTO
APPLICATION
P)

Note: Any USER, any DEVICE who is having user credentials can
acces FIORI LAUNCHPAD

Procedure for Fiori Launchpad Integration:

Creating Launchpad Instance :-
Goto LPD_CUST Tcode
Click on NEW LAUNCHPAD
Provide ROLE = Zlaunchpad (name starts with Z or Y )
Deploying SAP UI5 Application / Fiori Application &
SAP FIORI LAUNCHPAD CONFOGURATION
Instance = TRANSACTIONAL
Description = Launchpad
Click on continue & click on Yes
Click on NEW APPLICATION
Provide link text = HCL Application
Provide Link description = HCL Application
Provide Application type = URL
URL = /sap/bc/UI5_UI5/sap/ZAppln
(Deployed appln name)
(Real time also same URL will be used only
deployed application name will be changed)

Click on SHOW ADVANCED(optional) parameters

provide Application Alias name = ZApplnalias
Click on SAVE.

Creating SEMANTIC object procedure: -

Open Transaction code /n/uiz/semobj
Click on change & click on continue
Click on NEW ENTRIES
Provide semantic object = zsemobj
Provide semantic obj name = zsemobj
Provide semantic obj description = semantic object
Click on save & save it in package

Creating Catalog:-
Open FIORI LAUNCHPAD Designer & use below link

http://stfiorisrvr.st.com:8000/sap/bc/ui5_ui5/sap/arsrvc_up
b_admin/main.html
Common path in real time also for opening FIORI LAUNCHPAD
Designer.

Click on + icon
Provide Catalog title = Zcatalog
Provide catalog ID = Zcatalog
Click on save .
Deploying SAP UI5 Application / Fiori Application &
SAP FIORI LAUNCHPAD CONFOGURATION
Target Mapping: -
Click on Traget mapping ICON
Click on create Target mapping
Provide semantic object = zsemobj
Provide action = display (provide as
per the req)
Provide Launchpad role = zLaunchpad(provide
Launchpad details)
Provide Launchpad instance = Transactional (provide
Launchpad details)
Provide Application Alias = Z30Aliasappln(provide
alias name as per req)
Choose Device types = DESKTOP , TABLET &
MOBILE .
Click on save & click on ok

TILE Creation:-
Click on TILES Icon
Click on + icon
Click on + of APP LAUNCHER STATIC option
Click on App Launcher - Static (which u have created)
Provide Title = Sreenu Bollapally (as per the req)
Provide subtitle = display (as per the req)
Click on save & click on OK.

GROUP Creation:-
Click on groups icon (on top section)
Click on + icon
Provide title = Z730sreenu
Deploying SAP UI5 Application / Fiori Application &
SAP FIORI LAUNCHPAD CONFOGURATION
Provide ID = Z730sreenu
Click on save

ADD CATELOG to GROUP:-

Click on + icon of your GROUP(which we have created in previous step)
Click on F4 (search) and search for your CATALOG = Z730CATALOG
Select & Continue and Click on + icon (ADD button)

Create PFCH Role for Catelog & Group:-

Log in to backend server (ECC Abap server)

Enter Tcode PFCG

Provide role name = Z730SREENU
Click on create single role & provide description Sreenu text5
Provide long text = Sreenu goud
Click on save
Click on menu tab
Click on transaction arrow (option & be careful while implementing)
Choose SAP FIORI TITLE CATALOG(from a arrow option becareful here
implementing )
Provide catalog ID = Z730catalog (implemented created catalod
id) & continue
Choose SAP FIORI TILE GROUP (from a arrow option becareful here
implementing )
Provide group id = Z730SREENU & click on continue

Assign role to user:-

Goto user tab & provide the user id (to whom u want)
Enter & save Server name

Connect to FIORI LAUNCHPAD for testing:-

http://stfiorisrvr.st.com.8000/sap/bc/ui5_ui5/ui5/
Deploying SAP UI5 Application / Fiori Application &
SAP FIORI LAUNCHPAD CONFOGURATION
ushell/shells/abap/fiorilaunchpad.html
log in with user id & password & test the appliactionCommon path in realtime
alsoendusers
Note : SAP FIORI LAUNCHPAD acts as a entry point for for opening
forsapofiori
launchpad
connecting to UI5 or FIORI Applications from any device based on role
assignment with user id & p/w.

USER 1 USER2
USER3

LAUNCHPAD ENTRY POINT

CATALOG TILE CATALOG TILE CATALOG TILE

APPLN 1 APPLN 2 APPLN 3

 Deploying SAP UI5 Application / Fiori Application &
SAP FIORI LAUNCHPAD CONFOGURATION
ACCESSBILITY TO FIORI LAUNCHPAD(UI5/FIORI
APPLICATION):-

BROWSER FIORILAUNCHPAD URL UI5/FIORI APPLN

DESKTO
P

FIORILAUNCHPAD UI5/FIORI APPLN

TABLET BROWSE URL
R

FIORILAUNCHPAD UI5/FIORI APPLN

BROWSE URL

MOBIL
E FIORILAUNCHPAD
MOBILE UI5/FIORI APPLN
URL
CLIENT

SAP THEME DESIGNER TOOL: -

SAP Provided standard themes We can create custom theme on gap of
standard theme using SAP theme
Designer tool
SAP_UX
SAP_BLUE CRYSTAL
SAP_GOLD REFLECTION
SAP_CHROME
SAP_HUB
Procedure: - open tool ->

http://stfiorisrvr.st.com:8000/sap/bc/theming/theme_desig
ner
select one of the standard theme ->click on open
provide the name & url of the application
click on ok
Deploying SAP UI5 Application / Fiori Application &
SAP FIORI LAUNCHPAD CONFOGURATION
now change background image/color/link color/.etc
click on save & build.

To apply custom theme to UI5/FIORI Application

Open Fiorilaunchpad, select user properties change theme to custom theme
(which we have created) & test
Note: In general theme contains appearance related properties like bgcolor,
bgimage, link color etc
Note: All frontend validations like email.id, mobile no, character length is a
number/string etc.
Refer W3SCHOOLS.COM