Search

While some Nintex Apps data components (including the Deck, Form List, and Table), offer optional search within the model the component is assigned to, the Search component allows end users to globally search specified fields across any object accessible through a Nintex Apps connection— even those not represented by models on the Nintex Apps page.

Custom actions can be launched right from the Search bar using Action flows, for example, opening a record's detail page for the selected search result.

Using the Search Component

Note:  The content below assumes you have a Nintex Apps page and at least one working model.

Add the Search component to facilitate global search across multiple objects. Once the component is added to the page, set the properties:

  1. Set the Search properties. ( General tab)
  2. Identify which objects should be included in the search by adding them as a row action and add formatting for each model's header and displays. ( Return Objects tab)

That's it—now users can search for content across multiple objects, with the search results organized by object.

Set keystroke interactions

The Keyboard shortcuts 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 keyboard shortcut using the properties in the Focus keyboard shortcuts 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 keyboard shortcuts 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 keyboard shortcut combination will not migrate the end user to the search box.

Add actions

Use Action flows 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 Nintex Apps page.
  • Opening an associated website page.

Types of actions available

Global actions

Actions created on the Search properties Global Action tab will appear as next to each search result and are activated by clicking their label or icon.

Object-specific actions

Object-specific actions are created on the Return Objects tab, under the specific return object. These work like the Global actions, but will only appear next to search results for the specific return object.

Enter/Return keystroke actions

These actions occur whenever the end user presses the Enter or Return keys while the Search component is in focus. They are configured within the Keyboard shortcuts > Enter/Return keystrokes subtab.

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

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

Properties

Component properties

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

  • Unique ID (optional): Nintex Apps generates an alphanumeric ID for the component. If preferred, give an appropriate name.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style variant drop-down menu.

    Note: 

    • To refresh available style variant options, click Refresh style variants.

    • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Fields to search: Limit the types of fields included in the search to:

    • Name fields

    • All text fields

    • Email fields

    • Phone fields

  • Search results: Determines how search terms are matched in the results.

    • Match exactly

    • Contain all terms

    • Contain at least one term

  • Placeholder text (optional): The text that appears in the search box before the end user initiates a search. The default is "Search".

  • 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 after the user initiates a search.

  • Preserve search term: When enabled, the search value entered by the end user continues to display in the search box, even when they hover over items in the search dropdown list. When disabled, the search box updates to show the value of the item currently hovered over in the dropdown, indicating which result is selected..

  • 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:

    When enabled:

    This text is important

    When disabled:

    <strong>This text is important</strong>

  • Searchbox min width: Sets the minimum width of the search bar on the page. This is set to 200px by default.

  • Margins: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.

    • To set margins for each side individually, click Separate.

    Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

Standard display logic options are available to display or hide the component or feature.

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

  • Filter action flows: Search for an action flow using its name. Existing action flows are listed below this field. Select an action flow to use it.

  • Create new action flow: Opens the action flow canvas to build an action flow.

  • Label: This label hovers over the action.

  • Icon: The clickable icon that appears next to the result.

The Search component searches across objects specified as return objects and displays the results to the user based on properties specified for each return object.

To include an object in the search, click Add return object, and then edit:

  • Connection: The connection used by the model in the search. Configuration fields vary based on the selected model.

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

  • Header display name: The text that heads the search return list to identify items found for this model, and includes a count. If left blank, the header defaults to the name of the return object and the count. Can 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: Select the fields to show in the display template.

    Note:  These fields are also 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 are 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.

Enter/Return keystroke actions

This is used to configure a set of Action flows actions that run whenever the end user has the Search component in focus and presses the Enter or Return key on their keyboard. These actions are often used in conjunction with the {{searchValue}} merge variable.

Typical examples include opening a list page of results, searching a knowledge base, or redirecting to a Google search for the selected query result. These types of UX patterns are often found in communities and portals.

To add actions, click Add action and then configure actions as needed. For more information, see action flows topic.

 

Focus keyboard shortcuts

This tab allows you to set keyboard shortcuts that shift the cursor focus immediately to the search bar, no matter where the end user is on the page. Select the modifier and key, then test.

Note:  Nintex Apps focus keyboard shortcuts will not override keyboard shortcuts previously assigned by the operating system or browser, so be sure to test the key combination. If it's not providing the expected results, the key combination may already be assigned. Try a different combination.

Click Add keyboard shortcut and then configure:

  • Modifiers include:

    • Alt

    • Ctrl

    • Command

    • Shift

  • Key: Lists all available keys.

  • Ignore keyboard shortcut if user is typing in input element: If enabled, the keyboard shortcut combination is ignored while the end user types in any text field. This is useful if the keyboard shortcut conflicts with standard data entry keys, such as arrows keys.