Extending a Fiori App and Uploading it to the Gateway
SAPUI5 Version: 1.28.31
Core Version: 1.28.30
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Web IDE Version: 160630
Gateway application Version: 1.8.7, build number 52
Web IDE Template Version: 1.4.0
Note: For steps 3-7, refer to the following document:
http://sapassets.edgesuite.net/sapcom/docs/2015/08/d2bc1629-5a7c-0010-82c7-eda71af511fa.pdf
1) Create an extension project in Wed IDE (see Week 6, Unit 2 from the openSAP course “Build Your Own SAP Fiori App in the Cloud”). Note: It helps to import the parent app so that you can view all the code and see where your extension code is being called. Also, it’s a good idea to copy the i18n folder into your extension so that you don’t have to create one in SE80 (see step 13).
2) Export the project to your desktop by choosing “Export” from the project context menu.
3) Import the webapp folder from your zip file to SGW using /UI5/UI5_REPOSITORY_LOAD (section 1.1 of document).
4) View your app in SE80/BSP Applications:
5) Create or Edit the appropriate Launchpad entry in LPD_CUST (section 1.2 of document):
6) Create a semantic object in /UI2/SEMOBJ (section 1.3 of document).
7) In Fiori Launchpad Designer (https://yourserver/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html), choose the appropriate catalog and add a new target mapping to it:
A.Click on Catalogs tab at top left and choose the catalog you want by clicking on it once:
B. Click on the Target Mappings icon
C. At the bottom of the screen, click on “Create Target Mapping”:
D. You will see the following screen:
E.Choose your Semantic Object from the search help:
F. Use a simple word to describe the type of action your app will perform (e.g. display, create, manage).
G. Choose SAPUI5 Fiori App for the source of your navigation target.
H. Create a title for your App.
I. Input the URL for your app as: /sap/bc/ui5_ui5/sap/your_app_name. Note: your_app_name should be the lower case version of your app in SE80.
J. Input the Component for your app as found in the declare statement of your Component.js (e.g. hcm.myleaverequest.hcmmyleaverequestExtension).
K. The page should look something like this:
L. Click Save.
😎 Add a new tile to the catalog:
A. Click on the Tiles icon.
B. Click on the blank tile with the “+” sign in it:
C. Click on the App Launcher # Static tile:
D. Fill out the title and subtitle for your tile and choose an icon (if you like).
E. Check the box for “Use semantic object navigation”.
F. Choose your semantic object from the search help and enter your action. Your page should look something like this:
G. Click Save.
9) Optional: add the tile to a Group (section 1.4 of document).
10) (Note: If you need to create a new catalog, create a new role in PFCG and add appropriate unames to the role (section 1.5 of document).)
11) In SE80, edit the bootstrap path in the index.html and visual_ext_index.html files to reflect the path for ushell in sicf (/sap/bc/ui5_ui5/ui2/ushell/bootstrap/sandbox.js).
12) In SE80, in the Component.js file, change the url definition in sap.ui.component.load to reflect the path of the parent app as defined in sicf (e.g. url: "/sap/bc/ui5_ui5/sap/hcm_lrq_cre"});).
13) If there is no Page Fragment folder called i18n, the app title in the browser tab for the extended app will show as the fieldname for the app title as defined in i18n.properties of the parent. To fix this, create a new Page Fragment where Page = i18n /i18n.properties and add the following code to it:
#XTIT: Application NAME (shown in browser header bar or as browser tab TITLE)
parent app fieldname=your app name
e.g. for MyLeaveRequest, the code would be:
#XTIT: Application NAME (shown in browser header bar or as browser tab TITLE)
app.Identity=My Leave Requests
e.g. for MyBenefits, the code would be:
#XTIT: Application NAME (shown in browser header bar or as browser tab TITLE)
MB_APP_TITLE=My Benefits
- SAP Managed Tags:
1 Comment
