atomic-field-condition

This is for:

Developer
In this article

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 (e.g., 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 is not satsified, 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

conditions

A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute.

Use only when the condition you need to define can’t be expressed through if-defined, if-not-defined, must-match, etc. markup attributes of the component. For example, the following targets an atomic-field-condition component and sets a condition to make it apply only to results whose title contains singapore: document.querySelector('atomic-result-template#templateId').conditions = [(result) => /singapore/i.test(result.title)];

ResultTemplateCondition[]

[]

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[]>

{}