As a continuation of our journey found in the blog here, let's further dive into enhancing our calculator widget. In this blog post, we'll continue from our previous journey of building a custom calculator widget for SAP Analytics Cloud (SAC), and add the functionality to customize its appearance and behavior using Styling and Builder panels. We'll also employ SAC's standard methods for callback.
Enhancing Widget with Styling and Builder Panels
Styling Panel
Our first task is to give users the ability to change the colors of different elements in our calculator widget. For that, we'll use a Styling panel. Below is the code for style-panel.js:
// style-panel.js
(function() {
let template = document.createElement("template");
//...HTML code truncated for brevity...
class CalculatorStylingPanel extends HTMLElement {
constructor() {
//...truncated for brevity...
this._shadowRoot.getElementById("form").addEventListener("submit", this._submit.bind(this));
}
_submit(e) {
e.preventDefault();
this.dispatchEvent(new CustomEvent("propertiesChanged", {
detail: {
properties: {
equalColor: this.equalColor,
clearColor: this.clearColor,
numberColor: this.numberColor
}
}
}));
}
// getters and setters for colors truncated for brevity...
}
customElements.define("com-sap-sample-calculator-styling", CalculatorStylingPanel);
})();
In this script, we define a form to set colors for equal button, clear button, and numbers. On form submission, we prevent the default action and dispatch a propertiesChanged event. The detail property of the event includes the new colors, which will be used to update the colors of corresponding elements in the calculator.
Builder Panel
The Builder panel allows users to modify the behavior of the calculator. Here we allow users to set the number of decimal places used in calculations. This is done in builder-panel.js:
// builder-panel.js
(function() {
let template = document.createElement("template");
//...HTML code truncated for brevity...
class CalculatorBuilderPanel extends HTMLElement {
constructor() {
//...truncated for brevity...
this._shadowRoot.getElementById("form").addEventListener("submit", this._submit.bind(this));
}
_submit(e) {
e.preventDefault();
this.dispatchEvent(new CustomEvent("propertiesChanged", {
detail: {
properties: {
decimalPlaces: this.decimalPlaces
}
}
}));
}
// getters and setters for decimalPlaces truncated for brevity...
}
customElements.define("com-sap-sample-calculator-builder", CalculatorBuilderPanel);
})();
Like the styling panel, on form submission, we dispatch a propertiesChanged event, including the number of decimal places set by the user. This will be used in our main calculator script.
Integrating Styling and Builder Panels with Calculator
Once we've defined our Styling and Builder panels, we'll incorporate them into our main calculator script CalculatorWidget.js.
Here, we use the standard SAC callback methods onCustomWidgetBeforeUpdate and onCustomWidgetAfterUpdate to handle updates to our custom widget properties.
//CalculatorWidget.js
class Calculator extends HTMLElement {
constructor() {
//...truncated for brevity...
}
onCustomWidgetBeforeUpdate(changedProperties) {
this._props = { ...this._props, ...changedProperties };
}
onCustomWidgetAfterUpdate(changedProperties) {
if ("decimalPlaces" in changedProperties) {
this._decimalPlaces = changedProperties["decimalPlaces"];
}
if ("equalColor" in changedProperties) {
this._equalBtn.style.backgroundColor = changedProperties["equalColor"];
}
if ("clearColor" in changedProperties) {
this._clearBtn.style.backgroundColor = changedProperties["clearColor"];
}
if ("numberColor" in changedProperties) {
// assuming you have a method to change color of all number buttons
this._setNumberButtonsColor(changedProperties["numberColor"]);
}
}
// other methods truncated for brevity...
}
customElements.define("com-sap-sample-calculator", Calculator);
You can view the full JavaScript code [here].
In onCustomWidgetBeforeUpdate, we merge the existing properties with the changed ones. In onCustomWidgetAfterUpdate, we update our calculator according to the new properties. If the number of decimal places is changed, we update _decimalPlaces. If a color is changed, we update the corresponding element's background color.
This integration completes our customizable calculator widget for SAC. It provides users the flexibility to match the widget to their branding and specific use cases, making it a versatile addition to their toolkit.
Next time, we'll explore more complex scenarios and how our widget can be extended to handle them. Stay tuned!
