Introduction

As you may all know, there is a new SAP Cloud Platform Programming Model for Fiori/HTML5 UIs, which is based on the new service of Fiori Stack covering different environments and integration into LoB Solutions. SAP Cloud Foundry provides also different services to support this new Programming Model. (E.g. HTML5 repository host and runtime, Portal Service, Connection Service, Destination Service) Also through the WebIDE, you can easily develop a UI5 app, which is following the Fiori Design Guidelines or config you own Fiori Launchpad on Cloud Foundry. In the following sections, I will let you know, how to build your first app, which is following this new programming model for Fiori/HTML5 UIs.

Overview

In this Blog, I will introduce, how to create a simple ui5 app and deploy it to the fiori launchpad on Cloud Foundry. We will go through the following steps to archive the goal.

1. prepare the webide to enable the fiori launchpad and Cloud Foundry plugins.
2. Create a multi-target project.
3. Add one simple ui5 app to the project.
4. Add fiori launchpad deployer to the project.
5. Build the multi-target project via webide.
6. Deploy the project to the cloudfoundry.

Step 1. prepare the webide

For develop the fiori ui5 app on cloudfoundry via webide, you need config your webide to enable the fiori launchpad plugin also you need config your cloudfoundry account for webide. To enanble the fiori launchpad plugin you need goto tools–>preference and click the features on the side panel and switch the toggle on as following img.

The next step you need click the ‘Cloud Foundry’ on the side panel you enter you API Endpoint and select your Organization and Space. After that click the ‘Install builder’ button as following img. Don’t forget to click ‘save’ button at the end.

Now all the preparation is done, we can move to next step to create our multi-target application.

step 2. create the multi-target application

Goto the file–>new–>project from template in the popup dialog select the tile of multi target application and click next. The in the next to steps you need give the basic information of your project (e.g. Project name, Application ID, Application Version) and please also select Use HTML5 Application Repository.

After the project is created you should see two folders under the your project as following img, The first one ‘DemoProject_appRouter’ is the approuter, the second one is the front-end deployer, which will deploy your front-end files to the html5 repository.

And now open the approuter folder, and select the xs-app.json edit it as following:

{
  "welcomeFile": "/cp.portal",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": []
}

Here we change the mainly the welcome file of the approuter to ‘cp.portal’, which is the default page of the fiori launchpad. After all that, we can start to create our simple ui5 app.

Step 3. create ui5 app

For adding the ui5 app to the project, right click the project and chose new–>html5 module, then you will have popup window for you to chose what kinda of template you want to chose for create your html5 application. Here I chose the simple SAPUI5 Application and give all the basic information for the app and click finish at the end of wizard.

Then under the project you will have a new folder for your html application as following:

And if you check the mta.yaml of the project, under the ui_deployer section you will see the following code:

  - name: DemoProject_ui_deployer
    type: com.sap.html5.application-content
    path: DemoProject_ui_deployer
    requires:
      - name: dt_DemoProject_ui_deployer
    build-parameters:
      requires:
        - name: demoProject
          artifacts:
            - './*'
          target-path: resources/demoProject

In the build-parameters section, you can see our new ui5 is already added as requirement for the ui_deployer. In that way, when we build the project, the ui5 app will be packaged into deployer, and in deploy phase, it will be deployed to the html5 repository.

As next step you need add crossNavigation section to the manifest.json of the ui5 app, it usually located under webapp folder. You can edit it by edit the json file, or you can edit it by the editor, which is provided by webide as following:

By the editor, you just click the navigation tab, and click the ‘+’ button, to add the Semantic Object and Action, here I simply use object1 and action1. After that you should see the following section in the mainifest.json and we can move to the next step:

		"crossNavigation": {
			"inbounds": {
				"intent1": {
					"signature": {
						"parameters": {},
						"additionalParameters": "allowed"
					},
					"semanticObject": "object1",
					"action": "action1"
				}
			}
		}

Step 4. Add Fiori Launchpad module to the project

You can add fiori launchpad module by right click the project and chose new–>SAP fiori Launchpad Site Module. By the popup window you can give the basic information about you launchpad module, here I called simply FLP. After you click the ‘finish’ button you will see a folder called ‘FLP’ under your project folder.

And now you can add our ui5 app to the fiori launchpad module, by chose the CommonDataModel.json. Here again you can chose edit the json file directly or use the editor, which is provided by webide. By use the webide editor, you can simply click the ‘+’ button and chose the application, which is displayed in the popup window.

After you click the ‘select’ button, you will see the following code in the CommonDataModel.json:

		"groups": [{
			"_version": "2.0",
			"identification": {
				"id": "defaultGroupId",
				"title": "{{title}}",
				"entityType": "group",
				"i18n": "i18n/defaultGroupId.properties"
			},
			"payload": {
				"tiles": [{
					"id": "demo.demoProject-0-1545915976882",
					"appId": "demo.demoProject",
					"IntentIDHint": "object1-action1"
				}]
			}
		}],

As next step we can now build the project.

Step 5. Build the project with WebIDE

Before you build the project you need check again the mta.yaml of the multi-target application, in our example the mta.yaml should looks like following code:

ID: DemoProject
_schema-version: '2.1'
parameters:
  deploy_mode: html5-repo
version: 0.0.1
modules:
  - name: DemoProject_appRouter
    type: approuter.nodejs
    path: DemoProject_appRouter
    properties:
      TENANT_HOST_PATTERN: ^(.*)-c4re.cfapps.sap.hana.ondemand.com
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: rt_DemoProject_appRouter
      - name: portal_resources_DemoProject
      - name: c4re-uaa
  - name: DemoProject_ui_deployer
    type: com.sap.html5.application-content
    path: DemoProject_ui_deployer
    requires:
      - name: dt_DemoProject_ui_deployer
    build-parameters:
      requires:
        - name: demoProject
          artifacts:
            - './*'
          target-path: resources/demoProject
  - name: demoProject
    type: html5
    path: demoProject
    build-parameters:
      builder: grunt
  - name: FLP
    type: com.sap.portal.site-content
    path: FLP
    parameters:
      memory: 128M
      buildpack: 'https://github.com/cloudfoundry/nodejs-buildpack/releases/download/v1.6.21/nodejs-buildpack-v1.6.21.zip'
    requires:
      - name: portal_resources_DemoProject
      - name: c4re-uaa
      - name: dt_DemoProject_ui_deployer
      - name: DemoProject_ui_deployer
resources:
  - name: rt_DemoProject_appRouter
    parameters:
      service-plan: app-runtime
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: dt_DemoProject_ui_deployer
    parameters:
      service-plan: app-host
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: portal_resources_DemoProject
    parameters:
      service-plan: standard
      service: portal
    type: org.cloudfoundry.managed-service
  - name: c4re-uaa
    type: org.cloudfoundry.existing-service

Under the resources we have two instances of the html5-apps-repo but with different service-plan, they are automatic generated when we create the project. The app-host instance is for host the front-end files, and the app-runtime is for approuter to access the html5 repository. As next we have a instance of portal service, which is for our fiori launchpad module. At last we need an instance of uaa service, here we reuse the uaa service which is already exist in our dev-landscape, you might need create or chose your own uaa service.  The under modules, we can see, we bind the app-host, uaa, portal service, and the ui_deployer to the fiori launchpad module (FLP), and on the other part we also bind the portal service, uaa and the app-runtime to the approuter. Now everything is checked, we can start to build the project by right click project and chose the build.

After the build is finished you should have a new folder called mta_archives, and under the DemoProject you will see a mtar file, which we can use for deploy.

Step 6. deploy

By deployment you chose use webide or use the command line tool of the cloudfoundry, if you chose the webide you just simply right click the mtar file you chose deploy.

if you want to go with command line tools, you can download the mtar file from the webide and use following command on you console:

cf deploy DemoProject_0.0.1 mtar

After the deployment is finished, you can goto your space, and click the deployed approuter and then click the route (in the image above, we have three route of approuter is because we have different tenants, in your case you should only have one route) of the approuter you should see the following fiori launchpad and congratulations you have your first ui5 app on fiori launchpad of cloud foundry:

Conclusion

After you go through all this 6 steps, you will have you first simple ui5 app, and a Fiori Launchpad, which are all deployed on Cloud Foundry. With this little journey, you will know how to create a multi-target application with WebIDE, how to add different modules under the multi-target application, also know how to config the Fiori Launchpad with WebIDE. At the last part of this blog, I also introduce how to deploy you mtar file to the Cloud Foundry with different methods (i.e. using WebIDE or using command line tools). I hope with my little blog, can help you to start your adventure with Fiori Apps on Cloud Foundry

Related Blogs

https://blogs.sap.com/2018/12/11/programming-applications-in-sap-cloud-platform/

Github Code:

https://github.com/kukugo/example_sap_ui5_cloudfoundry