Search¶

Set keystroke interactions¶

The Hotkeys tab allows for specifying how the Search component should react to certain keystrokes.

• Many search engines utilize the enter or return keys to activate a particular action, such as navigating to a results page or navigating directly to the first result. This is made possible in the Search component through the Enter/Return keystroke actions subtab.

  Use this subtab to configure actions that trigger whenever the end user presses their enter or return keys while the Search component is in focus.

• Want a way to access the search box quickly and easily from anywhere on the page? Create a hotkey using the properties in the Focus Hotkeys subtab. When a user types the key combination, the cursor will jump to the search box, allowing the user to begin typing their search text.

  Note

  Focus Hotkeys work when browsing the page. If the end user is in the middle of a process or interacting with an element on the page—editing a text field, for example—the hotkey combination will not migrate the end user to the search box.

Add actions¶

Use the Action Framework to add user-launched actions to the Search component’s results list. Some examples of actions for the search bar include:

• Launching a record detail page for the selected item
• Opening an associated Skuid page.
• Opening an associated website page.

Types of actions available¶

Best Practices¶

• For a clean and streamlined user experience, place the Search Component into a custom header.
• Use global actions when you want the end user to be able to launch a process for any item in the search returns list; use object-specific actions when you want them to launch actions that are specific to the object or data source.

{{searchValue}} merge variable¶

There are two primary merge variables made available by a Search component:

• {{$Component.componentId.searchValue}}: For use outside of the current Search component. This global merge variable provides the current value the end user has entered within the Search component.

  Typically used within other Button Set components or action sequences.

• {{searchValue}}: For use inside of the current Search component. This provides the current value the end user has entered within the Search component.

  Typically used within a Search component’s global actions or Enter/Return keystroke actions.

Component properties¶

General tab

Properties on this tab modify how the search field operates and is displayed.

• Fields to search: Limit the types of fields included in the search to:
  • Name Fields
  • All Text Fields
  • Email Fields
  • Phone Fields
• Placeholder text (optional): The text that appears in the search box before the end user initiates a search. (The default is “Search.”)
• Searchbox min width: Sets the minimum width of the search bar as it will appear on the page. This is set to 200px by default.
• Preserve search term: When enabled, the search value entered by the end user continues to display in the search box, even if they hover over items in the search dropdown list. Unchecked, the search box will update with each value they hover over in the dropdown, giving users an indication of which result they currently have selected.
• Result limit (optional): Sets a limit for the number of results (per model object) displayed in the search dropdown. For example, a limit of 5 on a page with return objects set for a File object and a Folder object will return up to 5 files and 5 folders matching the search term. If the number of results exceeds the limit, then the end user can still get to the additional results. Click VIEW ALL in the results header to launch a modal that contains additional results.
• Search icon: The icon displayed in the search bar.
• Processing icon: The icon displayed when after the user initiates the search.

• ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec. Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

• ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, refer to MDN web docs.
  • Banner: Used for defining global site details, such as company name, global search, logos, and similar information.
  • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.
  • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.
  • Form: Used to identify sections that comprise a singular form–even though it may be comprised of multiple components.
  • Main: Used to identify primary focus of the page.
  • Navigation: Used to indicate a section containing links for navigating a site.
  • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.
  • Search: Used to indicate a section contains elements for searching the page or site.

• ARIA labelledby: Determines which component contains text describing this element for assistive technologies. Can point to Header or Text components. For more technical information, see MDN web docs on the aria-labelledby attribute.

• Allow HTML in return objects: Determines HTML rendering behavior for each return object’s Header display and Display template contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

  Enabled: This text is important

  Disabled: <strong>This text is important</strong>

Advanced tab

• Unique ID (optional): automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Global Actions tab

Properties on this tab create clickable actions that appear next to each search result. Click add Add action and use action flows to build a process that can be launched directly from the search bar.

• Label: This label hovers over the action.
• Icon: The clickable icon that sits next to the result.

Click add Add Action Step on the Result action added (above), and edit:

• Action Step: Use standard actions to build an action script.

Return Objects tab

The Search component will search across objects specified as return objects and will then display the results to the user based properties specified for each return object.

For each object to be included in the search, click add Add Return Object, and then edit:

• Connection: The connection for the model to be included in the search.

• Entity: The object within the connection.

• Header display icon (optional): The icon appears next to the object’s Header Display Name in the Search return list.

• Header display name: This text heads the search return list to identify items found for this model, and includes a count. If blank, the header defaults to the name of the return object and the count. Can also contain rendered HTML if Allow HTML in return objects is enabled.

• Display template (optional): Determines how each record returned from a search is displayed within a results list, commonly used with merge syntax. For example, {{Name}} {{BillingCountry}} will return items like “Jason Smythe, England.” Can also contain rendered HTML if Allow HTML in return objects is enabled.

• Fields: Use the field picker to select the fields that will be available in the display template.

  Note

  These fields will also be available via merge syntax for your Global Actions, Select Actions, and object-specific actions.

• Fields to order records by (optional): Set how the returned items will be ordered using the field name and the order instructions. For example, Name ASC orders the list by name, from A to Z; Name DESC orders the list by name, from Z to A.

You can add row actions to each Return Object using action flows, to include return object-specific actions that appear next to each search result for that return object.

Keyboard shortcuts