[Update 2021]: Note that this asset was created before our branding changes related to SAP technology were announced on January 2021. Note that SAP Cloud Platform Launchpad was renamed to SAP Launchpad service, and SAP Cloud Platform Portal was renamed to SAP Cloud Portal service
[Update 2022]: Please note that this blog was published prior to the re-branding related to SAP Build portfolio, which was announced at SAP TechEd 2022. SAP Launchpad service and SAP Work Zone come together under the SAP Build Work Zone brand, with two editions: standard edition (formerly SAP Launchpad service) and advanced edition (formerly SAP Work Zone). You can learn more in this announcement blog post: SAP Build Capabilities Explained | SAP TechEd | SAP News Center
This blog focuses on how you can use SAP Business Application Studio to create a HTML5 app managed by SAP Cloud Platform and integrate it within the central Fiori Launchpad. If you have in the past built Fiori apps which integrated into the Portal service, you would recall the use of Launchpad modules. This is still possible – however the recommend approach going forward for Portal & Launchpad service is to build apps using the managed appRouter option
Its important to note that on the Cloud Foundry environment of SAP Cloud Platform you can now run an application that was uploaded to HTML5 application repository using one of the following options: standalone application router or HTML5 application runtime managed by SAP Cloud Platform. To know more about these options, I would like you to refer to my blog post "HTML5 Applications Managed by SAP Cloud Platform – The new way of developing HTML5 apps"
You can follow all these steps using the Trial environment.
Launch SAP Business Application Studio and begin with creating a project from template.
Select “SAP Fiori Freestyle – Project Generator”
Select the environment as “Cloud Foundry” and use the template “SAPUI5 Application”
Give a name for your project
In the HTML5 runtime, change the selected entry from “Standalone Approuter” to “Managed by SAP Cloud Platform” and provide a Managed Service name.
Provide the name and namespace for your HTML5 module
For the view definition, I have selected to add a datasource. For this example, I have already configured SAP ES5 system in my destinations. Here is a tutorial which you can follow to create a destination for SAP ES5 system.
In this step, I have selected the service “GWSAMPLE_BASIC” in the ES5 system.
Once the project is generated, add it to the workspace.
For demonstration, I have added a list control to the view and bind the control to some of the attributes.
We need to manually update the manifest.json file with the CrossNavigation entry. In the future, this may not be necessary as it would be generated during the project creation itself.
With this the project is ready to be Built & Deployed. Use the command to imitate a Build process.
Deploy the .mtar file to your Cloud Foundry subaccount
Once the application is successfully deployed, you will now see in the “HTML5 Applications” menu as shown below. Please note that at the time of posting this blog, this menu is not yet available in trial environments. If you would like to see the deployed apps, please use the command line and issue the command cf html5-list to list all the deployed HTML5 apps.
You can launch the app from here and test it too.
In the next blog post, I will walk through the steps required to integrate this HTML5 app into a central Fiori Launchpad.
Additional Reading:
If you would like to know how to incorporate CI/CD & Transport Management services to transport this HTML5 app, here is another blog post to check out "Achieve Continuous Integration and Delivery using DevOps services in SAP Cloud Platform".
[Update 2022]: Please note that this blog was published prior to the re-branding related to SAP Build portfolio, which was announced at SAP TechEd 2022. SAP Launchpad service and SAP Work Zone come together under the SAP Build Work Zone brand, with two editions: standard edition (formerly SAP Launchpad service) and advanced edition (formerly SAP Work Zone). You can learn more in this announcement blog post: SAP Build Capabilities Explained | SAP TechEd | SAP News Center
This blog focuses on how you can use SAP Business Application Studio to create a HTML5 app managed by SAP Cloud Platform and integrate it within the central Fiori Launchpad. If you have in the past built Fiori apps which integrated into the Portal service, you would recall the use of Launchpad modules. This is still possible – however the recommend approach going forward for Portal & Launchpad service is to build apps using the managed appRouter option
Its important to note that on the Cloud Foundry environment of SAP Cloud Platform you can now run an application that was uploaded to HTML5 application repository using one of the following options: standalone application router or HTML5 application runtime managed by SAP Cloud Platform. To know more about these options, I would like you to refer to my blog post "HTML5 Applications Managed by SAP Cloud Platform – The new way of developing HTML5 apps"
You can follow all these steps using the Trial environment.
Developing HTML5 App using Business Application Studio
Launch SAP Business Application Studio and begin with creating a project from template.
Select “SAP Fiori Freestyle – Project Generator”
Select the environment as “Cloud Foundry” and use the template “SAPUI5 Application”
Give a name for your project
In the HTML5 runtime, change the selected entry from “Standalone Approuter” to “Managed by SAP Cloud Platform” and provide a Managed Service name.
Provide the name and namespace for your HTML5 module
For the view definition, I have selected to add a datasource. For this example, I have already configured SAP ES5 system in my destinations. Here is a tutorial which you can follow to create a destination for SAP ES5 system.
In this step, I have selected the service “GWSAMPLE_BASIC” in the ES5 system.
Once the project is generated, add it to the workspace.
For demonstration, I have added a list control to the view and bind the control to some of the attributes.
We need to manually update the manifest.json file with the CrossNavigation entry. In the future, this may not be necessary as it would be generated during the project creation itself.
With this the project is ready to be Built & Deployed. Use the command to imitate a Build process.
Deploy the .mtar file to your Cloud Foundry subaccount
Once the application is successfully deployed, you will now see in the “HTML5 Applications” menu as shown below. Please note that at the time of posting this blog, this menu is not yet available in trial environments. If you would like to see the deployed apps, please use the command line and issue the command cf html5-list to list all the deployed HTML5 apps.
You can launch the app from here and test it too.
In the next blog post, I will walk through the steps required to integrate this HTML5 app into a central Fiori Launchpad.
Additional Reading:
If you would like to know how to incorporate CI/CD & Transport Management services to transport this HTML5 app, here is another blog post to check out "Achieve Continuous Integration and Delivery using DevOps services in SAP Cloud Platform".
- SAP Managed Tags:
44 Comments
