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.
By the way, we encourage you to follow us on [LinkedIn]. For every 100 new followers, we promise to create another widget for free! This widget will be developed through a democratic process – we will run a vote, and the most popular choice will be implemented. :)
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
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
}
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
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
}
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() {
}
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"]);
}
}
}
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!
Comentários