Basic Fiori Customization App and Launchpad Configuration
Knowledge Exchange
For Basic Fiori Customization App and Launchpad Configuration
By Thanapuet Kaewmanee
27 NOV 2020
Content
1. Prepare the tools and configuration
2. Create SAPUI5 application using WebIDE
3. Configuration neo-app.json
4. Run the application on localhost
5. Deploy SapUI5 application to ABAP repositories
6. Import SapUI5 application from ABAP repositories
7. Fiori launchpad configuration (Catalogs/Groups/Roles)
8. Run the application on Fiori launchpad
1. Prepare the tools and configuration
1.1 Download WebIDE personal edition.
Form https://tools.hana.ondemand.com/#sapui5
1.2 Extract the folder to your machine and start application
a. Go to “WebIDE_Folder\eclipse” and run orion.exe
b. Run http://localhost:8080/webide/index.html
- 3 Create your account the 1st time.
- 4 Log in to your WebIDE
- 5 Configuration WebIDE to know you’re a. destination system.
Destination files are used for deployment destination and/or developer run testing environment.
b. Go to “WebIDE_Folder \eclipse\config_master\service.destinations\destinations” and drop your destination files.
Example
Description=S4D
Type=HTTP
TrustAll=true
Authentication=BasicAuthentication
Name=S4D
ProxyType=Internet
URL=http://yourdomainname.net:8000
WebIDEUsage=odata_abap,odata_gen,bsp_execute_abap,ui5_execute_abap,dev_abap
WebIDESystem=S4D
WebIDEEnabled=true
sap-client=100
2. Create SAPUI5 application using WebIDE
2.1 Create a new project.
a. right click on “Workspace” select “New>Project from Template”
2.2 Select category and type of application.
- for this example, we choose the SAPUI5 Application to start the initial project.
2.3 Specify the project name and namespace.
* Project name and namespace will concatenate to be app id.
App id = sap.ui.demoZ_DEMO_01
2.4 Initial view type and view name and click finish.
Recommend:
View Type: XML
3. Configuration neo-app.json
3.1 neo-app.json use to specify that where the destination resource (UI5 resource and oData) that you want to use in the test environment.
Example:
{
“path”: “/sap/opu/odata”,
“target”: {
“type”: “destination”,
“name”: “S4D_300”,
“entryPath”: “/sap/opu/odata”
},
“description”: “S4D_300”
},
{
“path”: “/sap/bc/ui5_ui5”,
“target”: {
“type”: “destination”,
“name”: “S4D_300”,
“entryPath”: “/sap/bc/ui5_ui5”
},
“description”: “S4D_300”
}
4. Run the application on localhost
4.1 Run your first app by right click on the project and select “Run>Run as>SAP Fiori Launchpad Sandbox”
“When you want to see something that change may you run it on local to reduce the time that you spent for deploy to the development system every time”.
5. Deploy SapUI5 application to ABAP repositories
5.1 Right-click on the project and click “Deploy>Deploy to SAPUI5 ABAP Repository”
5.1 Choose your system for deployment.
a. for the system list from the destination files that store in the destination configuration in WebIDE please ensure that you choose the development system/client.
b. Deployment options in case you deploy for the existing application choose “Update an existing application” and for the first-time deployment for new application choose “Deploy a new application”.
c. specify your account to access the backend server.
d. then clicks “Next”
5.2 Specify name, description, and package and then click “Next.
“In case you select the package that not local component system will require transport request for your change in repository”
5.3 Final step click on “Finish” to deploy the application to SAPUI5 ABAP Repository.
You can see your SAPUI5 project in SE80>BSP Application
Please remember you need to activate the Sapui5 service in SICF for the first time.
6. Import SapUI5 application from ABAP repositories
6.1 In case you need to change the existing project you can use the “Import” menu.
a. “From file System” use when you need to add the local project to your WebIDE tools.
b. “Application from SAPUI5 ABAP Repository” use when you need to syn the SAPUI5 project on the ABAP Repository server.
“The Import feature use only to customize an application for the standard application use enhancement feature”
6.2 I have selected “Application from SAPUI5 ABAP Repository” to show the way to syn the customize application from the ABAP repository.
a. chooses your development system.
b. specifies the name of the sapui5 application (BSP Application) then click “OK”.
7. Fiori launchpad configuration (Catalogs/Groups/Roles)
“The 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.
The launchpad is the entry point to SAP Fiori apps on mobile and desktop devices.”
7.1 Example of Fiori launchpad desktop.
a. for the desktop you can find your Fiori launchpad by run t-code “/ui2/flp” on your Fiori frontend system. And for mobile you can run by download “SAP FIORI” on your market place platform.
7.2 Fiori launchpad configuration require the catalog and group maintain for manage the group of application and navigation (Use t-code “/UI2/FLPD_CUST” for access Fiori launchpad configuration).
a. Create Semantic object by T-code “/UI2/SEMOBJ”
b. Create a catalog by click on (+) and specify catalog id and name.
c. Create target mapping.
d. Create tile
e. Create a group by select the group tab and create a new group (+) and add a tile that you have to create in the catalog.
7.2 Create the roles by T-code “PFCG” and add Sapui5 Catalog and Sapui5 Group and then assign to user
8. Run the application on Fiori launchpad
8.1 After you finished step 7.2 and go running the Fiori launchpad you will see the group that you were assigned
Enjoy your Application…
