Overview

From a hosting point of view, a custom widget consists of two types of files: the custom widget JSON file (explained in more detail in previous blog) and the resource files.

The custom widget JSON file contains the metadata of a custom widget. It defines all the ingredients of a custom widget and references its resource files by their URLs.

The resource files are all the files of the custom widget that make it work properly, for example, JavaScript files, CSS files, HTML files, image files, and so on.

To host a custom widget, you need two locations on which these files are distributed:

• An SAP Analytics Cloud instance, on which you upload the custom widget JSON file of the custom widget (see help: Upload a Custom Widget to Analytics Designer).

• An HTTP Web server with HTTPS enabled, on which you upload the resource files. The Web server acts as a simple repository of the resource files. The resource files are static, they aren’t processed or executed on the Web server. Recall that the custom widget JSON contains URL references that point to these resource files.

In this blog I will focus with the host of the resource files of the Custom Widget. I will describe the detailed steps required to deploy a basic project which contains the resource files in SAP BTP (earlier know as SAP Cloud Platform) in cloud foundry environment.

Prerequisites

Before deploying the Custom Widget resource files or also known as the Web Component files, you need to:

• Have an SAP BTP global account: refer to this Tutorial where you can follow the different steps to create your SubAccount, to Enable Cloud Foundry, to create your Organisation and your Space within the SAP BTP. You can refer to this help page as well where you can find more details regarding the Org, Space and Space Quota Plans management in the the Cloud Foundry environment.
• Install the Cloud Foundry Command Line Interface (CLI): refer to this tutorial in order to download and install the Command Line Interface package and also to explore a few basic CLI commands.
• Create a Sample Project: In order to deploy the Custom Widget resource files, you need to create a basic application where you will define your manifest.yml file and using the Cloud Foundry Command line cf push to deploy your Custom Widget into the SAP BTP.

Deployment Steps

Once you have set up your SAP BTP environment, and installed the Cloud Foundry Command Line, you can create your application and deploy it using the cf push command.

Below you can watch the details steps of how to host a Custom Widget resource files into the SAP BTP:

You can run the command cf push again every time you update the application files.

Application Configuration

As I mentioned in the video tutorial, the manifest.yml is need it for the deployment of your application:

---
applications:
- name: ds-static-sample
  root: public
  path: public
  directory: visible
  memory: 64M
  buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git

This file contains the deployment descriptor that the cf push command expects to find. For our case we don’t need a complex configuration, a minimal and simple one will make the deployment work, nevertheless there are different attributes available that you can add and configure.

I gave as name for my application: ds-static-sample nevertheless you can choose different naming like for example: sac-widget-colored-box, then by default the application URL will contain this name, if it’s available.

I set the memory for 64M, which is the amount of RAM I need to deploy my static files. You might want to specify a smaller limit to conserve quota space if you know how much memory your application instance do require.

There are also several buildpacks for all kinds of applications (e.g. Python, Java), but I select the Staticfile buildpack for the purpose of this example. You can refer to this blog for more info and detailed steps.

Last and not least, user can use their own domain to map to the BTP hosting, by using the “BTP custom domain service“. You can refer to this blog and this help documentation to know more about the different steps to Custom your Domain.

Deployment Check

After you run the cf push, you can check now wether your resource files were deployed into the SAP BTP successfully or not. You need just to redirect yourself to the sub-account space and run the application route path:

and from the browser, add “/” + the path to your resource file in order to see the source code:

To resume we have deployed a Custom Widget to the SAP BTP Cloud Foundry environment by building a sample application and running 2 command line with an easy and simple way.

If you want to know more about Custom Widget please check my blog here.

Many thanks for my colleague David Stepanov for his support.

See you soon for new blogs covering the Custom Widgets.