Arjan Nieuwenhuizen
Read all my blogsUsing an AngularJS / Bootstrap template in an SAP HCP HTML5 application
Arjan Nieuwenhuizen, 17 February 2016
As you probably know, SAP provides SAPUI5 as the framework for building HTML5 applications on HCP. Out of the box the SAP WebIDE provides you with a lot of stuff to quickly create applications built with SAPUI5. In some cases however, SAPUI5 might not be the best framework for the application that you’re building. This blog describes why you might want to use a different framework and how you can use a template built with this framework (AngularJS in this case) in the SAP WebIDE and run it on HCP.
Why would you use another framework?
1. Although SAPUI5 is a great framework, it might not always be the best solution for some applications. Especially for applications that are not used internally but are used by partners or customers, the look & feel of SAPUI5 applications might not attract your customers. Branding and corporate identity might be very important and styling SAPUI5 completely different can be very time consuming.
2. Most designers use tools like Photoshop, Sketch etc to create a layouts, screens etc. These screens are probably completely different than the screens that you can build with SAPUI5, and of course your customer likes the designers screens better that your default SAPUI5 screens. As mentioned above, recreating these designs in SAPUI5 will be difficult and very time consuming. Furthermore, you cannot easily use exported resources from tools like sketch (HTML, css etc.) because of the fact that SAPUI5 generates it’s own HTML source.
3. If one framework is strategically chosen for all applications built in an organisation, non SAP developers might also have a say in the matter. Most of the time non-SAP developers don’t like SAPUI5 or SAP in general and will probably fancy another HTML5 framework like AngularJS better and their arguments are probably valid ones. For example, the community around AngularJS is huge because it’s so widely used. Other very popular frameworks include EmberJS and ReactJS and many more.
Templates can accelerate development
When you start building a web application, you basically have the option to start from scratch of to use a template. You can find tons of (free and paid) templates on the internet on sites like themeforest. Some nice free AngularJS templates are available at startangular. In this blog I will be using the start bootstrap (SB) admin angular template that you can find here. This template is based on angular 1.x. (alsmost) The same template is also available for Angular 2.0 if you prefer AngularJS 2.0.
Installing the template and run locally
Download the template zip file from the website and install it somewhere on your local machine by following the instructions here.
After installation the template is ready to run locally.
Preparing the template for the WebIDE
Before we move the template to the Web IDE we have to modify the structure of the source folder a bit. The first time I tried to run this on HCP I found that is best to have the ‘app’ folder in the template source, the root folder of your Web IDE project because that contains the index.html. index.html however, depends on the bower_components folder that was created during installation of the template. If we move the bower_components folder to the app folder, everything should be fine.
The contents of your directory should look like this:
Create a zipfile of the contents of the app folder. Give the zip a logical project name (e.g. angular_template). We will import this in the Web IDE in the next step.
Moving the template to the WebIDE
When logged in to the WebIDE, import the zip by choosing file -> import -> from file system.
Leave the import options to the default values or change the import folder name if you want.
The result should look like this
Test the newly created application by right clicking the index.html and choosing Run -> Run As – > Web Application.
Enabling your HCP destinations
To use destinations that you have configured in HCP, we will have to set this up in the project just like it is done for SAPUI5 applications. Create a new file in the root of your project and name it neo-app.json. Paste in the following content, adjust the values in the file to the name of your own destination:
{
“welcomeFile”: “index.html”,
“logoutPage”: “logout.html”,
“routes”: [
{
“path”: “/destinations/ECC”,
“target”: {
“type”: “destination”,
“name”: “ECC”
},
“description”: “SAP ECC System”
}
],
“cacheControl”: [
{
“directive”: “private”,
“maxAge”: 0,
“path”: “*html”
},
{
“directive”: “public”,
“maxAge”: 31536000
}
]
}
My end result
As an example, I created a small sample application based on the flight demo data that exists in all SAP Netweaver AS systems. I modified the template a bit and added HTTP calls to fetch flight and carrier data from the ECC back-end system using the standard flights sample OData service (/IWFND/RMTSAMPLEFLIGHT).
My final application looks like this (check the running version here):
Receive our weekly blog by email?
Subscribe here:
4 responses to “Using an AngularJS / Bootstrap template in an SAP HCP HTML5 application”
cool blog. thanks for sharing this.
Can you share codes?
Hi,
Nice Post…
I just wanted to ask if we can register this application over fiori launchpad
Hi
Can you please share the code.
Thanks in Advance !!!