Lookup

Anatomy

Learn about the individual parts of Lookup.

Search card anatomy

1. Reference type: Heading, with link disabled; variant: title-primary
2. Search input: Enables users to easily find any tables
3. Create button: Adds new contacts, accounts, or assets

Search results anatomy

1. Number of records: The total number of records available and how many are displayed
2. Results card: Card with card header and body with contextual action enabled
3. Record name: Header leverages heading sub-component with link enabled
4. Record information: Stacked label value component provides information from the assigned record; configured by the admin in UI Builder
5. Link button: Enables agents to quickly connect accounts, assets, or contacts to a specific case. Admins can configure the link button to display or not; default is to display.
6. Results pagination: Leverages pagination control sub-component, displays navigation arrows; helps navigate between search pages

Search results card anatomy

1. Edit action: Header leverages heading sub-component, with link enabled; refer to heading component for specifics
2. Ellipsis action: Opens a dropdown menu with user actions, edit and unlink
3. Record information: The stacked label value component provides information from the assigned record, configured by the admin in UI Builder
4. Unlink action: Leverages dropdown sub-component; this action reverts the component back into a ‘search’ state to find another record to link to the record you are viewing

Create and edit card anatomy

1. Subtitle: Leverages heading sub-component; this heading provides context of this view that displays upon editing a contact contextually in the lookup component
2. Open in child tab action: Leverages button bare variant; this action opens the contact record in a child tab to provide more room to edit the contact details
3. Form: Leverages form sub-component; displays a form view of record fields from the record you’re editing
4. Cancel action: Leverages button sub-component; reverts any form changes and component directs back to the ‘linked’ view of record
5. Save action: Leverages button sub-component; updates the associated record with the changes made. Component directs back to ‘linked’ view of the record, reflecting the new changes made in the edit contact details.

Usage

Learn about how to use record lookup to satisfy different use cases.

Variants

You can configure these variants for different tables in the instance. The table and the defined data is configurable.

1. Contact: Displays information about a specific ‘account’ record type
2. Account: Displays information about a specific ‘consumer’ user type
3. Product: Displays information about a specific ‘asset’ user type

Configurations

Learn how to customize Record lookup by configuring the available properties.

Presets and controllers

This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.

A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.

Configurable header

Admins can configure the options available in the header of the lookup component to meet different use cases.

1. Creation option (on): Enables the 'Create New' button that lets users easily add a new contact, account, or asset.
2. Creation option (off): Disables the 'Create New' button that indicates users are unable to add new contacts, accounts, or assets.
3. All options (on): Enables the 'Edit' and 'Unlink' actions so users can modify details or disconnect contacts, accounts, or assets from a case.
4. Modify option (off): In certain scenarios, the 'Modify' function may be unavailable, limiting the ability to modify details of contacts, accounts, or assets.
5. Unlink option (off): In certain scenarios, the ‘Unlink’ function may be unavailable, limiting the ability to unlink the record.
6. All options (off): In certain scenarios, both the 'Modify' and ‘Unlink’ function may be unavailable, limiting the ability to modify details of contacts, accounts, or assets.

1. Ellipsis action: Opens a dropdown menu with user actions, edit and unlink.
2. Collapse and Expand option: Toggles the visibility of the linked card content fields; select this option on the Linked card configuration panel to enable; this option is disabled by default.
3. Highlighted value: Fields with highlighted value display in linked card.

Type of reference

You can configure lookup to use different tables and data according to your use cases. The following are examples of reference types you can use.

Behavior

Learn how record lookup behaves when the display changes or a user interacts with the component.

States

Lookup has the following empty states: Unconfigured, No search results, and Error.

Responsive behaviors

Learn how record lookup responds to changes in a container or display.

Resizing

The only part of this component is a container. It resizes based on it’s containing component. For example, within the ribbon of the record header, the component resizes along with that component accordingly. The component is responsive in nature, so it adapts well with 200% zoom changes. Label value pairs stack into a single column at this high zoom levels.

Interactions

Learn how record lookup responds when a user interacts with it.

Create button

When the user selects the create button, a creation form appears.

Link button

When linking a record from the results screen, the user is taken to a record view that shows information about the linked record.

Edit button

When viewing a linked record in the lookup component, there is an option to edit the record contextually. Select the button to see a form view of the actions.

Unlink button

When viewing a linked record in the lookup component, there is an option to unlink the record. Select this button to return to the search state.

Text hinting

When starting to type, shows a preview from the type ahead indicating how many characters you need to type in order to see results.

Collapse and Expand button

Select the caret to hide content and only display the card title and its actions. When the Show record link setting is enabled, the collapsed state displays the record link.

When the Show record link setting is disabled, the record link is always hidden, whether the card is expanded or collapsed.

Usability

Learn how record lookup responds when a user interacts with it.

Record lookup complies with all internationalization and accessibility requirements.

Internationalization

When this component is used in a platform configured for a right-to-left (RTL) language, the text rearranges accordingly.

Accessibility

Learn how to access the actionable elements of Record lookup through keyboard interactions and screen readers.

Record lookup tab order

Keyboard interactions

The entire component is a tab group. Select enter on the keyboard to enter the tab group and navigate the set of links within the component.

Screen readers

When you apply ARIA labels to a component, screen readers announce the controls and content of Record lookup in the prescribed tab order.

Polite-level aria-live messages are announced for the following user interactions:

• The user links a record
  • Message: “The information has been linked.”
• The user verifies a linked record
  • Message: “The information has been verified.”
• The user saves a newly created record
  • Message: “The information has been created and verified.”
• The user saves an edited record
  • Message: “The information has been edited.”
• The user unlinks a record
  • Message: “The information has been unlinked.”