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"); } diff --git a/Scenario Based Samples/Widget embedding with filters/README.md b/Scenario Based Samples/Widget embedding with filters/README.md index bc8f219..fa22360 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. The application aims to demonstrate how to render a specific widget from a dashboard of widget-based filtering 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 @@ -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) \ 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