[Docs] ES|QL controls improvements (#225521)

8.19 equivalent of https://github.com/elastic/docs-content/pull/1917

docs/user/dashboard/dashboard-controls.asciidoc

@@ -21,7 +21,7 @@ image::images/dashboard_controlsRangeSlider_8.3.0.png[Range slider control for t
 
 * <<add-time-slider-controls,*Time slider*>> &mdash; 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. 
 [role="screenshot"]
 image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt672f3aaadf9ea5a6/6750dd6c2452f972af0a88b4/dashboard_timeslidercontrol_8.17.0.gif[Time slider control for the the Last 7 days]
 
@@ -34,9 +34,6 @@ To add interactive Options list and Range slider controls, create the controls,
 . Open or create a new dashboard. 
 
 . In *Edit* mode, select *Controls* > *Add control* in the dashboard toolbar.
-+
-[role="screenshot"]
-image::images/dashboard-add-control-8.15.0.png[Controls button in the toolbar with the Add Control option selected, width=60%]
 
 . 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*.
 
@@ -69,7 +66,7 @@ TIP: The search is not case sensitive. For example, searching for `ios` would st
 
 * 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.
 
-. Click *Save and close*. The control can now be used.
+. Select *Save and close*. The control can now be used.
 
 . 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 <<configure-controls-settings,Chain controls>> setting is enabled.
 
@@ -84,79 +81,55 @@ You can add one interactive time slider control to a dashboard.
 . Open or create a new dashboard. 
 
 . In *Edit* mode, select *Controls* > *Add time slider control*.
-+
-[role="screenshot"]
-image::images/dashboard-add-time-slider-control-8.15.0.png[Controls button in the toolbar with the Add a time slider option selected, width=60%]
 
 . The time slider control uses the time range from the global time filter. To change the time range in the time slider control, <<set-time-filter,change the global time filter>>. 
 
 . Save the dashboard. The control can now be used.
 
-
-
-[float]
-[[configure-controls-settings]]
-==== Configure the controls settings
-
-Several settings that apply to all controls of the same dashboard are available.
-
-. In *Edit* mode, select *Controls* > *Settings*.
-+
-[role="screenshot"]
-image::images/dashboard-controls-settings-8.15.0.png[Controls button in the toolbar with the Settings option selected, width=60%]
-
-. On the *Control settings* flyout, configure the following settings:
-
-* *Label position* &mdash; Specify where the control label appears.
-
-* *Filtering* settings:
-
-** **Apply global filters to controls** &mdash; Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard.
-** **Apply global time range to controls** &mdash; Define whether controls should ignore or apply the main time range specified for the dashboard. Note that <<add-time-slider-controls,time slider controls>> rely on the global time range and don't work properly when this option is disabled.
-
-* *Selections* settings:
-
-** *Validate user selections* &mdash; When selected, any selected option that results in no data is ignored.
-** *Chain controls* &mdash; 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** &mdash; 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*.
-
-. Click *Save and close* to apply the changes.
-
-[float]
-[[edit-controls]]
-==== Edit Options list and Range slider control settings
-
-Change the settings for the Options list and Range slider controls.
-
-. Hover over the control you want to edit, then click image:images/dashboard_controlsEditControl_8.3.0.png[The Edit control icon that opens the Edit control flyout].
-
-. On the *Edit control* flyout, change the options, then click *Save and close*.
-
 [float]
 [[esql-controls]]
 ==== Add controls from your {esql} visualization's query
 
 preview:[]
 
-You can bind controls to your ES|QL visualizations in dashboards. When creating an {esql} visualization, the autocomplete suggestions prompt control insertion for field values, field names, function configuration, and function names (function names are currently available for Elastic Cloud Serverless only). This enables controls that only apply to a specific panel, and exposes visualization configuration such as date histogram interval controls to dashboard users.
+You can bind controls to your ES|QL 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.
 
-NOTE: Currently, only **Options lists** with static values are supported for {esql}-based controls.
+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.
 
-. While editing your {esql} visualization's query, the autocomplete menu suggests adding a control +
+[NOTE]
+====
+Only **Options lists** are supported for {esql}-based controls. Options can be:
+
+* values or fields that can be static or defined by a query
+* functions
+====
+
+. Use one of the following options to start creating an {esql} control:
+** **From the dashboard Controls menu**: In **Edit** mode, select **Controls** > **Add {esql} control** in the dashboard toolbar.
+** **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. +
 +
 image::images/esql-visualization-control-suggestion.png[ESQL query prompting to add a control]
 
 . 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 {esql} 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. 
+*** For controls with **Values from a query**, you write an {esql} query to populate the list of options.
+** The name of the control. This name is used to reference the control in {esql} queries.
+*** Start the name with `?` if you want the options to be simple static values.
+*** 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 an {esql} 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. +
 +
 image::images/esql-visualization-control-settings.png[ESQL control settings, width="50%"]
 
+. 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 {esql} visualization queries by typing the control's name.
 
 **Examples**
 
@@ -190,12 +163,51 @@ image::images/esql-visualization-control-settings.png[ESQL control settings, wid
 
 image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte42dfaa404bfc2d6/67d2e31e2e4dc59da190d78f/dashboard-esql-controls.gif[Editing ES|QL controls from a dashboard]
 
+[float]
+[[configure-controls-settings]]
+==== Configure the controls settings
+
+Several settings that apply to all controls of the same dashboard are available.
+
+. In *Edit* mode, select *Controls* > *Settings*.
+
+. On the *Control settings* flyout, configure the following settings:
+
+* *Label position* &mdash; Specify where the control label appears.
+
+* *Filtering* settings:
+
+** **Apply global filters to controls** &mdash; Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard.
+** **Apply global time range to controls** &mdash; Define whether controls should ignore or apply the main time range specified for the dashboard. Note that <<add-time-slider-controls,time slider controls>> rely on the global time range and don't work properly when this option is disabled.
+
+* *Selections* settings:
+
+** *Validate user selections* &mdash; When selected, any selected option that results in no data is ignored.
+** *Chain controls* &mdash; 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** &mdash; 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*.
+
+. Select *Save and close* to apply the changes.
+
+[float]
+[[edit-controls]]
+==== Edit Options list and Range slider control settings
+
+Change the settings for the Options list and Range slider controls.
+
+. Hover over the control you want to edit, then select image:images/dashboard_controlsEditControl_8.3.0.png[The Edit control icon that opens the Edit control flyout].
+
+. On the *Edit control* flyout, change the options, then select *Save and close*.
+
 [float]
 [[remove-controls]]
-==== Remove controls
+==== Delete controls
 
-Remove controls from your dashboard.
+Delete controls from your dashboard.
 
-. Hover over the control you want to remove, then click image:images/dashboard_controlsRemoveControl_8.3.0.png[The Remove control icon that removes the control from the dashboard].
+. Hover over the control you want to delete, then select image:images/dashboard_controlsRemoveControl_8.3.0.png[The Delete control icon that removes the control from the dashboard].
 
-. On the *Delete control?* window, click *Delete*.
+. On the *Delete control?* window, select *Delete*.
+
+NOTE: 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.