How to handle filtering based on dashboard parameter bind to a stored procedure parameter in embedding?
In Bold BI embedding, you can achieve both client-side and server-side filtering. This can be done using the filterParameters
API member during dashboard initialization and with the updateFilters
method to apply dynamically. Server-side filtering can be achieved by passing filter parameter to the authorization endpoint dynamically using the query parameter embed_datasource_filter
.
Binding Dashboard Parameter to a Stored Procedure Parameter
-
On the data source edit page, create a dashboard parameter with a suitable value to filter data through a stored procedure.
-
Once the parameter is created, you can drag the desired stored procedure into the canvas area. Enter the parameter values in the Parameters dialog and click OK to proceed further.
-
Now, the table has been filtered by the column with the value you set.
Server-side Filtering with embed_datasource_filter
In the embedded application, filtering can be performed with the embed_datasource_filter
query parameter in the authorization endpoint.
public string GetDetails([FromBody] object embedQuerString)
{
var embedClass = Newtonsoft.Json.JsonConvert.DeserializeObject<EmbedClass>(embedQuerString.ToString());
var embedQuery = embedClass.embedQuerString;
embedQuery += "&embed_user_email=" + EmbedProperties.UserEmail;
double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
embedQuery += "&embed_server_timestamp=" + timeStamp;
embedQuery += "&embed_datasource_filter="+ "[{&&@CustomerId=ANTON}]";
var embedDetailsUrl = "/embed/authorize?" + embedQuery + "&embed_signature=" + GetSignatureUrl(embedQuery);
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(embedClass.dashboardServerApiUrl);
client.DefaultRequestHeaders.Accept.Clear();
var result = client.GetAsync(embedClass.dashboardServerApiUrl + embedDetailsUrl).Result;
string resultContent = result.Content.ReadAsStringAsync().Result;
return resultContent;
}
}
Client-side Filtering with filterParameters
In the BoldBI.create()
method of an embedded application, handle the filterParameters
API as shown below:
var dashboard = BoldBI.create({
filterParameters: "@CustomerId=FRANK"
});
dashboard.loadDashboard();
Client-side Filtering with updateFilters
- Create a button in the view page with an on-click function in your external application.
<button onclick="updateFilterValues()">updateFilterValues</button>
- Apply the filtering by invoking the method
updateFilters
as shown below:
function updateFilterValues() {
var instance = BoldBI.getInstance("dashboard"); // dashboard-> embed container id
instance.updateFilters("@CustomerId=ANTON");
}