Search¶

Create a hotkey¶

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

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.

Basic tab [[]]¶

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

1. Fields to Search: Limit the types of fields included in the search to:
   • Name Fields
   • All Text Fields
   • Email Fields
   • Phone Fields
2. Placeholder Text (optional): The text that appears in the search box before the end user initiates a search. (The default is “Search.”)
3. Searchbox Width: Sets the maximum width of the search bar as it will appear on the page. This is set to 200px by default.
4. 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 drop-down list. Unchecked, the search box will update with each value they hover over in the drop-down, giving users an indication of which result they currently have selected.
5. 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.
6. Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
7. CSS Class (optional): Assign a CSS class to the component’s DOM element.

Global Actions tab [[]]¶

Properties on this tab create clickable actions that appear next to each search result. Use with the Action Framework to build a process that can be launched directly from the search bar.

1. Result Actions include the following label options:
   • Label: This label hovers over the action.
   • Icon: The clickable icon that sits next to the result.
2. Action Step: Use standard Action Framework actions to build an action script.

Focus Hotkeys tab [[]]¶

This tab allows you to establish a set of hotkeys that will shift the cursor focus immediately to the search bar, no matter where the end user is browsing on the page. Select the modifier and key, then test.

1. Modifiers include:
   • Alt
   • Ctrl
   • Command
   • Shift
2. Key: Lists all available keys.
3. Ignore Hot Key if user is typing in input element: If checked, the hotkey combination will be ignored while the end user is entering content into any text field. (Useful if the hotkey combo would conflict with standard data entry keys, like arrows keys.)

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 fa-plus-circle Add Return Object, and then edit:

• Data Source: The data source for the model to be included in the search.

• Entity: The object within the data source.

• URL Endpoint: For data sources that do not have objects/entities, the URL Endpoint of the item to use as the return object.

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

• 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.”

• Path to Contents: The path to the URL Endpoint to obtain the data.

• Fields: Use the field picker to select the field(s) 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.

• Result Limit (optional): Sets a limit for the number of results (per model object) displayed in the “View” popup.

• Search Parameter: (Required for REST data sources) Specify the URL parameter that governs the search action (for example, search) within the URL endpoint.

• Fields Parameter: (Required for REST data sources) Specify the URL parameter that governs what is searched (for example, fields) within the URL endpoint.

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

Select Actions tab [[]]¶

Use the Action Framework to select actions that will execute when a end user clicks an item on an item in the search result list.