Deploy UI5 Boilerplate on Fiori Launchpad of HANA Cloud Platform

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:

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

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

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

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:

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:

Lets call it “UI5BP-Fiori”:

we have now two project folders:

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):

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

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:

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

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:

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):

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

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

Press again Next. Enter Category and Content Package:

And again press Next to go the the confirmation screen:

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

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

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

Have fun with UI5 and UI5 Boilerplate.

Related Info:

• GitHub Location of UI5 Boilerplate Fiori Edition
• Blog Post “sitFRA 2015 – Birthday of UI5BP Fiori Edition”
• Infos to original classical UI5 Boilerplate:
  • http://scn.sap.com/community/developer-center/front-end/blog/2014/02/01/ui5-boilerplate-explained-part-1
  • http://scn.sap.com/community/developer-center/front-end/blog/2014/11/23/launchpad-navigation-with-ui5-boilerplate
  • 6o5Wiki Page to UI5 Boilerplate