Revamp widget based filtering sample of widget embedding

Scenario Based Samples/Widget embedding with filters/ClientApp/src/WidgetEmbedding/WidgetEmbedding.js

@@ -27,21 +27,32 @@ class WidgetEmbedding extends React.Component {
       "Online",
       "Dealer"
     ];
+    this.widgetFilter = this.widgetFilter.bind(this);
+    this.getSelectedValues = this.getSelectedValues.bind(this);
   }
 
   widgetFilter() {
     var instance = BoldBI.getInstance("dashboard");
+    var selectedValues = this.getSelectedValues();
+    if(selectedValues != "") {
+      var updatefiltersValue = "Channel=" + selectedValues;
+      instance.updateFilters(updatefiltersValue);
+    }
+  }
+
+  getSelectedValues() { 
     var multiselectContainer = document.getElementById("multi-select");
     var getlistObj = multiselectContainer.ej2_instances && multiselectContainer.ej2_instances[0];
     var selectedValuesList = getlistObj.tempValues;
+    var selectedValuesString = "";
     if (selectedValuesList && selectedValuesList.length !== 0) {
       document.getElementById("error-text").style.display = "none";
-      var selectedValuesString = selectedValuesList.join(",");
-      var updatefiltersValue = "Channel=" + selectedValuesString;
-      instance.updateFilters(updatefiltersValue);
+      selectedValuesString = selectedValuesList.join(",");
+      return selectedValuesString;
     }
     else {
       document.getElementById("error-text").style.display = "block";
+      return selectedValuesString;
     }
   }
 
@@ -50,15 +61,11 @@ class WidgetEmbedding extends React.Component {
       serverUrl: data.ServerUrl + "/" + data.SiteIdentifier,
       dashboardId: data.DashboardId,
       embedContainerId: "dashboard",
-      embedType: data.EmbedType,
-      environment: data.Environment,
-      mode: BoldBI.Mode.View,
       width: "100%",
       height: window.innerHeight + "px",
-      expirationTime: 100000,
       authorizationServer: {
-        url: apiHost + authorizationUrl,
-      },
+        url: apiHost + authorizationUrl
+      }
     });
     this.dashboard.loadDashboardWidget("Sales by Channel");
   }

Scenario Based Samples/Widget embedding with filters/README.md

@@ -1,18 +1,18 @@
 # Applying Widget-based filter for Widget Embedding in React with ASP.NET Core
 
-This project was created using ASP.NET Core 6.0. This application aims to demonstrate how to showcase the implementation of widget-based filtering in a BoldBI widget through JavaScript Embedding.
+This project was created using ASP.NET Core 8.0. The application aims to demonstrate how to render a specific widget from a dashboard of widget-based filtering through JavaScript Embedding.
 
 ## Widget view
 
    ![Widget-view](https://github.com/boldbi/samples/assets/129487075/857fd291-9498-4155-a9cc-f040c7c9be53)
 
 ## Requirements/Prerequisites
 
-* [.NET Core 6.0](https://dotnet.microsoft.com/download/dotnet-core)
+* [.NET Core 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0)
 * [Visual Studio Code](https://code.visualstudio.com/download)
 * [Node.js](https://nodejs.org/en/)
 
-> **NOTE:** Node.js v14.16 to v20.14 are supported
+> **NOTE:** Node.js v18.17 to v20.15 are supported
 
 #### Supported browsers
 
@@ -84,9 +84,9 @@ This project was created using ASP.NET Core 6.0. This application aims to demons
 
 1. In the initial rendering, the specified widget will render with all values using the **renderWidget()** method. Please check this [link](https://help.boldbi.com/embedding-options/embedding-sdk/embedding-a-widget/) for more details about widget embedding.
 
-   ![renderwidget](https://github.com/boldbi/samples/assets/129487075/c8f5b7ef-e1fe-43d2-ba7f-56d79d68cd57)
+   ![renderwidget](https://github.com/boldbi/samples/assets/129487075/4694a6f0-47f1-48a0-848e-c97ea6874179)
 
 2. For the on-demand case, you can select options from the multiselect dropdown list and click the `Apply filters` button. By clicking this button, the **widgetFilter()** method will be triggered to apply the filters. For example, if you select options such as Corporate and Online, then the selected filter values will apply in the `Sales by Channel` widget.
 
-   ![updatefilter](https://github.com/boldbi/samples/assets/129487075/ce04cc33-1f2a-4242-9140-8a78225a8a76)
-   ![filter-apply](https://github.com/boldbi/samples/assets/129487075/938a0ab1-49e9-490b-ad77-3e0dd717df1e)
+   ![updatefilter](https://github.com/boldbi/samples/assets/129487075/898109e9-ba8a-4381-8c34-6a3cdd04d97c)
+   ![filter-apply](https://github.com/boldbi/samples/assets/129487075/938a0ab1-49e9-490b-ad77-3e0dd717df1e)

Scenario Based Samples/Widget embedding with filters/React-with-ASP.NETCore.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>false</IsPackable>

Scenario Based Samples/Widget embedding with filters/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@boldbi/boldbi-embedded-sdk": "^7.9.27",
+        "@boldbi/boldbi-embedded-sdk": "^7.9.50",
         "@syncfusion/ej2-react-dropdowns": "^26.1.39",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.4.0",
@@ -14,4 +14,4 @@
         "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1"
     }
-}
+}