Skip to content

Commit 540b322

Browse files
committed
Remove apply-switch for more granular applies-to
1 parent 4005dc5 commit 540b322

File tree

1 file changed

+25
-185
lines changed

1 file changed

+25
-185
lines changed

explore-analyze/dashboards/add-controls.md

Lines changed: 25 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ There are three types of controls:
1717
* [**Options list**](#create-and-add-options-list-and-range-slider-controls) — Adds a dropdown that allows to filter data by selecting one or more values.
1818
For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add an options list for the `machine.os.keyword` field that allows you to display only the logs generated from `osx` and `ios` operating systems.
1919

20-
![Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected](/explore-analyze/images/kibana-dashboard_controlsOptionsList_8.7.0.png "title =50%")
20+
![Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected](/explore-analyze/images/kibana-dashboard_controlsOptionsList.png "title =50%")
2121

2222
* [**Range slider**](#create-and-add-options-list-and-range-slider-controls) — Adds a slider that allows to filter the data within a specified range of values. This type of control only works with numeric fields.
2323
For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add a range slider for the `hour_of_day` field that allows you to display only the log data from 9:00AM to 5:00PM.
@@ -29,62 +29,22 @@ There are three types of controls:
2929

3030
![Time slider control for the the Last 7 days](/explore-analyze/images/dashboard_timeslidercontrol_8.17.0.gif)
3131

32-
3332
## Create and add Options list and Range slider controls [create-and-add-options-list-and-range-slider-controls]
3433

35-
:::::{applies-switch}
36-
::::{applies-item} stack: ga 9.2
3734
To add interactive Options list and Range slider controls, create the controls, then add them to your dashboard.
3835

3936
1. Open or create a new dashboard.
40-
2. In **Edit** mode, select **Add** > **Controls** > **Control** in the toolbar.
41-
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**.
42-
4. In the **Field** list, select the field you want to filter on.
43-
5. Under **Control type**, select whether the control should be an **Options list** or a **Range slider**.
44-
:::{tip}
45-
Range sliders are for Number type fields only.
46-
:::
37+
2. Add a control.
4738

48-
6. Define how you want the control to appear:
49-
50-
* **Label**: Overwrite the default field name with a clearer and self-explanatory label.
51-
* **Minimum width**: How much horizontal space does the control occupies. The final width can vary depending on the other controls and their own width setting.
52-
* **Expand width to fit available space**: Expand the width of the control to fit the available horizontal space on the dashboard.
53-
54-
7. Specify the additional settings:
55-
56-
* For Options lists:
57-
58-
* Define whether users can select multiple values to filter with the control, or only one.
59-
* For Options list controls on *string* and *IP address* type fields, you can define how the control’s embedded search should behave:
39+
* {applies_to}`stack: ga 9.2` In **Edit** mode, select **Add** > **Controls** > **Control** in the toolbar.
40+
* {applies_to}`stack: ga 9.0` In **Edit** mode, select **Controls** > **Add control** in the dashboard toolbar.
6041

61-
* **Prefix**: Show options that *start with* the entered value.
62-
* **Contains**: Show options that *contain* the entered value. This setting option is only available for *string* type fields. Results can take longer to show with this option.
63-
* **Exact**: Show options that are a 100% match with the entered value.
64-
65-
:::{tip}
66-
The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
67-
:::
68-
69-
* **Ignore timeout for results** delays the display of the list of values to when it is fully loaded. This option is useful for large data sets, to avoid missing some available options in case they take longer to load and appear when using the control.
70-
71-
* 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.
72-
73-
8. Select **Save**. The control can now be used.
74-
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.
75-
10. Save the dashboard.
76-
::::
77-
::::{applies-item} stack: ga 9.0
78-
To add interactive Options list and Range slider controls, create the controls, then add them to your dashboard.
79-
80-
1. Open or create a new dashboard.
81-
2. In **Edit** mode, select **Controls** > **Add control** in the dashboard toolbar.
8242
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**.
8343
4. In the **Field** list, select the field you want to filter on.
8444
5. Under **Control type**, select whether the control should be an **Options list** or a **Range slider**.
85-
:::{tip}
45+
::::{tip}
8646
Range sliders are for Number type fields only.
87-
:::
47+
::::
8848

8949
6. Define how you want the control to appear:
9050

@@ -103,9 +63,9 @@ To add interactive Options list and Range slider controls, create the controls,
10363
* **Contains**: Show options that *contain* the entered value. This setting option is only available for *string* type fields. Results can take longer to show with this option.
10464
* **Exact**: Show options that are a 100% match with the entered value.
10565

106-
:::{tip}
66+
::::{tip}
10767
The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
108-
:::
68+
::::
10969

11070
* **Ignore timeout for results** delays the display of the list of values to when it is fully loaded. This option is useful for large data sets, to avoid missing some available options in case they take longer to load and appear when using the control.
11171

@@ -114,101 +74,27 @@ To add interactive Options list and Range slider controls, create the controls,
11474
8. Select **Save and close**. The control can now be used.
11575
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.
11676
10. Save the dashboard.
117-
::::
118-
:::::
11977

12078
## Add time slider controls [add-time-slider-controls]
12179

122-
:::::{applies-switch}
123-
::::{applies-item} stack: ga 9.2
12480
You can add one interactive time slider control to a dashboard.
12581

12682
1. Open or create a new dashboard.
127-
2. In **Edit** mode, select **Add** > **Controls** > **Time slider control**.
128-
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).
129-
4. Save the dashboard. The control can now be used.
130-
::::
131-
::::{applies-item} stack: ga 9.0
132-
You can add one interactive time slider control to a dashboard.
83+
2. Add a time slider control.
84+
85+
* {applies_to}`stack: ga 9.2` In **Edit** mode, select **Add** > **Controls** > **Time slider control** in the toolbar.
86+
* {applies_to}`stack: ga 9.0` In **Edit** mode, select **Controls** > **Add time slider control**.
13387

134-
1. Open or create a new dashboard.
135-
2. In **Edit** mode, select **Controls** > **Add time slider control**.
13688
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).
13789
4. Save the dashboard. The control can now be used.
138-
::::
139-
:::::
14090

141-
## Add {{esql}} or variable controls [add-esql-control]
14291

143-
:::::{applies-switch}
144-
::::{applies-item} stack: ga 9.2
145-
You can bind controls to your {{esql}} visualizations in dashboards. When creating an {{esql}} visualization, the autocomplete suggestions prompt control insertion for field values, field names, function configuration, and function names. Variable controls act as variables in your {{esql}} visualization queries.
146-
147-
This enables controls that only apply to specific panels in your dashboards, and exposes visualization configuration such as date histogram interval controls to dashboard users.
92+
## Add variable controls [add-variable-control]
14893

14994
:::{note}
150-
Only **Options lists** are supported for variable controls. Options can be:
151-
- values or fields that can be static or defined by a query
152-
- functions {applies_to}`stack: ga 9.1`
95+
In versions `9.0` and `9.1`, variable controls are called {{esql}} controls.
15396
:::
15497

155-
1. Use one of the following options to start creating a variable control:
156-
- In **Edit** mode, select **Add** > **Controls** > **Variable control** in the toolbar.
157-
- On the **Create variable control** flyout, while editing your {{esql}} visualization's query, the autocomplete menu suggests adding a control when relevant or when typing `?` in the query.
158-
159-
![ESQL query prompting to add a control](/explore-analyze/images/esql-visualization-control-suggestion.png)
160-
161-
2. A menu opens to let you configure the control. This is where you can specify:
162-
163-
* The type of the control.
164-
* 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.
165-
* For controls with **Values from a query**, you write an {{esql}} query to populate the list of options.
166-
* The name of the control. This name is used to reference the control in {{esql}} queries.
167-
* Start the name with `?` if you want the options to be simple static values.
168-
* Start the name with `??` if you want the options of the control to be fields or functions. {applies_to}`stack: ga 9.1`
169-
* 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 an {{esql}} query at this step.
170-
* The label of the control. This is the label displayed for users viewing the dashboard for that control.
171-
* The width of the control.
172-
173-
![ESQL control settings](/explore-analyze/images/esql-visualization-control-settings.png "title =50%")
174-
175-
3. Save the control.
176-
177-
The panel closes and the control is added to the dashboard.
178-
If you added it by starting from a query, the control is directly inserted in that query and you can continue editing it.
179-
180-
You can then insert it in any other {{esql}} visualization queries by typing the control's name.
181-
182-
**Examples**
183-
184-
* Integrate filtering into your {{esql}} experience
185-
186-
```esql
187-
| WHERE field == ?value
188-
```
189-
190-
* Fields in controls for dynamic group by
191-
192-
```esql
193-
| STATS count=COUNT(*) BY ?field
194-
```
195-
196-
* Variable time ranges? Bind function configuration settings to a control
197-
198-
```esql
199-
| BUCKET(@timestamp, ?interval),
200-
```
201-
202-
* Make the function itself dynamic
203-
204-
```esql
205-
| STATS metric = ?function
206-
```
207-
208-
![Editing {{esql}} controls from a dashboard](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte42dfaa404bfc2d6/67d2e31e2e4dc59da190d78f/dashboard-esql-controls.gif)
209-
::::
210-
::::{applies-item} {stack: ga 9.0, serverless: preview}
211-
21298
You can bind controls to your {{esql}} visualizations in dashboards. When creating an {{esql}} visualization, the autocomplete suggestions prompt control insertion for field values, field names, function configuration, and function names. {{esql}} controls act as variables in your {{esql}} visualization queries.
21399

214100
This enables controls that only apply to specific panels in your dashboards, and exposes visualization configuration such as date histogram interval controls to dashboard users.
@@ -219,9 +105,9 @@ Only **Options lists** are supported for {{esql}}-based controls. Options can be
219105
- functions {applies_to}`stack: ga 9.1`
220106
:::
221107

222-
1. Use one of the following options to start creating an {{esql}} control:
223-
- **From the dashboard Controls menu**: In **Edit** mode, select **Controls** > **Add {{esql}} control** in the dashboard toolbar. {applies_to}`stack: ga 9.1`
224-
- **From your {{esql}} visualization's query**: While editing your {{esql}} visualization's query, the autocomplete menu suggests adding a control when relevant or when typing `?` in the query.
108+
1. Use one of the following options to start creating a variable control:
109+
- In **Edit** mode, select **Add** > **Controls** > **Variable control** in the toolbar.
110+
- On the **Create variable control** flyout, while editing your {{esql}} visualization's query, the autocomplete menu suggests adding a control when relevant or when typing `?` in the query.
225111

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

@@ -246,6 +132,7 @@ If you added it by starting from a query, the control is directly inserted in th
246132

247133
You can then insert it in any other {{esql}} visualization queries by typing the control's name.
248134

135+
249136
**Examples**
250137

251138
* Integrate filtering into your {{esql}} experience
@@ -273,37 +160,16 @@ You can then insert it in any other {{esql}} visualization queries by typing the
273160
```
274161

275162
![Editing {{esql}} controls from a dashboard](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte42dfaa404bfc2d6/67d2e31e2e4dc59da190d78f/dashboard-esql-controls.gif)
276-
::::
277-
:::::
278163

279164
## Configure the controls settings [configure-controls-settings]
280-
:::::{applies-switch}
281-
::::{applies-item} stack: ga 9.2
282-
Several settings that apply to all controls of the same dashboard are available.
283-
284-
1. In **Edit** mode, select **Add** > **Controls** > **Settings** in the toolbar..
285-
2. On the **Control settings** flyout, configure the following settings:
286-
287-
* **Label position** — Specify where the control label appears.
288-
* **Filtering** settings:
289-
290-
* **Apply global filters to controls** — Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard.
291-
* **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.
292-
293-
* **Selections** settings:
294165

295-
* **Validate user selections** — When selected, any selected option that results in no data is ignored.
296-
* **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.
297-
* **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.
166+
Several settings that apply to all controls of the same dashboard are available.
298167

299-
* To remove all controls from the dashboard, select **Delete all**.
168+
1. Configure the control settings.
300169

301-
3. Select **Save** to apply the changes.
302-
::::
303-
::::{applies-item} stack: ga 9.0
304-
Several settings that apply to all controls of the same dashboard are available.
170+
* {applies_to}`stack: ga 9.2` In **Edit** mode, select **Add** > **Controls** > **Settings** in the toolbar.
171+
* {applies_to}`stack: ga 9.0` In **Edit** mode, select **Controls** > **Settings**.
305172

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

309175
* **Label position** — Specify where the control label appears.
@@ -321,49 +187,23 @@ Several settings that apply to all controls of the same dashboard are available.
321187
* To remove all controls from the dashboard, select **Delete all**.
322188

323189
3. Select **Save and close** to apply the changes.
324-
::::
325-
:::::
190+
326191

327192
## Edit Options list and Range slider control settings [edit-controls]
328-
:::::{applies-switch}
329-
::::{applies-item} stack: ga 9.2
330-
Change the settings for Options list and Range slider controls.
331193

332-
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 "").
333-
2. In the **Edit control** flyout, change the options, then select **Save**.
334-
::::
335-
::::{applies-item} stack: ga 9.0
336194
Change the settings for Options list and Range slider controls.
337195

338196
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 "").
339197
2. In the **Edit control** flyout, change the options, then select **Save and close**.
340-
::::
341-
:::::
342198

343-
## Delete controls [remove-controls]
344-
:::::{applies-switch}
345-
::::{applies-item} stack: ga 9.2
346-
Delete controls from your dashboard.
347199

348-
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 "").
349-
2. In the **Delete control?** window, select **Delete**.
200+
## Delete controls [remove-controls]
350201

351-
:::{note}
352-
If you delete a variable control that's used in an {{esql}} visualization, the visualization will break. You must edit the visualization query and remove or update the control reference.
353-
:::
354-
::::
355-
::::{applies-item} stack: ga 9.0
356202
Delete controls from your dashboard.
357203

358204
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 "").
359205
2. In the **Delete control?** window, select **Delete**.
360206

361207
:::{note}
362-
If you delete an {{esql}} control that's used in an {{esql}} visualization, the visualization will break. You must edit the visualization query and remove or update the control reference.
208+
If you delete an variable control that's used in an {{esql}} visualization, the visualization will break. You must edit the visualization query and remove or update the control reference.
363209
:::
364-
365-
::::
366-
:::::
367-
368-
369-

0 commit comments

Comments
 (0)