zhongwei/gh-secondsky-sap-skills-skills-sap-sac-scripting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:55:33 +08:00
commit b82cab49fc
60 changed files with 10317 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

622
references/api-widgets.md Normal file
View File

@@ -0,0 +1,622 @@
# Widget APIs Reference
Complete reference for widget scripting APIs in SAP Analytics Cloud.
**Source**: [Analytics Designer API Reference 2025.14](https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html)
---
## Table of Contents
1. [Common Widget Methods](#common-widget-methods)
2. [Chart Widget](#chart-widget)
3. [Table Widget](#table-widget)
4. [Input Controls](#input-controls)
5. [Button Widget](#button-widget)
6. [Text Widget](#text-widget)
7. [Image Widget](#image-widget)
8. [GeoMap Widget](#geomap-widget)
9. [Popup and Dialog](#popup-and-dialog)
10. [Feed Constants](#feed-constants)
---
## Common Widget Methods
All widgets share these base methods:
### Visibility
```javascript
Widget_1.setVisible(true); // Show widget
Widget_1.setVisible(false); // Hide widget
var isVisible = Widget_1.isVisible();
```
### Enabled State
```javascript
Widget_1.setEnabled(true); // Enable widget
Widget_1.setEnabled(false); // Disable widget
var isEnabled = Widget_1.isEnabled();
```
### Styling
```javascript
Widget_1.setCssClass("myCustomClass");
var cssClass = Widget_1.getCssClass();
```
### Focus
```javascript
Widget_1.focus();
```
---
## Chart Widget
### Data Source Access
```javascript
var ds = Chart_1.getDataSource();
```
### Dimension and Measure Management
#### addDimension(feed, dimensionId)
```javascript
Chart_1.addDimension(Feed.CategoryAxis, "Location");
Chart_1.addDimension(Feed.Color, "Product");
```
#### removeDimension(feed, dimensionId)
```javascript
Chart_1.removeDimension(Feed.CategoryAxis, "Location");
```
#### addMeasure(feed, measureId, index?)
```javascript
// 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)
```javascript
Chart_1.removeMeasure(Feed.ValueAxis, "[Account].[parentId].&[Revenue]");
```
#### getMembers(feed)
```javascript
var measures = Chart_1.getMembers(Feed.ValueAxis);
var dimensions = Chart_1.getMembers(Feed.CategoryAxis);
```
#### removeMember(feed, memberId)
```javascript
var currentMeasures = Chart_1.getMembers(Feed.ValueAxis);
Chart_1.removeMember(Feed.ValueAxis, currentMeasures[0]);
```
### Selections
#### getSelections()
Returns user-selected data points.
```javascript
var selections = Chart_1.getSelections();
// Returns: Array of selection objects
// Each object maps dimension ID to member ID
```
**Example**:
```javascript
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)
```javascript
Chart_1.sortByValue("[Account].[parentId].&[Revenue]", SortOrder.Descending);
```
#### sortByMember(dimensionId, memberId, order)
```javascript
Chart_1.sortByMember("Date", "[Date].[Year].&[2024]", SortOrder.Ascending);
```
### Ranking
#### rankBy(measureId, count, order)
```javascript
// 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)
```javascript
var format = Chart_1.getNumberFormat("[Account].[parentId].&[Revenue]");
```
#### setNumberFormat(measureId, format)
```javascript
Chart_1.setNumberFormat("[Account].[parentId].&[Revenue]", {
decimalPlaces: 2,
scalingFactor: 1000,
showSign: true
});
```
### Chart Events
```javascript
// 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
```javascript
var ds = Table_1.getDataSource();
```
### Dimension Management
#### addDimensionToRows(dimensionId)
```javascript
Table_1.addDimensionToRows("Product");
```
#### addDimensionToColumns(dimensionId)
```javascript
Table_1.addDimensionToColumns("Date");
```
#### removeDimensionFromRows(dimensionId)
```javascript
Table_1.removeDimensionFromRows("Product");
```
#### removeDimensionFromColumns(dimensionId)
```javascript
Table_1.removeDimensionFromColumns("Date");
```
### Display Options
#### setZeroSuppressionEnabled(enabled)
```javascript
Table_1.setZeroSuppressionEnabled(true); // Hide zero rows
```
#### setCompactDisplayEnabled(enabled)
```javascript
Table_1.setCompactDisplayEnabled(true);
```
### Selections
```javascript
var selections = Table_1.getSelections();
```
### Planning Access
```javascript
var planning = Table_1.getPlanning();
// See Planning API reference
```
### Comments
```javascript
var comments = Table_1.getComments();
```
### Table Events
```javascript
// 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
```javascript
// 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**:
```javascript
Dropdown_1.onSelect = function() {
var selected = Dropdown_1.getSelectedKey();
// Apply filter
Chart_1.getDataSource().setDimensionFilter("Year", selected);
};
```
### ListBox
```javascript
// 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
```javascript
// Get checked items
var checked = CheckboxGroup_1.getSelectedKeys();
// Set checked items
CheckboxGroup_1.setSelectedKeys(["opt1", "opt3"]);
```
### RadioButtonGroup
```javascript
var selected = RadioButtonGroup_1.getSelectedKey();
RadioButtonGroup_1.setSelectedKey("option2");
```
### Slider
```javascript
// 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
```javascript
// Get range values
var startValue = RangeSlider_1.getStartValue();
var endValue = RangeSlider_1.getEndValue();
// Set range
RangeSlider_1.setStartValue(10);
RangeSlider_1.setEndValue(90);
```
### InputField
```javascript
// Get/Set value
var text = InputField_1.getValue();
InputField_1.setValue("New text");
// Placeholder
InputField_1.setPlaceholder("Enter value...");
```
### Switch
```javascript
// Get state
var isOn = Switch_1.isSelected();
// Set state
Switch_1.setSelected(true);
```
### DatePicker
```javascript
// Get selected date
var date = DatePicker_1.getValue();
// Set date
DatePicker_1.setValue(new Date(2024, 0, 1));
```
---
## Button Widget
### Properties
```javascript
// Set text
Button_1.setText("Click Me");
// Get text
var text = Button_1.getText();
// Set icon
Button_1.setIcon("sap-icon://accept");
```
### Events
```javascript
Button_1.onClick = function() {
// Handle click
Application.showMessage(ApplicationMessageType.Info, "Button clicked!");
};
```
---
## Text Widget
```javascript
// 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
```javascript
// Set text with bound values
Text_1.setText("Revenue: " + revenue.formattedValue);
```
---
## Image Widget
```javascript
// 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
```javascript
var layer = GeoMap_1.getLayer("LayerName");
var ds = layer.getDataSource();
```
### Visibility
```javascript
GeoMap_1.setLayerVisible("LayerName", true);
GeoMap_1.setLayerVisible("LayerName", false);
```
### Selection
```javascript
var selections = GeoMap_1.getSelections();
```
---
## Popup and Dialog
### Create and Open
```javascript
// Open popup
Popup_1.open();
// Close popup
Popup_1.close();
```
### Dialog Mode
Enable in Builder panel: "Enable header & footer"
```javascript
// Dialog with custom buttons
// Configure in Builder panel
```
### Popup Events
```javascript
Popup_1.onOpen = function() {
// Popup opened
};
Popup_1.onClose = function() {
// Popup closed
};
```
### Example: Confirmation Dialog
```javascript
// 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:
```javascript
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
```javascript
SortOrder.Ascending // A-Z, 0-9
SortOrder.Descending // Z-A, 9-0
SortOrder.Default // Default order
```
---
## Complete Example: Interactive Dashboard
```javascript
// 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](api-datasource.md)
- [Planning API](api-planning.md)
- [Application API](api-application.md)
**Official Reference**: [https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html](https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html)