Search result components

This page documents the search result components for customizing record search displays. For deposit form components, see Deposit form components.

Result item components

Search apps display results using list or grid layouts. The most commonly customized component is the result item.

ResultsListItem

Displays individual records in search results. This component receives a result object containing the record metadata:

ui/mymodel/semantic-ui/js/Search/ResultsListItem.jsx


import React from "react";
import { RecordFacetsLabels } from "@js/oarepo_ui/search";
import { RecordAuthors } from "@js/invenio_app_rdm";
import _ from "lodash";
 
export const ResultsListItem = ({ result }) => {
  return (
    <div className="result-item">
      <a href={result.links.self_html}>
        <h3>{result.metadata.title}</h3>
      </a>
 
      <div className="record-authors">
        <RecordAuthors creators={result.metadata.creators} />
      </div>
 
      <div className="record-keywords">
        {_.get(result, "metadata.subjects", []).map((subject, idx) => (
          <span key={idx} className="badge">
            {subject.title || subject}
          </span>
        ))}
      </div>
 
      <div className="record-date">
        Published: {result.metadata.publicationDate}
      </div>
    </div>
  );
};

Result object structure

The result object contains:

Property	Description
`result.id`	Record ID
`result.links.self_html`	Link to render (detail) page
`result.metadata`	Record metadata fields
`result.created`	Creation date
`result.updated`	Last update date

ResultsGridItem

Similar to ResultsListItem but optimized for grid layout views:

ui/mymodel/semantic-ui/js/Search/ResultsGridItem.jsx


export const ResultsGridItem = ({ result }) => {
  return (
    <div className="result-grid-item">
      <h4>{result.metadata.title}</h4>
      <p>{_.get(result, "metadata.description", "").substring(0, 150)}...</p>
    </div>
  );
};

Utility components

These components are available for building search result items:

RecordAuthors

Displays creators/contributors with links:


import { RecordAuthors } from "@js/invenio_app_rdm";
 
<RecordAuthors creators={result.metadata.creators} />

RecordFacetsLabels

Displays facet labels for vocabulary fields:


import { RecordFacetsLabels } from "@js/oarepo_ui/search";
 
<RecordFacetsLabels
  aggs={result.aggs}
  metadata={result.metadata}
  vocabularies={{ subjects: "subjects" }}
/>

Global search with multiple record models

The global search component provided by oarepo-ui can render search results containing records of different types (e.g., datasets, publications, documents). It uses each record’s $schema field to determine which component to render for that specific record type.

How it works

The global search app renders a ResultsList component
For each record in the results, it reads the $schema field (e.g., "schemas/datasets-v1.0.0.json")
Based on the schema, it dynamically selects the appropriate ResultsListItem component for that record type

This allows a single search page to display heterogeneous results where records of different models are rendered with their respective custom components.

Registering custom result list items

To use a custom result list component for a specific record model, register it with the register_result_list_item() method:


from oarepo_ui.overrides import UIComponent, UIComponentImportMode
from oarepo_ui.resources.records.config import RecordsUIResourceConfig
from oarepo_ui.proxies import current_oarepo_ui
 
class DatasetsUIResourceConfig(RecordsUIResourceConfig):
    model_name = "datasets"
 
    search_component = UIComponent(
        import_name="DatasetsResultsListItem",
        import_path="@js/datasets/search/ResultsListItem",
        import_mode=UIComponentImportMode.DEFAULT,
    )
 
def ui_overrides(app):
    """Register search result items during app initialization."""
    ui_resource_config = DatasetsUIResourceConfig()
 
    if (
        current_oarepo_ui is not None
        and ui_resource_config.model
        and ui_resource_config.model.record_json_schema
        and ui_resource_config.search_component
    ):
        current_oarepo_ui.register_result_list_item(
            ui_resource_config.model.record_json_schema,
            ui_resource_config.search_component,
        )
 
def finalize_app(app):
    """Finalize app initialization."""
    ui_overrides(app)


# pyproject.toml
[project.entry-points."invenio_base.finalize_app"]
ui_datasets = "ui.datasets:finalize_app"

This registration allows the global search component to automatically use DatasetsResultsListItem when rendering records whose $schema matches datasets-v1.0.0.json.

Initializing search app with custom components

Create a search app entry point that registers your custom components:

ui/mymodel/semantic-ui/js/Search/index.js


import {
  parseSearchAppConfigs,
  createSearchAppsInit,
} from "@js/oarepo_ui/search";
import ResultsListItem from "./ResultsListItem";
 
const [{ overridableIdPrefix }] = parseSearchAppConfigs();
 
export const componentOverrides = {
  [`${overridableIdPrefix}.ResultsList.item`]: ResultsListItem,
};
 
createSearchAppsInit({ componentOverrides });

See Search result for registration via UI Resource Config or OAREPO_UI_OVERRIDES.

Form input components

Deposit form components

General override concepts

Component Override

Search library documentation

react-searchkit