Forms and data inputs are essential components in analytical dashboards, bridging the gap between passive data consumption and active user engagement. With the rising complexity of enterprise requirements, dashboard designers in SAP Analytics Cloud (SAC) frequently encounter limitations when attempting to build highly customizable, data-driven input forms without resorting to extensive scripting, hardcoded widgets, or external web pages.
To solve this challenge, we developed FormFlex—a powerful, robust, and highly dynamic custom widget designed to streamline form creation natively within SAP Analytics Cloud.
Unlike traditional static input fields which require developers to drag in fifty individual widgets, FormFlex operates on a configuration-driven architecture within a single widget wrapper. This enables users to generate fields dynamically through an intuitive visual Builder Panel. Whether you need a simple feedback survey, a complex data-entry wrapper for SAP HANA planning, or a configuration toggle panel, FormFlex seamlessly adapts to your needs.
Architecture & Features
Dynamic Field Engine
FormFlex natively binds to the following HTML5 input types without any required external polyfills:
Text: text, textarea, password, emailNumeric & Temporal: number, date, time, datetime-local, weekBoolean & Selection: checkbox, radio, selectSystem: color, submit
Fluid Grid Layouts
The form wrapper utilizes modern CSS Grid templates configurable directly from the Builder panel. By passing an integer (1-4), the widget instantaneously recalculates the responsive grid layout, removing the need for manual UI alignment.
Native SAP Theming Integration
One of the most frustrating aspects of using third-party Custom Widgets is realizing they break visually when a user changes their dashboard theme. FormFlex natively hooks into SAP Analytics Cloud’s global CSS variables. Whether you are using the modern SAP Horizon theme, classic SAP Belize/Quartz, or toggling between Dark Mode, Light Mode, and High Contrast accessibility themes, FormFlex automatically restyles its background, borders, and typography to perfectly match the active SAP Canvas environment—zero configuration required!
Configuration Portability (Import & Export)
Building a complex form layout can be time-consuming, but with FormFlex, your work is never siloed. We introduced a robust Import and Export JSON pipeline directly into the Builder Panel. Dashboard administrators can click “Export Configuration” to download their exact UI, styling, and field configurations to their local hard drive. Later, they can share this JSON configuration with a colleague or upload it into a completely different dashboard widget, instantly cloning the form with a single click. The import pipeline even validates the schema structure to ensure compatibility!
How to Use FormFlex
Getting started with FormFlex is designed to be purely visual without writing any initial code. Here is the standard workflow:
Installation: Download the FormFlex.json file and upload it to your SAP Analytics Cloud Custom Widgets portal.Add to Canvas: Drag the FormFlex widget onto your canvas alongside the FormFlex Builder Panel widget.Add Fields: In the Builder Panel, use the “Add Field (+)” button to dynamically generate your variables, labels, and input types (Text, Checkbox, Select, Date, Color, etc.).Configure Options: If you are using Select or Radio inputs, simply pass a comma-separated list of values (e.g. Option 1, Option 2, Option 3) directly in the builder.Reorder Visually: Use the ☰ drag handles on the left of each field row to HTML5 drag-and-drop the fields into your desired visual order.Style the Form: Adjust global aesthetics, background colors, borders, and column grid layouts inside the “Global Settings” and “Form Styling” accordion menus.
API Methods & Scripting
FormFlex exposes native methods to SAC’s JavaScript runtime, allowing parent dashboards to interact with the widget programmatically.
1. getAllValues()
Retrieves the current state of all input fields inside the form. The data is returned as a serialized JSON string where the keys map to the Field ID.
// Example SAC Integration
var allData = FormFlex_1.getAllValues();
console.log(allData);
/*
returns all fields values
{
“department_name”: “IT”,
“skills”: “SAP Analytics Cloud”
}
*/
2. getFormValue(fieldId)
Retrieves the value of a specific, single form field by its ID.
// Get just the department string
var dept = FormFlex_1.getFormValue(“department_name”);
console.log(dept);
3. setFormValue(fieldId, value)
Programmatically sets or overrides the value of a specific form field.
// Automatically check the terms agreeing checkbox
FormFlex_1.setFormValue(“skills”, “SAP Analytics Cloud”);
//Form Multiple Sets (CheckBox) – seprate values with comma
FormFlex_1.setFormValue(“skills”, “SAP Analytics Cloud, SAP HANA”);
4. setFormConfig(configJson)
Overlays or injects new configurations into specific form fields at runtime (e.g. dynamically changing labels, hiding inputs, or passing in completely new dynamic fields).
var newConfig = [
{
“id”: “department_name”,
“type”: “text”,
“label”: “Department Name”
},
{
“id”: “Skills”,
“type”: “text”,
“label”: “Your Skills”
}
];
FormFlex_1.setFormConfig(newConfig);
5. isButtonClicked(buttonId)
Validates whether a specific submit button clicked (if multiple buttons are present ). If there is only single button in form then you dont need this method, just write script in onSubmit() event. This method only works in onSubmit() event
if (FormFlex_1.isButtonClicked(“btn_cancel”)) {
FormFlex_1.setFormValue(“department_name”, “”);
FormFlex_1.setFormValue(“skills”, “”);
Application.showMessage(ApplicationMessageType.Success, “Form Cleared!”);
}
if (FormFlex_1.isButtonClicked(“btn_data_action”)) {
var department = FormFlex_1.getFormValue(“department_name”);
DataAction_1.setParameterValue(“costcenter”, department);
DataAction_1.execute();
}
Events Hook
onSubmit()
This is the primary event hook triggered whenever a user clicks a button of type submit. Native HTML validation is checked automatically before this event fires.
// Inside the onSubmit() event of FormFlex_1
var allData = FormFlex_1.getAllValues();
var department = allData[‘department_name’];
DataAction_1.setParameterValue(“costcenter”, department);
DataAction_1.execute();
Resources
For the latest updates, documentation, or to contribute to the project, please visit the FormFlex GitHub Repository.
Conclusion
By migrating from statically unmanageable canvas widgets to FormFlex’s highly scalable, configuration-driven architecture, SAP Analytics Cloud developers can ensure robust data collection and user-input tracking using standard JSON models. Stop hardcoding your forms today!
Forms and data inputs are essential components in analytical dashboards, bridging the gap between passive data consumption and active user engagement. With the rising complexity of enterprise requirements, dashboard designers in SAP Analytics Cloud (SAC) frequently encounter limitations when attempting to build highly customizable, data-driven input forms without resorting to extensive scripting, hardcoded widgets, or external web pages.To solve this challenge, we developed FormFlex—a powerful, robust, and highly dynamic custom widget designed to streamline form creation natively within SAP Analytics Cloud.Unlike traditional static input fields which require developers to drag in fifty individual widgets, FormFlex operates on a configuration-driven architecture within a single widget wrapper. This enables users to generate fields dynamically through an intuitive visual Builder Panel. Whether you need a simple feedback survey, a complex data-entry wrapper for SAP HANA planning, or a configuration toggle panel, FormFlex seamlessly adapts to your needs.Architecture & FeaturesDynamic Field EngineFormFlex natively binds to the following HTML5 input types without any required external polyfills:Text: text, textarea, password, emailNumeric & Temporal: number, date, time, datetime-local, weekBoolean & Selection: checkbox, radio, selectSystem: color, submitFluid Grid LayoutsThe form wrapper utilizes modern CSS Grid templates configurable directly from the Builder panel. By passing an integer (1-4), the widget instantaneously recalculates the responsive grid layout, removing the need for manual UI alignment.Native SAP Theming IntegrationOne of the most frustrating aspects of using third-party Custom Widgets is realizing they break visually when a user changes their dashboard theme. FormFlex natively hooks into SAP Analytics Cloud’s global CSS variables. Whether you are using the modern SAP Horizon theme, classic SAP Belize/Quartz, or toggling between Dark Mode, Light Mode, and High Contrast accessibility themes, FormFlex automatically restyles its background, borders, and typography to perfectly match the active SAP Canvas environment—zero configuration required!Configuration Portability (Import & Export)Building a complex form layout can be time-consuming, but with FormFlex, your work is never siloed. We introduced a robust Import and Export JSON pipeline directly into the Builder Panel. Dashboard administrators can click “Export Configuration” to download their exact UI, styling, and field configurations to their local hard drive. Later, they can share this JSON configuration with a colleague or upload it into a completely different dashboard widget, instantly cloning the form with a single click. The import pipeline even validates the schema structure to ensure compatibility!How to Use FormFlexGetting started with FormFlex is designed to be purely visual without writing any initial code. Here is the standard workflow:Installation: Download the FormFlex.json file and upload it to your SAP Analytics Cloud Custom Widgets portal.Add to Canvas: Drag the FormFlex widget onto your canvas alongside the FormFlex Builder Panel widget.Add Fields: In the Builder Panel, use the “Add Field (+)” button to dynamically generate your variables, labels, and input types (Text, Checkbox, Select, Date, Color, etc.).Configure Options: If you are using Select or Radio inputs, simply pass a comma-separated list of values (e.g. Option 1, Option 2, Option 3) directly in the builder.Reorder Visually: Use the ☰ drag handles on the left of each field row to HTML5 drag-and-drop the fields into your desired visual order.Style the Form: Adjust global aesthetics, background colors, borders, and column grid layouts inside the “Global Settings” and “Form Styling” accordion menus.API Methods & ScriptingFormFlex exposes native methods to SAC’s JavaScript runtime, allowing parent dashboards to interact with the widget programmatically.1. getAllValues()Retrieves the current state of all input fields inside the form. The data is returned as a serialized JSON string where the keys map to the Field ID.// Example SAC Integration
var allData = FormFlex_1.getAllValues();
console.log(allData);
/*
returns all fields values
{
“department_name”: “IT”,
“skills”: “SAP Analytics Cloud”
}
*/2. getFormValue(fieldId)Retrieves the value of a specific, single form field by its ID.// Get just the department string
var dept = FormFlex_1.getFormValue(“department_name”);
console.log(dept);
3. setFormValue(fieldId, value)Programmatically sets or overrides the value of a specific form field.// Automatically check the terms agreeing checkbox
FormFlex_1.setFormValue(“skills”, “SAP Analytics Cloud”);
//Form Multiple Sets (CheckBox) – seprate values with comma
FormFlex_1.setFormValue(“skills”, “SAP Analytics Cloud, SAP HANA”);4. setFormConfig(configJson)Overlays or injects new configurations into specific form fields at runtime (e.g. dynamically changing labels, hiding inputs, or passing in completely new dynamic fields).var newConfig = [
{
“id”: “department_name”,
“type”: “text”,
“label”: “Department Name”
},
{
“id”: “Skills”,
“type”: “text”,
“label”: “Your Skills”
}
];
FormFlex_1.setFormConfig(newConfig);5. isButtonClicked(buttonId)Validates whether a specific submit button clicked (if multiple buttons are present ). If there is only single button in form then you dont need this method, just write script in onSubmit() event. This method only works in onSubmit() eventif (FormFlex_1.isButtonClicked(“btn_cancel”)) {
FormFlex_1.setFormValue(“department_name”, “”);
FormFlex_1.setFormValue(“skills”, “”);
Application.showMessage(ApplicationMessageType.Success, “Form Cleared!”);
}
if (FormFlex_1.isButtonClicked(“btn_data_action”)) {
var department = FormFlex_1.getFormValue(“department_name”);
DataAction_1.setParameterValue(“costcenter”, department);
DataAction_1.execute();
}Events HookonSubmit()This is the primary event hook triggered whenever a user clicks a button of type submit. Native HTML validation is checked automatically before this event fires.// Inside the onSubmit() event of FormFlex_1
var allData = FormFlex_1.getAllValues();
var department = allData[‘department_name’];
DataAction_1.setParameterValue(“costcenter”, department);
DataAction_1.execute();ResourcesFor the latest updates, documentation, or to contribute to the project, please visit the FormFlex GitHub Repository.ConclusionBy migrating from statically unmanageable canvas widgets to FormFlex’s highly scalable, configuration-driven architecture, SAP Analytics Cloud developers can ensure robust data collection and user-input tracking using standard JSON models. Stop hardcoding your forms today! Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
