gh-secondsky-sap-skills-skills-sap-sac-scripting/references/api-widgets.md

Widget APIs Reference

Complete reference for widget scripting APIs in SAP Analytics Cloud.

Source: Analytics Designer API Reference 2025.14

---

Table of Contents

1. Common Widget Methods
2. Chart Widget
3. Table Widget
4. Input Controls
5. Button Widget
6. Text Widget
7. Image Widget
8. GeoMap Widget
9. Popup and Dialog
10. Feed Constants

---

Common Widget Methods

All widgets share these base methods:

Visibility

Widget_1.setVisible(true);      // Show widget
Widget_1.setVisible(false);     // Hide widget
var isVisible = Widget_1.isVisible();

Enabled State

Widget_1.setEnabled(true);      // Enable widget
Widget_1.setEnabled(false);     // Disable widget
var isEnabled = Widget_1.isEnabled();

Styling

Widget_1.setCssClass("myCustomClass");
var cssClass = Widget_1.getCssClass();

Focus

Widget_1.focus();

---

Chart Widget

Data Source Access

var ds = Chart_1.getDataSource();

Dimension and Measure Management

addDimension(feed, dimensionId)

Chart_1.addDimension(Feed.CategoryAxis, "Location");
Chart_1.addDimension(Feed.Color, "Product");

removeDimension(feed, dimensionId)

Chart_1.removeDimension(Feed.CategoryAxis, "Location");

addMeasure(feed, measureId, index?)

// Add measure to value axis
Chart_1.addMeasure(Feed.ValueAxis, "[Account].[parentId].&[Revenue]");

// Add at specific position
Chart_1.addMeasure(Feed.ValueAxis, "[Account].[parentId].&[Cost]", 1);

removeMeasure(feed, measureId)

Chart_1.removeMeasure(Feed.ValueAxis, "[Account].[parentId].&[Revenue]");

getMembers(feed)

var measures = Chart_1.getMembers(Feed.ValueAxis);
var dimensions = Chart_1.getMembers(Feed.CategoryAxis);

removeMember(feed, memberId)

var currentMeasures = Chart_1.getMembers(Feed.ValueAxis);
Chart_1.removeMember(Feed.ValueAxis, currentMeasures[0]);

Selections

getSelections()

Returns user-selected data points.

var selections = Chart_1.getSelections();
// Returns: Array of selection objects
// Each object maps dimension ID to member ID

Example:

var selections = Chart_1.getSelections();
if (selections.length > 0) {
    var selectedLocation = selections[0]["Location"];
    var selectedYear = selections[0]["Date"];
    console.log("Selected:", selectedLocation, selectedYear);
}

Sorting

sortByValue(measureId, order)

Chart_1.sortByValue("[Account].[parentId].&[Revenue]", SortOrder.Descending);

sortByMember(dimensionId, memberId, order)

Chart_1.sortByMember("Date", "[Date].[Year].&[2024]", SortOrder.Ascending);

Ranking

rankBy(measureId, count, order)

// Top 10 by revenue
Chart_1.rankBy("[Account].[parentId].&[Revenue]", 10, SortOrder.Descending);

// Bottom 5
Chart_1.rankBy("[Account].[parentId].&[Revenue]", 5, SortOrder.Ascending);

Formatting

getNumberFormat(measureId)

var format = Chart_1.getNumberFormat("[Account].[parentId].&[Revenue]");

setNumberFormat(measureId, format)

Chart_1.setNumberFormat("[Account].[parentId].&[Revenue]", {
    decimalPlaces: 2,
    scalingFactor: 1000,
    showSign: true
});

Chart Events

// onSelect - User selects data point
Chart_1.onSelect = function() {
    var selections = Chart_1.getSelections();
    // Handle selection
};

// onResultChanged - Data changes
Chart_1.onResultChanged = function() {
    // Handle data change
};

---

Table Widget

Data Source Access

var ds = Table_1.getDataSource();

Dimension Management

addDimensionToRows(dimensionId)

Table_1.addDimensionToRows("Product");

addDimensionToColumns(dimensionId)

Table_1.addDimensionToColumns("Date");

removeDimensionFromRows(dimensionId)

Table_1.removeDimensionFromRows("Product");

removeDimensionFromColumns(dimensionId)

Table_1.removeDimensionFromColumns("Date");

Display Options

setZeroSuppressionEnabled(enabled)

Table_1.setZeroSuppressionEnabled(true);  // Hide zero rows

setCompactDisplayEnabled(enabled)

Table_1.setCompactDisplayEnabled(true);

Selections

var selections = Table_1.getSelections();

Planning Access

var planning = Table_1.getPlanning();
// See Planning API reference

Comments

var comments = Table_1.getComments();

Table Events

// onSelect - User selects cell
Table_1.onSelect = function() {
    var selections = Table_1.getSelections();
};

// onResultChanged - Data changes
Table_1.onResultChanged = function() {
    // Handle data change
};

---

Input Controls

Dropdown

// Get selected value
var value = Dropdown_1.getSelectedKey();

// Set selected value
Dropdown_1.setSelectedKey("2024");

// Get all items
var items = Dropdown_1.getItems();

// Set items
Dropdown_1.setItems([
    { key: "2023", text: "Year 2023" },
    { key: "2024", text: "Year 2024" }
]);

Events:

Dropdown_1.onSelect = function() {
    var selected = Dropdown_1.getSelectedKey();
    // Apply filter
    Chart_1.getDataSource().setDimensionFilter("Year", selected);
};

ListBox

// Single selection
var value = ListBox_1.getSelectedKey();

// Multiple selection
var values = ListBox_1.getSelectedKeys();

// Set selection
ListBox_1.setSelectedKey("item1");
ListBox_1.setSelectedKeys(["item1", "item2"]);

CheckboxGroup

// Get checked items
var checked = CheckboxGroup_1.getSelectedKeys();

// Set checked items
CheckboxGroup_1.setSelectedKeys(["opt1", "opt3"]);

RadioButtonGroup

var selected = RadioButtonGroup_1.getSelectedKey();
RadioButtonGroup_1.setSelectedKey("option2");

Slider

// Get value
var value = Slider_1.getValue();

// Set value
Slider_1.setValue(75);

// Set range
Slider_1.setMin(0);
Slider_1.setMax(100);
Slider_1.setStep(5);

RangeSlider

// Get range values
var startValue = RangeSlider_1.getStartValue();
var endValue = RangeSlider_1.getEndValue();

// Set range
RangeSlider_1.setStartValue(10);
RangeSlider_1.setEndValue(90);

InputField

// Get/Set value
var text = InputField_1.getValue();
InputField_1.setValue("New text");

// Placeholder
InputField_1.setPlaceholder("Enter value...");

Switch

// Get state
var isOn = Switch_1.isSelected();

// Set state
Switch_1.setSelected(true);

DatePicker

// Get selected date
var date = DatePicker_1.getValue();

// Set date
DatePicker_1.setValue(new Date(2024, 0, 1));

---

Button Widget

Properties

// Set text
Button_1.setText("Click Me");

// Get text
var text = Button_1.getText();

// Set icon
Button_1.setIcon("sap-icon://accept");

Events

Button_1.onClick = function() {
    // Handle click
    Application.showMessage(ApplicationMessageType.Info, "Button clicked!");
};

---

Text Widget

// Set text
Text_1.setText("Hello World");
Text_1.setText("Value: " + myVariable);

// Get text
var text = Text_1.getText();

// Apply styling
Text_1.setCssClass("highlightText");

Dynamic Text with Placeholders

// Set text with bound values
Text_1.setText("Revenue: " + revenue.formattedValue);

---

Image Widget

// Set image source
Image_1.setSrc("[https://example.com/image.png](https://example.com/image.png)");

// From content network
Image_1.setSrc("sap-icon://home");

// Alt text
Image_1.setAlt("Company Logo");

---

GeoMap Widget

Layer Access

var layer = GeoMap_1.getLayer("LayerName");
var ds = layer.getDataSource();

Visibility

GeoMap_1.setLayerVisible("LayerName", true);
GeoMap_1.setLayerVisible("LayerName", false);

Selection

var selections = GeoMap_1.getSelections();

---

Popup and Dialog

Create and Open

// Open popup
Popup_1.open();

// Close popup
Popup_1.close();

Dialog Mode

Enable in Builder panel: "Enable header & footer"

// Dialog with custom buttons
// Configure in Builder panel

Popup Events

Popup_1.onOpen = function() {
    // Popup opened
};

Popup_1.onClose = function() {
    // Popup closed
};

Example: Confirmation Dialog

// Button click opens popup
Button_Confirm.onClick = function() {
    Popup_Confirm.open();
};

// Confirm button in popup
Button_Yes.onClick = function() {
    // Perform action
    Table_1.getPlanning().getPublicVersion("Budget").publish();
    Popup_Confirm.close();
};

// Cancel button
Button_No.onClick = function() {
    Popup_Confirm.close();
};

---

Feed Constants

Use with Chart dimension/measure methods:

Feed.CategoryAxis     // X-axis dimension
Feed.Color            // Color/legend dimension
Feed.ValueAxis        // Y-axis measures
Feed.ValueAxis2       // Secondary Y-axis
Feed.Size             // Bubble size (bubble charts)

---

SortOrder Enumeration

SortOrder.Ascending   // A-Z, 0-9
SortOrder.Descending  // Z-A, 9-0
SortOrder.Default     // Default order

---

Complete Example: Interactive Dashboard

// Dropdown filter changes chart and table
Dropdown_Year.onSelect = function() {
    var year = Dropdown_Year.getSelectedKey();

    Application.showBusyIndicator();

    // Pause refreshes
    Chart_1.getDataSource().setRefreshPaused(true);
    Table_1.getDataSource().setRefreshPaused(true);

    // Apply filter to both
    Chart_1.getDataSource().setDimensionFilter("Year", year);
    Table_1.getDataSource().setDimensionFilter("Year", year);

    // Update title
    Text_Title.setText("Sales Report - " + year);

    // Resume refreshes
    Chart_1.getDataSource().setRefreshPaused(false);
    Table_1.getDataSource().setRefreshPaused(false);

    Application.hideBusyIndicator();
};

// Chart selection filters table
Chart_1.onSelect = function() {
    var selections = Chart_1.getSelections();
    if (selections.length > 0) {
        var region = selections[0]["Region"];
        Table_1.getDataSource().setDimensionFilter("Region", region);
    }
};

// Reset button
Button_Reset.onClick = function() {
    Chart_1.getDataSource().removeDimensionFilter("Year");
    Chart_1.getDataSource().removeDimensionFilter("Region");
    Table_1.getDataSource().removeDimensionFilter("Year");
    Table_1.getDataSource().removeDimensionFilter("Region");
    Dropdown_Year.setSelectedKey("");
    Text_Title.setText("Sales Report - All Years");
};

---

Related Documentation

• DataSource API
• Planning API
• Application API

Official Reference: https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html