Skip to Content

In a SAPUI5/OpenUI5 session at SAP Inside Track 2015 Frankfurt (btw a great event) I created a Fiori Edition of the UI5 Boilerplate, which can be integrated in the famous SAP Fiori Launchpad. Although this was a live coding session, you can have a look at the slides to get an idea of the necessary modifications on the original classic UI5 Boilerplate.

If you want to integrate custom apps in the Fiori Launchpad (FLP), you need to fulfil various requirements like using a self-containing UI Component, instead of usage of global EventBus the EventBus of the Component, no global Id’s to name only some important. The UI5 Boilerplate Fiori Edition was created to meet this requirement (source can be found on GitHub). So the logical step is now to demonstrate how to integrate the UI5BP into the Fiori Launchpad.

Luckily the Fiori Lauchpad is now available on the HANA Cloud Platform (HCP) and also for HCP Trial Accounts, so everybody can test and use it. For more infos please see http://scn.sap.com/community/fiori/blog/2015/03/18/flpfiori-launchpad-on-hcphana-cloud-platform. For the following we assume you have the FLP configured, up & runnning and the SAP Web IDE enabled (see http://scn.sap.com/docs/DOC-55465 for more infos) on your HANA Cloud Platform Trial Account.

Step 1: Get UI5 Boilerplate Fiori with SAP Web IDE from GitHub

As the SAP Web IDE is the tool to deploy all the HTML5 cloud stuff, we will use it. So start the SAP Web IDE and select from the menu: File -> Git -> Clone Repository:

UI5BP-01-CloneGit.png

Enter as URL the https clone url from the GutHub Repo of the UI5 Boilerplate Fiori:

https://github.com/6of5/UI5-Boilerplate-Fiori.git

UI5BP-02-CloneGit2.png

and press the OK button. On success you should see the following message in the log screen (on the bottom on the right side):

UI5BP-03-CloneGitSucess.png

now the source of the UI5BP is imported in the Web IDE and you should see a new project “UI5-Boilerplate-Fiori” with the following file structure:

UI5BP-05-FileStructure.png

As the project is now linked to the Git repo of GitHub and all the HTML5 apps in HCP have their own Git Repo on HCP we have to use a gimmick to be able to deploy the boilerplate as HCP HTML5 App. As long as the project is linked to another repo, it cannot be deployed to HCP. So we need to create a new project and copy the content of GitHub based UI5BP into it (if there is any better “solution” I love to hear about it). So first we create a new project folder:

UI5BP-06-1CreateFolder.png

Lets call it “UI5BP-Fiori”:

UI5BP-06-NewFolder.png

we have now two project folders:

UI5BP-07-SecondFolder.png

We need to copy each folder and each file (in the root) of the project “UI5-Boilerplate-Fiori” with Ctrl-C (copy) and paste it in the new project “UI5BP-Fiori” with CtrL-V (paste):

UI5BP-08-Copy-png.pngUI5BP-09-Paste.png

as result we should have the same structure and files in the the new project:

UI5BP-10-NewUI5BPFiori.png

Now we are ready to deploy the app as HTML5 App on the HANA Cloud Platform  and integrate it into the Fiori Launchpad.

Step 2: Deploy to HCP and Integration into HCP Fiori Launchpad

In this step we deploy the UI5BP as HTML5 App on the HCP. For this mark the root folder of the new project “UI5BP-Fiori” and select from the context menu: Deploy -> Deploy to SAP HANA Cloud Platform:

UI5BP-11-Deploy2HCP.png

Enter your password and press Login (Account and User should be already filled):

UI5BP-12-LoginHCP.png

In the next form enter as Application Name “ui5boilerplatefiori” (or something else, but it needs to be lowercase without any special characters). Define a version number (I choose here 0.8.2 as this is the current version of the boilerplate) and select “Create Version” and “Activate” and confirm by pressing the Deploy button:

UI5BP-13-AppVersion.png

If everything is ok, you get a success screen from which you can directly register you fresh deployed app on the SAP Fiori Launchpad (Please be sure that you have configured the FLP and have created a Category, Content Package and a Group and also your user is assigned to the FLP role):

UI5BP-14-HCPDeployed.png

Press now “Register to SAP Launchpad”. Enter an Application Name, Description and Sematic Object and Actions:

UI5BP-21-RegisterFLP1.png

Press Next. Now enter the information for the Tile (“Kachel”) on the FLP:

UI5BP-22-RegisterFLP2.png

Press again Next. Enter Category and Content Package:

UI5BP-23-RegisterFLP3.png

And again press Next to go the the confirmation screen:

UI5BP-24-RegisterFLP4-Finished.png

Now press Finish to start the integration into the FLP. On success you see the following:

UI5BP-25-RegisterFLP5-success.png

Click on the Link “SAP Fiori Launchpad” to go to the FLP:

UI5BP-30-FLP.png

Press the new Tile to start the UI5 Boilerplate Fiori as part of the SAP Fiori Launchpad:

UI5BP-31-UI5BP-Fiori-in-FLP.png

Have fun with UI5 and UI5 Boilerplate.

Related Info:

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Jhon Jairo Teran Salazar

    Hello HP Seitz, I really appreciate your effort to make such a great tool, it’s perfect for the project that I am starting now in openUI5 where I don’t have a SAP server, instead the apps are hosted on apache server in a Raspberry pi, because of that, I need an entry point like a Fiori Launchpad, but I would like to know if there is possible with this approach to have the apps created apart and calling them from this launchpad, instead of developing all the apps inside this app.

    Please if you think that this is possible, could you tell me some recommendation or tips to achieve this.

    Thanks for your help in advanced.

    Jhon Jairo Teran.

    (0) 

Leave a Reply