Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 62 additions & 49 deletions explore-analyze/dashboards/add-controls.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ There are three types of controls:
![Range slider control for the `hour_of_day` field with a range of `9` to `17` selected](/explore-analyze/images/kibana-dashboard_controlsRangeSlider_8.3.0.png "title =50%")

* [**Time slider**](#add-time-slider-controls) — Adds a time range slider that allows to filter the data within a specified range of time, advance the time range backward and forward by a unit that you can define, and animate your change in data over the specified time range.
For example, you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, and the global time filter is **Last 7 days**. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
For example, you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, and the global time filter is **Last 7 days**. When you add the time slider, you can select the previous and next buttons to advance the time range backward or forward, and select the play button to watch how the data changes over the last 7 days.
![Time slider control for the the Last 7 days](/explore-analyze/images/dashboard_timeslidercontrol_8.17.0.gif)


Expand All @@ -34,8 +34,6 @@ To add interactive Options list and Range slider controls, create the controls,

1. Open or create a new dashboard.
2. In **Edit** mode, select **Controls** > **Add control** in the dashboard toolbar.
![Controls button in the toolbar with the Add Control option selected](/explore-analyze/images/kibana-dashboard-add-control-8.15.0.png "title =60%")

3. On the **Create control** flyout, from the **Data view** dropdown, select the data view that contains the field you want to use for the **Control**.
4. In the **Field** list, select the field you want to filter on.
5. Under **Control type**, select whether the control should be an **Options list** or a **Range slider**.
Expand Down Expand Up @@ -68,7 +66,7 @@ To add interactive Options list and Range slider controls, create the controls,

* For Range sliders, set the step size. The step size determines the number of steps of the slider. The smaller the step size is, the more steps there is in the slider.

8. Click **Save and close**. The control can now be used.
8. Select **Save and close**. The control can now be used.
9. Consider the position of the control if you have several controls active on the dashboard. Controls are applied from left to right, which can change the options available depending on their position when the [Chain controls](#configure-controls-settings) setting is enabled.
10. Save the dashboard.

Expand All @@ -79,46 +77,11 @@ You can add one interactive time slider control to a dashboard.

1. Open or create a new dashboard.
2. In **Edit** mode, select **Controls** > **Add time slider control**.
![Controls button in the toolbar with the Add a time slider option selected](/explore-analyze/images/kibana-dashboard-add-time-slider-control-8.15.0.png "title =50%")

3. The time slider control uses the time range from the global time filter. To change the time range in the time slider control, [change the global time filter](../query-filter/filtering.md).
4. Save the dashboard. The control can now be used.


## Configure the controls settings [configure-controls-settings]

Several settings that apply to all controls of the same dashboard are available.

1. In **Edit** mode, select **Controls** > **Settings**.
![Controls button in the toolbar with the Settings option selected](/explore-analyze/images/kibana-dashboard-controls-settings-8.15.0.png "title =60%")

2. On the **Control settings** flyout, configure the following settings:

* **Label position** — Specify where the control label appears.
* **Filtering** settings:

* **Apply global filters to controls** — Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard.
* **Apply global time range to controls** — Define whether controls should ignore or apply the main time range specified for the dashboard. Note that [time slider controls](#add-time-slider-controls) rely on the global time range and don’t work properly when this option is disabled.

* **Selections** settings:

* **Validate user selections** — When selected, any selected option that results in no data is ignored.
* **Chain controls** — When selected, controls are applied sequentially from left to right, and line by line. Any selected options in one control narrows the available options in the next control.
* **Apply selections automatically** — The dashboard is updated dynamically when options are selected in controls. When this option is disabled, users first need to **Apply** their control selection before they are applied to the dashboard.

* To remove all controls from the dashboard, click **Delete all**.

3. Click **Save and close** to apply the changes.


## Edit Options list and Range slider control settings [edit-controls]

Change the settings for the Options list and Range slider controls.

1. Hover over the control you want to edit, then click ![The Edit control icon that opens the Edit control flyout](/explore-analyze/images/kibana-dashboard_controlsEditControl_8.3.0.png "").
2. On the **Edit control** flyout, change the options, then click **Save and close**.

## Add controls from your ES|QL visualization's query [add-esql-control]
## Add ES|QL controls [add-esql-control]
```{applies_to}
stack: preview
serverless: preview
Expand All @@ -129,23 +92,37 @@ prompt control insertion for field values, field names, function configuration,
apply to a specific panel, and exposes visualization configuration such as date histogram interval controls to dashboard users.

:::{note}
Currently, only **Options lists** with static values are supported for ES|QL-based controls.
{applies_to}`stack: ga 9.1` {applies_to}`serverless: ga` Only **Options lists** are supported for ES|QL-based controls. Options can be static values, fields, functions, or values defined by a query.

{applies_to}`stack: ga 9.0` Only **Options lists** with static values are supported for ES|QL-based controls.
:::

1. While editing your ES|QL visualization's query, the autocomplete menu suggests adding a control.
1. Use one of the following options to start creating an ES|QL control:
- {applies_to}`stack: ga 9.1` **From the dashboard Controls menu**: In **Edit** mode, select **Controls** > **Add ES|QL control** in the dashboard toolbar.
- **From your ES|QL visualization's query**: While editing your ES|QL visualization's query, the autocomplete menu suggests adding a control when relevant or when typing `?` in the query.

![ESQL query prompting to add a control](/explore-analyze/images/esql-visualization-control-suggestion.png)

2. A menu opens to let you configure the control. This is where you can specify:

* The name of the control. That is the name that will appear in your ES|QL query, prefixed with a `?` symbol.
* Values available to select for users with this control. You can add multiple values from suggested fields, or type in custom values.
* The type of the control.
* For controls with **Static values**, you select the options available in the controls by entering them manually or by using a dropdown listing available values.
* {applies_to}`stack: ga 9.1` For controls with **Values from a query**, you write an ES|QL query to populate the list of options.
* The name of the control. This name is used to reference the control in ES|QL queries.
* Start the name with `?` if you want the options to be simple static values.
* {applies_to}`stack: ga 9.1` Start the name with `??` if you want the options of the control to be fields or functions.
* Values available to select for users with this control. You can add multiple values from suggested fields, or type in custom values. If you selected **Values from a query**, you must instead write and ES|QL query at this step.
* The label of the control. This is the label displayed for users viewing the dashboard for that control.
* The width of the control.

![ESQL control settings](/explore-analyze/images/esql-visualization-control-settings.png "title =50%")

3. Save the control. The panel closes and the control's name is inserted into your query.
3. Save the control.

The panel closes and the control is added to the dashboard.
If you added it by starting from a query, the control is directly inserted in that query and you can continue editing it.

You can then insert it in any other ES|QL visualization queries by typing the control's name.


**Examples**
Expand Down Expand Up @@ -177,9 +154,45 @@ Currently, only **Options lists** with static values are supported for ES|QL-bas
![Editing ES|QL controls from a dashboard](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte42dfaa404bfc2d6/67d2e31e2e4dc59da190d78f/dashboard-esql-controls.gif)


## Remove controls [remove-controls]
## Configure the controls settings [configure-controls-settings]

Several settings that apply to all controls of the same dashboard are available.

1. In **Edit** mode, select **Controls** > **Settings**.
2. On the **Control settings** flyout, configure the following settings:

* **Label position** — Specify where the control label appears.
* **Filtering** settings:

* **Apply global filters to controls** — Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard.
* **Apply global time range to controls** — Define whether controls should ignore or apply the main time range specified for the dashboard. Note that [time slider controls](#add-time-slider-controls) rely on the global time range and don’t work properly when this option is disabled.

Remove controls from your dashboard.
* **Selections** settings:

1. Hover over the control you want to remove, then click ![The Remove control icon that removes the control from the dashboard](/explore-analyze/images/kibana-dashboard_controlsRemoveControl_8.3.0.png "").
2. On the **Delete control?** window, click **Delete**.
* **Validate user selections** — When selected, any selected option that results in no data is ignored.
* **Chain controls** — When selected, controls are applied sequentially from left to right, and line by line. Any selected options in one control narrows the available options in the next control.
* **Apply selections automatically** — The dashboard is updated dynamically when options are selected in controls. When this option is disabled, users first need to **Apply** their control selection before they are applied to the dashboard.

* To remove all controls from the dashboard, select **Delete all**.

3. Select **Save and close** to apply the changes.


## Edit Options list and Range slider control settings [edit-controls]

Change the settings for Options list and Range slider controls.

1. Hover over the control you want to edit, then select ![The Edit control icon that opens the Edit control flyout](/explore-analyze/images/kibana-dashboard_controlsEditControl_8.3.0.png "").
2. In the **Edit control** flyout, change the options, then select **Save and close**.


## Delete controls [remove-controls]

Delete controls from your dashboard.

1. Hover over the control you want to delete, then select ![The Remove control icon that removes the control from the dashboard](/explore-analyze/images/kibana-dashboard_controlsRemoveControl_8.3.0.png "").
2. In the **Delete control?** window, select **Delete**.

:::{note}
If you delete an ES|QL control that's used in an ES|QL visualization, the visualization will break. You must edit the visualization query and remove or update the control reference.
:::
Binary file modified explore-analyze/images/esql-visualization-control-settings.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading