From f3784b3c5c62f0a4b0fb0a156121225a92157654 Mon Sep 17 00:00:00 2001 From: anuabarnab4 Date: Sun, 30 Jun 2024 11:13:29 +0530 Subject: [PATCH 1/3] Revamped code --- .../src/WidgetEmbedding/WidgetEmbedding.js | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/Scenario Based Samples/Widget embedding with filters/ClientApp/src/WidgetEmbedding/WidgetEmbedding.js b/Scenario Based Samples/Widget embedding with filters/ClientApp/src/WidgetEmbedding/WidgetEmbedding.js index c437b0b..b411ed2 100644 --- a/Scenario Based Samples/Widget embedding with filters/ClientApp/src/WidgetEmbedding/WidgetEmbedding.js +++ b/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"); } From c0942e15e81dcfaf7a750997b231535fbf60a009 Mon Sep 17 00:00:00 2001 From: anuabarnabsf4019 <129487075+anuabarnabsf4019@users.noreply.github.com> Date: Sun, 30 Jun 2024 11:25:11 +0530 Subject: [PATCH 2/3] Update README.md --- .../Widget embedding with filters/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Scenario Based Samples/Widget embedding with filters/README.md b/Scenario Based Samples/Widget embedding with filters/README.md index bc8f219..f66f80f 100644 --- a/Scenario Based Samples/Widget embedding with filters/README.md +++ b/Scenario Based Samples/Widget embedding with filters/README.md @@ -1,6 +1,6 @@ # 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 6.0. The application aims to demonstrate how to render a specific widget from a dashboard of widget-based filtering through JavaScript Embedding. ## Widget view @@ -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. +3. 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) + ![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) From 0ce84bc9e144af1c41667119336c14935f57b601 Mon Sep 17 00:00:00 2001 From: anuabarnab4 Date: Sat, 6 Jul 2024 11:15:14 +0530 Subject: [PATCH 3/3] updated .net version and node version --- .../Widget embedding with filters/README.md | 8 ++++---- .../React-with-ASP.NETCore.csproj | 2 +- .../Widget embedding with filters/package.json | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Scenario Based Samples/Widget embedding with filters/README.md b/Scenario Based Samples/Widget embedding with filters/README.md index bc8f219..0fa71b2 100644 --- a/Scenario Based Samples/Widget embedding with filters/README.md +++ b/Scenario Based Samples/Widget embedding with filters/README.md @@ -1,6 +1,6 @@ # 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. This application aims to demonstrate how to showcase the implementation of widget-based filtering in a BoldBI widget through JavaScript Embedding. ## Widget view @@ -8,11 +8,11 @@ This project was created using ASP.NET Core 6.0. This application aims to demons ## 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 @@ -89,4 +89,4 @@ This project was created using ASP.NET Core 6.0. This application aims to demons 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) + ![filter-apply](https://github.com/boldbi/samples/assets/129487075/938a0ab1-49e9-490b-ad77-3e0dd717df1e) \ No newline at end of file diff --git a/Scenario Based Samples/Widget embedding with filters/React-with-ASP.NETCore.csproj b/Scenario Based Samples/Widget embedding with filters/React-with-ASP.NETCore.csproj index c7290ee..2b8998e 100644 --- a/Scenario Based Samples/Widget embedding with filters/React-with-ASP.NETCore.csproj +++ b/Scenario Based Samples/Widget embedding with filters/React-with-ASP.NETCore.csproj @@ -1,7 +1,7 @@ - net7.0 + net8.0 true Latest false diff --git a/Scenario Based Samples/Widget embedding with filters/package.json b/Scenario Based Samples/Widget embedding with filters/package.json index 669bc3e..f10e3c2 100644 --- a/Scenario Based Samples/Widget embedding with filters/package.json +++ b/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" } -} +} \ No newline at end of file