Adding Interactivity to Custom Widgets with Properties, Methods, and Events

Objective

After completing this lesson, you will be able to extend a custom widget with properties, methods, and events to enable scripting, user interaction, and data exchange between the widget and SAP Analytics Cloud.

Add Properties and Methods

Custom widgets can be extended with:

  • properties, which define configurable settings stored with the story,
  • methods, which can be called from scripts to control the widget.

Properties and methods enable configuration and script-driven control of the custom widget.

Exercise

In this exercise, you will add a new property and expose a method that allows you to change the chart type dynamically from a story script.

You will:

  1. define a custom property in the widget metadata
  2. expose a method for script-based interaction
  3. control the widget behavior using a button in a story

After modifying the custom widget files locally, you will:

  1. add a button and assign a script to it
  2. click the button
  3. observe that the chart changes from a line chart to a bar chart.

Result

The widget can be controlled via scripting, allowing the chart type to be changed dynamically.

ExerciseStart Exercise

Add Events and Integrate with Click Events from ECharts

Custom widgets can emit events that can be used in SAP Analytics Cloud scripting.

Exercise

In this exercise, you will:

  1. define a custom event in the widget metadata
  2. trigger the event based on user interaction (clicking on a chart data point)
  3. access the event in the Script Editor

Result

The custom event becomes available in the Script Editor and can be used in scripts.

ExerciseStart Exercise

Add Custom Data Types

Custom data types simplify the interaction with the data in scripts. This means that the custom widgets can expose structured data that can be accessed from scripts.

Exercise

In this exercise, you will extend the widget to return information about the selected data point in the chart.

You will:

  1. add a text component to the story
  2. locate the custom widget in the Outline Panel and click on the "fx" button
  3. write a script to parse the selected data from the custom widget
  4. select a data point in the chart and observe the value in the text component

Result

When you select a data point on the chart, the selected data is visible in the text component.

ExerciseStart Exercise

Summary

Custom widgets can be extended with properties to control behavior and methods to enable script-based interaction.

Events allow widgets to communicate user actions to SAP Analytics Cloud.

Custom data types provide structured data that can be accessed in scripts, enabling deeper integration with story logic.

Learning

SAP FacebookSAP YoutubeSAP LinkedIn