atomic-field-condition

This is for:

Developer
In this article
Note

This component was introduced in version 1.0.4.

See Display results to learn more about customizing your result templates.

The atomic-field-condition component takes a list of conditions that, if fulfilled, apply the template in which it’s defined. The condition properties can be based on any top-level result property of the result object, not restricted to fields (for example, isRecommendation).

Best practices

Usage notes

  • The must-match and must-not-match markup attributes require kebab-case when referring to a result property whose name is in camelCase. For example, the isRecommendation property should be written as is-recommendation.

    <atomic-field-condition must-match-is-recommendation="true">
  <!-- ... -->
</atomic-field-condition>

  • Regardless of whether its condition is satisfied, the atomic-field-condition component will render all its children and itself. If its condition isn’t satisfied, it will then remove itself and its children from the DOM. For example, consider the following:

    <atomic-field-condition if-not-defined="thumbnailurl">
  <atomic-result-icon class="icon"></atomic-result-icon>
</atomic-field-condition>

<atomic-field-condition if-defined="thumbnailurl">
  <atomic-result-image field="thumbnailurl"></atomic-result-image>
</atomic-field-condition>

    When the thumbnailurl field isn’t defined on a result, the atomic-result-icon will be rendered as expected. However, the atomic-result-image (nested in the second atomic-field-condition) will also be rendered and subsequently removed from the DOM. This will produce a console warning, as the thumbnailurl is undefined when it’s referenced by the atomic-result-image component.

Properties

Property Attribute Description Type Default

ifDefined

if-defined

Verifies whether the specified fields are defined.

string | undefined

ifNotDefined

if-not-defined

Verifies whether the specified fields are not defined.

string | undefined

mustMatch

must-match

The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose filetype is lithiummessage or YouTubePlaylist: must-match-filetype="lithiummessage,YouTubePlaylist"

Record<string, string[]>

{}

mustNotMatch

must-not-match

The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose filetype is not lithiummessage: `must-not-match-filetype="lithiummessage"

Record<string, string[]>

{}

Slots

Slots let you write custom HTML at a specific place inside a web component.

Slot Description

default

The content to display if the conditions are met.