Currency Conversion Widget

Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.js

@@ -0,0 +1,74 @@
+(function () {
+  let template = document.createElement("template");
+  template.innerHTML = `
+       <style>
+         :host {}
+       </style>
+       <div>
+         <p>Current Conversion Rate: <span id="conversionRate"></span></p>
+       </div>
+     `;
+
+  class CurrencyWidget extends HTMLElement {
+    constructor() {
+      super();
+      let shadowRoot = this.attachShadow({
+        mode: "open"
+      });
+      shadowRoot.appendChild(template.content.cloneNode(true));
+      this._props = {};
+    }
+
+    async connectedCallback() {
+      this.updateConversionRate();
+      this.interval = setInterval(() => {
+        this.updateConversionRate();
+      }, 4000);
+    }
+
+    disconnectedCallback() {
+      clearInterval(this.interval);
+    }
+
+    async updateConversionRate() {
+      const from = this._props.from || "USD";
+      const to = this._props.to || "INR";
+      const amount = this._props.amount || 1;
+      const decimalPlaces = this._props.decimalPlaces || 2;
+      //const price= this._props.amountprice|| 0;
+
+      const url = `https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}`;
+      const response = await fetch(url);
+      const data = await response.json();
+
+      const conversionRate = data.result.toFixed(decimalPlaces);
+      const conversionRateElement = this.shadowRoot.getElementById("conversionRate");
+      conversionRateElement.innerText = `${conversionRate} ${to}/${from}`;
+      const getprice = conversionRate.toString();
+      this.setValues(getprice);
+    }
+
+    onCustomWidgetBeforeUpdate(changedProperties) {
+      this._props = {
+        ...this._props,
+        ...changedProperties
+      };
+    }
+
+    setValues(_price) {
+      const calculatedRate = _price;
+      this.dispatchEvent(new CustomEvent("propertiesChanged", {
+        detail: {
+          properties: {
+            calculatedRate: calculatedRate
+          }
+        }
+      }));
+    }
+
+    onCustomWidgetAfterUpdate(changedProperties) {
+    }
+  }
+
+  customElements.define("com-rohitchouhan-sap-currencywidget", CurrencyWidget);
+})();

Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.json

@@ -0,0 +1,130 @@
+{
+    "id": "com.rohitchouhan.sap.currencywidget",
+    "version": "1.0.4",
+    "name": "Currency Widget",
+    "description": "This is a custom widget that displays the real-time currency conversion rate between two currencies. It can be used in SAP applications to enhance user experience by providing quick access to currency conversion information.",
+    "newInstancePrefix": "CurrencyWidget",
+    "vendor": "Rohit Chouhan",
+    "eula": "",
+    "license": "MIT",
+    "icon": "/icon.png",
+    "webcomponents": [
+        {
+            "kind": "main",
+            "tag": "com-rohitchouhan-sap-currencywidget",
+            "url": "/CurrencyWidget.js",
+            "integrity": "",
+            "ignoreIntegrity": true
+        },
+        {
+            "kind": "builder",
+            "tag": "com-rohitchouhan-sap-currencywidget-builder",
+            "url": "/CurrencyWidget_Builder.js",
+            "integrity": "",
+            "ignoreIntegrity": true
+        }
+    ],
+    "properties": {
+        "from": {
+            "description": "Source Currency Code",
+            "type": "string",
+            "default": "USD"
+        },
+        "to": {
+            "description": "Target Currency Code",
+            "type": "string",
+            "default": "INR"
+        },
+        "amount": {
+            "description": "Amount to Calculate",
+            "type": "integer",
+            "default": 10
+        },
+        "decimalPlaces": {
+            "description": "Decimal Values",
+            "type": "integer",
+            "default": 2
+        },
+        "calculatedRate": {
+            "description": "Calculated Currency Rate",
+            "type": "string",
+            "default": ""
+        }
+    },
+    "methods": {
+        "setFrom": {
+            "description": "Set Source Currency Code",
+            "parameters": [
+                {
+                    "name": "from",
+                    "type": "string",
+                    "description": "Source Currency Code"
+                }
+            ],
+            "body": "this.from = from;"
+        },
+        "getFrom": {
+            "returnType": "string",
+            "description": "Return Source Currency Code",
+            "body": "return this.from;"
+        },
+        "setTo": {
+            "description": "Set Target Currency Code",
+            "parameters": [
+                {
+                    "name": "to",
+                    "type": "string",
+                    "description": "Target Currency Code"
+                }
+            ],
+            "body": "this.to = to;"
+        },
+        "getTo": {
+            "returnType": "string",
+            "description": "Return Target Currency Code",
+            "body": "return this.to;"
+        },
+        "setAmount": {
+            "description": "Set Amount to Calculate",
+            "parameters": [
+                {
+                    "name": "amount",
+                    "type": "integer",
+                    "description": "Amount to Calculate"
+                }
+            ],
+            "body": "this.amount = amount;"
+        },
+        "getAmount": {
+            "returnType": "integer",
+            "description": "Return Amount to Calculate",
+            "body": "return this.amount;"
+        },
+        "setDecimalPlaces": {
+            "description": "Set Decimal Values",
+            "parameters": [
+                {
+                    "name": "decimalPlaces",
+                    "type": "integer",
+                    "description": "Decimal Values"
+                }
+            ],
+            "body": "this.decimalPlaces = decimalPlaces;"
+        },
+        "getDecimalPlaces": {
+            "returnType": "integer",
+            "description": "Return Decimal Values",
+            "body": "return this.decimalPlaces;"
+        },
+        "getCalculatedRate": {
+            "returnType": "string",
+            "description": "Return Calculated Currency Rate",
+            "body": "return this.calculatedRate;"
+        }
+    },
+    "events": {
+        "onClick": {
+            "description": "User Clicked."
+        }
+    }
+}

Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget_Builder.js

@@ -0,0 +1,168 @@
+
+(function () {
+      let template = document.createElement("template");
+      template.innerHTML = `
+<br>
+<style>
+    #form {
+        font-family: Arial, sans-serif;
+        width: 400px;
+        margin: 0 auto;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 10px;
+    }
+
+    td {
+        padding: 1px;
+        text-align: left;
+        font-size: 13px;
+    }
+
+    input {
+        width: 100%;
+        padding: 10px;
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        font-size: 13px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+    }
+
+
+    input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+	width: 32px;
+	height: 32px;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
+
+
+    select {
+        width: 100%;
+        padding: 10px;
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        font-size: 13px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+    }
+
+    input[type="submit"] {
+        background-color: #487cac;
+        color: white;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+        font-size: 14px;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    #label {
+        width: 140px;
+    }
+</style>
+<form id="form">
+    <table>
+        <tr>
+    <td>
+    <p>Source Currency Code</p>
+    <input id="builder_from" type="text" placeholder="Enter Source Currency Code">
+    </td>
+    </tr>
+    <tr>
+    <td>
+    <p>Target Currency Code</p>
+    <input id="builder_to" type="text" placeholder="Enter Target Currency Code">
+    </td>
+    </tr>
+    <tr>
+    <td>
+    <p>Amount to Calculate</p>
+    <input id="builder_amount" type="number" placeholder="Enter Amount to Calculate">
+    </td>
+    </tr>
+    <tr>
+    <td>
+    <p>Decimal Values</p>
+    <input id="builder_decimalPlaces" type="number" placeholder="Enter Decimal Values">
+    </td>
+    </tr>
+
+    </table>
+    <input value="Update Settings" type="submit">
+    <br>
+    <p>Developed by <a target="_blank" href="https://linkedin.com/in/itsrohitchouhan">Rohit Chouhan</a></p>
+</form>
+`;
+      class CurrencyWidgetBuilderPanel extends HTMLElement {
+         constructor() {
+            super();
+            this._shadowRoot = this.attachShadow({
+               mode: "open"
+            });
+            this._shadowRoot.appendChild(template.content.cloneNode(true));
+            this._shadowRoot
+               .getElementById("form")
+               .addEventListener("submit", this._submit.bind(this));
+         }
+         _submit(e) {
+               e.preventDefault();
+               this.dispatchEvent(
+                  new CustomEvent("propertiesChanged", {
+                     detail: {
+                        properties: {
+                           from: this.from,to: this.to,amount: this.amount,decimalPlaces: this.decimalPlaces
+                        },
+                     },
+                  })
+               );
+            }
+
+            set from(_from) {
+                    this._shadowRoot.getElementById("builder_from").value = _from;
+                 }
+                 get from() {
+                    return this._shadowRoot.getElementById("builder_from").value;
+                 }
+
+                 set to(_to) {
+                    this._shadowRoot.getElementById("builder_to").value = _to;
+                 }
+                 get to() {
+                    return this._shadowRoot.getElementById("builder_to").value;
+                 }
+
+                 set amount(_amount) {
+                    this._shadowRoot.getElementById("builder_amount").value = _amount;
+                 }
+                 get amount() {
+                    return this._shadowRoot.getElementById("builder_amount").value;
+                 }
+
+                 set decimalPlaces(_decimalPlaces) {
+                    this._shadowRoot.getElementById("builder_decimalPlaces").value = _decimalPlaces;
+                 }
+                 get decimalPlaces() {
+                    return this._shadowRoot.getElementById("builder_decimalPlaces").value;
+                 }
+
+                    }
+   customElements.define("com-rohitchouhan-sap-currencywidget-builder", 
+      CurrencyWidgetBuilderPanel
+   );
+})();