Skip to content

Conversation

alaudazzi
Copy link
Contributor

This PR:

  • Renames ES|QL controls to Variable controls
  • Resizes existing screenshots to show just the area in question without titles or menu bars that require maintenance over time. They are enough contextualized to remain helpful
  • Aligns the text with 9.2 UI

Note for the reviewers:

  • I'm figuring out how to refresh animated GIFs like this one:
    ![Editing {{esql}} controls from a dashboard](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte42dfaa404bfc2d6/67d2e31e2e4dc59da190d78f/dashboard-esql-controls.gif)
  • The Applies switch mechanism is not working as expected

Closes #3013

@alaudazzi alaudazzi self-assigned this Oct 6, 2025
@alaudazzi alaudazzi requested review from a team as code owners October 6, 2025 10:59
@alaudazzi alaudazzi added documentation Improvements or additions to documentation enhancement New feature or request labels Oct 6, 2025
Copy link

github-actions bot commented Oct 6, 2025

🔍 Preview links for changed docs

Copy link
Contributor

@benironside benironside left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Left some suggestions, I hope they are helpful 🚀

6. Define how you want the control to appear:

* **Label**: Overwrite the default field name with a clearer and self-explanatory label.
* **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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **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.
* **Minimum width**: Specify how much horizontal space the control should occupy. The final width can vary depending on the other controls and their own width setting.

* For Options lists:

* Define whether users can select multiple values to filter with the control, or only one.
* For Options list controls on *string* and *IP address* type fields, you can define how the control’s embedded search should behave:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* For Options list controls on *string* and *IP address* type fields, you can define how the control’s embedded search should behave:
* For controls on *string* and *IP address* type fields, define how the control’s embedded search should behave:

IIUC this whole list is about options lists so we don't need to specify again here. Removed "you can" to match the previous bullet.


* **Prefix**: Show options that *start with* the entered value.
* **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.
* **Exact**: Show options that are a 100% match with the entered value.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Exact**: Show options that are a 100% match with the entered value.
* **Exact**: Show options that are an **exact** match with the entered value.

This would be similar to the previous two bullet points.

The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
::::

* **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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **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.
* **Ignore timeout for results:** Delays display of the list of values until it is fully loaded. This 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.


* **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.

* 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* 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.
* For Range sliders, set the step size. The step size determines the slider's number of steps. The smaller a slider's step size, the more steps it has.


* 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* For controls with **Values from a query**, you write an {{esql}} query to populate the list of options.
* For controls with **Values from a query**, 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. {applies_to}`stack: ga 9.1`
* 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* 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 values users can select for 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.

More similar to other bullet points this way.


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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Several settings that apply to all controls of the same dashboard are available.
Several settings apply to all controls that are part of a dashboard.


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

1. In **Edit** mode, select **Add** > **Controls** > **Settings** in the toolbar..
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. In **Edit** mode, select **Add** > **Controls** > **Settings** in the toolbar..
1. In **Edit** mode, select **Add** > **Controls** > **Settings** in the toolbar.

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

* **Label position** — Specify where the control label appears.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Label position** Specify where the control label appears.
* **Label position**: Specify where the control label appears.

Maybe : here since the next bullet uses it too?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Kibana]: ES|QL controls changing name to Variable controls
3 participants