> ## Documentation Index
> Fetch the complete documentation index at: https://docs.explo.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Explo offers a number of UI Elements you can add onto your dashboards.

These elements are defined in 3 categories: Controls, Export, and Display.

<img src="https://mintcdn.com/explo/CaJC4DeBEWf_KlnL/images/creating-dashboards/ui-elements-2.png?fit=max&auto=format&n=CaJC4DeBEWf_KlnL&q=85&s=266c06e1146feedfd0e4a007a7873988" alt="" width="800" height="1004" data-path="images/creating-dashboards/ui-elements-2.png" />

<img src="https://mintcdn.com/explo/CaJC4DeBEWf_KlnL/images/creating-dashboards/ui-elements-3.png?fit=max&auto=format&n=CaJC4DeBEWf_KlnL&q=85&s=b8859d6a818fd001f4af7434d7ef9df5" alt="" width="432" height="226" data-path="images/creating-dashboards/ui-elements-3.png" />

<img src="https://mintcdn.com/explo/CaJC4DeBEWf_KlnL/images/creating-dashboards/ui-elements-4.png?fit=max&auto=format&n=CaJC4DeBEWf_KlnL&q=85&s=b02a51c7a4e739dca15e0ce400424324" alt="" width="432" height="338" data-path="images/creating-dashboards/ui-elements-4.png" />

* Drag and drop these UI Elements onto your dashboard to use them.

* To edit a UI element, **double-click on the component** and the editor will
  appear in the left side panel.

## Adding a new UI Element

<img src="https://mintcdn.com/explo/CaJC4DeBEWf_KlnL/images/creating-dashboards/ui-elements-1.png?fit=max&auto=format&n=CaJC4DeBEWf_KlnL&q=85&s=1f79454d77d5e1a1ba288d8bd25b7ca5" alt="Drag a component onto the canvas to add it to your dashboard." width="432" height="361" data-path="images/creating-dashboards/ui-elements-1.png" />

Adding new components is easy! Simply drag the component onto the canvas to get
started. You will see a hovering shadow, indicating where the component will go
when you drop it.

## Filtering

You can now filter charts directly from the UI elements.

Scroll down to the bottom of the `Setup` page to see the configuration options. With the setup process, you will setup the following relationship:<br />
`Selected Field` `Operator` `UI Element Value`<br />
Some concrete examples:<br />
`ecommerce_order_shipment_date` `is between` `date range`<br />
`category_field` `is in` `multiselect dropdown values`<br />
And so on...<br />
The configuration process is below.

<img src="https://mintcdn.com/explo/jiW-YLiBORwgUQTi/images/creating-dashboards/filter_menu.png?fit=max&auto=format&n=jiW-YLiBORwgUQTi&q=85&s=af1fa6dae10785a1ad506f86d300622d" alt="" width="432" height="321" data-path="images/creating-dashboards/filter_menu.png" />

First, select your operator.

<img src="https://mintcdn.com/explo/jiW-YLiBORwgUQTi/images/creating-dashboards/filter_operator.png?fit=max&auto=format&n=jiW-YLiBORwgUQTi&q=85&s=4c5715139f52e86ffd6fff21358fd14d" alt="" width="432" height="325" data-path="images/creating-dashboards/filter_operator.png" />

At this point, the charts on the dashboard will tell you that you need to Select a Field that the operator applies to.

<img src="https://mintcdn.com/explo/jiW-YLiBORwgUQTi/images/creating-dashboards/filter_select.png?fit=max&auto=format&n=jiW-YLiBORwgUQTi&q=85&s=3609417dae080125208840a8b8a21243" alt="" width="432" height="360" data-path="images/creating-dashboards/filter_select.png" />

You can now select the field and which charts you want the filter to apply to.

<img src="https://mintcdn.com/explo/jiW-YLiBORwgUQTi/images/creating-dashboards/filter_configuration.png?fit=max&auto=format&n=jiW-YLiBORwgUQTi&q=85&s=439c49ae697c6635ffe452b0dbca8f0e" alt="" width="432" height="138" data-path="images/creating-dashboards/filter_configuration.png" />

You will then get the message from the chart that the filter is configured.

<img src="https://mintcdn.com/explo/jiW-YLiBORwgUQTi/images/creating-dashboards/filter_linked.png?fit=max&auto=format&n=jiW-YLiBORwgUQTi&q=85&s=f23169f53294cdc80d05a87e1c73c40f" alt="" width="432" height="349" data-path="images/creating-dashboards/filter_linked.png" />

And now you have a filter configured for the charts!
