Intro

The shell search in the shell bar helps users quickly find information and resources across your product or product suite. It provides a unified experience with results from all connected systems, enabling users to locate objects from a single entry point.

Shell search

When to Use

Anatomy

The shell search has two main parts:

• Search field: Users type their queries in this input field.
• Suggestion list (optional): Displays a dropdown list of suggestions or results when the search field is focused or when the user starts typing. As the search input changes, the list updates to show relevant results.

Search field

Anatomy of the shell search field

1. Placeholder (mandatory): A guiding text that is displayed when the search field is empty or not selected. See the guidelines for placeholder text.
2. Magnifier icon button (mandatory):
   The magnifier icon button (:icon-search) supports two actions, depending on the state of the search field:
   a. Inactive State: When the search is inactive (no query), the button expands or collapses the search field.
   b. Active State: When the search is active, the button executes the search.
3. Search query: Text the user enters in the search field. This input triggers the suggestion list with relevant results.
4. Autocomplete (mandatory): Provides real-time query completions and suggestions as users type.
5. Clear Search button (mandatory): Clears the search field.
6. Scope selector (optional): Lets users preselect a search scope, such as a business object, area, or type. The default scope is "All." Users can switch to a specific scope to search only within that scope.
7. Advanced filtering (optional): Provides quick access to advanced filter options through a filter icon button (:icon-filter1). The presentation, interaction pattern, and structure of advanced filters are flexible and tailored to individual product requirements.

Suggestion list

Anatomy of the suggestion list (includes all types of list items for reference)

1. Suggestions dropdown: Contains the list of search results.
2. Text message area (optional): Displays contextual guidance to help users understand what to search for or to highlight newly introduced capabilities within the search experience.
3. List: Displays search results ordered by relevance. The top five best matches are shown first, followed by additional relevant results.
4. Suggestion list item: Displays search suggestions in the list using different list item types. See Suggestion List Item Types.
5. Tertiary footer button (optional): When a dedicated search results page is available, a footer button provides access to the complete set of results.
6. Action buttons (optional):
   a. Delete search history (:icon-decline1): Removes search history entries from the suggestions (as configured at application level).
   b. Secondary action: Supports secondary actions that don't affect the list item itself. These actions typically open additional information about the suggestion, allowing users to access more details without leaving the search context. Don't use the secondary actions for navigation or for performing business actions like approve or reject.
   See List Item Actions.

Suggestion List Item Types

To help users easily identify how suggestions relate to their search query, matched text within each suggestion list item is highlighted in bold. The following types of suggestion list items are available out of the box.

Standard list item

Text message area

Group header

"Show More"

List item with byline

Prefix list item

When building a query, prefix list items help define the scope of each part, guiding the search toward specific categories.

Example of a guided query

"Search In" list item

Behavior and Interaction

The following examples illustrate the search flow, from typing a query to displaying the list of suggestions.

Search icon button: expand and collapse

The default state of the shell search can be either expanded, showing the whole search field, or collapsed, displaying only the search icon.

Expanding and collapsing the shell search button

A: Default (collapsed)
B: Pressed (collapsed)
C: Active (expanded)
D: Hover (expanded)
E: Pressed (expanded)
F: Back to default (collapsed)

Search query and trigger

When the user triggers the search field, the field transitions to the pressed state and provides immediate visual feedback. On focusing, the field becomes active, allowing the user to enter a query.

As the user types, results are loaded dynamically via autocomplete. A suggestion list appears below the search field, showing relevant suggestions based on the input.

Basic search interaction flow

When the search is triggered, the suggestion list popover closes, and the search field transitions to one of two states, depending on the navigation outcome: Regular or Searched.

Two states after triggering the shell search

A: Regular state: Applied when the search opens results in a new window or tab, or navigates within the product (for example, selecting an object from the suggestion list that opens its overview page).

B: Searched state: Applied when the search navigates to a dedicated search results page, or when returning to the page where the search was initiated after navigating elsewhere (for example, navigating from search results to an object page and then back to the results to continue exploration).

Autocomplete

Autocomplete suggests system-generated values that start with the user's input. The first matching suggestion is offered as the autocomplete value, with the matching text visually emphasized. Users can accept the suggestion by pressing the Right Arrow key to complete the query.

Autocomplete in shell search

Initial state

Empty state

Busy state

Clearing a search query

The Clear Search icon button appears when the search field is active and contains text. The query remains in the search field until the user removes it using the backspace key or by triggering the Clear Search button (:icon-decline1).

Clearing a search query

List item actions

Users can remove individual search history entries from the suggestions list using the remove icon button (:icon-decline1). For mouse users, the delete button appears on hover. For keyboard users, it becomes visible when focused. On touch devices, the delete button is always visible.

Deleting suggestions from the search history

You can add an optional secondary action icon button to list items for actions that don't affect the list item itself. These actions typically display additional information, allowing users to access helpful content without leaving the search context. Avoid using secondary actions for navigation or for performing business actions on list items, such as approve and reject.

Secondary action button

Responsive Behavior

Desktop and tablet devices

Responsiveness for desktop and tablet devices

On tablets and desktop devices, the suggestion list appears as a dropdown. The suggestion list follows the responsive popover behavior. The search field is displayed either in expanded form or as a collapsed icon, depending on the available space in the shell bar.

For smaller breakpoints, the search field is represented by an icon button that expands to fill the full width of the shell bar. If there are multiple icon buttons in the shell bar, the search may move into the overflow menu. When space in the shell bar is limited, the search input expands to occupy the full width, and a Cancel button appears. The Cancel button clears any existing queries and collapses the search field.

Shell search input field with smaller breakpoints

Phones

For mobile phones, the search field is represented by an icon button. If there are multiple icon buttons in the shell bar, the search may move into the overflow menu. When triggered, the icon button expands to fill the full width of the shell bar. If a suggestion list is configured, it opens in full screen mode.

Responsiveness for phones

If scope selection or advanced filtering is enabled, the scope selection opens in fulls creen mode.

Scope selection for phones

Guidelines for Placeholder Text

The placeholder text must clearly indicate the scope of the shell search.

General Rules

• Start the placeholder text with Search.
• Avoid truncation. Only add one or multiple scopes if there is sufficient space. Remember that other languages may require more space than English.
• Use title case.
• Align the placeholder text with your content and translation experts.

Format

Use the following format:

Related Links