Controlled Filters

​

Overview

It is possible to control dashboard level filters from your application. This requires setup in the Upsolve Hub to configure a filter key, and then a prop to be set in your application to pass a filter value down to the filter through the key.

Controlled filters and their set values are not visible to your end users. They are meant to be exclusively for your access.

​

Configuration in Upsolve Hub

To make a filter controlled, first have a dashboard with a filter configured for it.

Next, click the “code” icon on the filter

Then, configure a key for the filter. In this case, we have chosen city

Finally, when the control is added, note that the filter label changes color and the icon indicates that this filter will not be visible to your users

​

Configuration in your application

Refer back to the in-product guide:

Following this guide, configure a prop on your UpsovlveDashboard component. Pass into the prop an object, where each key refers to a controlled filter key you have configured, and each value is the value the controlled filter should take.

In this example, the prop would be:

<UpsolveDashboard
    ...,
    controlledFilterValues={{
        city: 'Abu Dhabi'
    }}
/>