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

1. On the data source edit page, create a dashboard parameter with a suitable value to filter data through a stored procedure.

   

2. 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.

   
   

3. 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 Bold BI®.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

1. Create a button in the view page with an on-click function in your external application.

<button onclick="updateFilterValues()">updateFilterValues</button>

2. 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");                
}

References

• Connecting to Stored Procedure in SQL Server Database
• Configuring Dashboard Parameters
• JavaScript Embedding
• FilterParameters API Reference
• UpdateFilters Method Reference