Implementing the Web Component Foundation

Objective

After completing this lesson, you will be able to develop a basic Web Component and define its metadata to register a custom widget within SAP Analytics Cloud.

Important Note on Custom Widget Development

Custom widget development is a software development activity. There is no single correct implementation or mandatory coding pattern.

Different developers may achieve the same functional result using different approaches, structures, or libraries.

This unit uses one reference implementation, provided by SAP, to demonstrate the required concepts and mechanisms.

The code presented in this unit should be understood as:

  • a learning reference,
  • a working example,
  • not as a prescriptive or exclusive standard.

As a custom widget developer, you are free to adapt, refactor, or redesign the solution according to your specific requirements.

Create a Simple Web Component

SAP Analytics Cloud custom widgets are based on Web Component technology.

Before creating a custom widget in SAP Analytics Cloud, it is important to understand how a Web Component works independently and can be executed in a browser.

In this exercise, you will open and run a simple Web Component in a browser.

This example is not yet connected to SAP Analytics Cloud and serves as a foundation for the next steps.

Exercise

The steps you will follow are:

  1. create a local folder
  2. create an HTML file (index.html)
  3. copy the HTML code from the GitHub SAP Samples Repository (index.html)
  4. edit the index.html file to provide your username
  5. verify the file by opening it in a browser

Result

A simple Web Component is rendered successfully in the browser.

ExerciseStart Exercise

Create, Upload, and View a Custom Widget in SAP Analytics Cloud

The Web Component can be turned into a custom widget by adding metadata that SAP Analytics Cloud can interpret.

By completing the next exercise, you will understand the role of the widget metadata file. You will upload an index.json file to SAP Analytics Cloud, create a minimal custom widget, and add it to the story. Finally, you will view this "Hello" custom widget.

Exercise

In the exercise below you will follow the next steps:

  1. create an index.json in a local folder
  2. copy the code from the GitHub SAP Samples Repository (index.json)
  3. create a main.js file and copy the code from the same repository
  4. edit both files to include your username
  5. create a ZIP archive containing the widget files
  6. upload the widget to SAP Analytics Cloud using the JSON file and the ZIP archive
  7. create a story and add the widget

Result

The custom widget is visible and rendered in the story.

ExerciseStart Exercise

Resources and Further Reading

Throughout this unit you discover a way to implement that follows the existing resources provided by SAP:

SAP Analytics Cloud: Custom Widget Hands-on Guide - SAP Community

More specifically, the exercises you will take in this unit are based on the following document: Custom Widget Hands-On Guide

Summary

Custom widgets in SAP Analytics Cloud are built using standard Web Component technology. The Web Component itself can be developed and tested independently in a browser before being integrated into SAP Analytics Cloud.

The index.json file contains essential metadata that enables SAP Analytics Cloud to recognize and register a Web Component as a custom widget.

Creating a functional custom widget requires a JSON file and resource files (such as main.js), which must be packaged as a ZIP archive for upload to SAP Analytics Cloud.

Learning

SAP FacebookSAP YoutubeSAP LinkedIn