Search Web Components

Appearance

Build the page in Drupal Canvas ​

At the end of this guide, a page built in Drupal Canvas shows a search with a keyword field, a facet, sorting, results, and a pager, on the endpoint from Getting started.

Enable the submodule ​

  1. Enable Drupal Canvas and Search Web Components: Canvas:

    sh
    drush en canvas search_web_components_canvas

    Drupal Canvas needs Drupal core 11.3 or later.

Create the page ​

  1. On Content › Pages, click Add Page. The Canvas editor opens on a new page. Under Page data, enter the Title, e.g., "Search".

  2. Open the Library with the + at the top left. The Search Components folder holds every component. Drag Search layout, two columns onto Page content.

    The Search Components folder in the Library, from Facet buttons to Search sort

    The two columns layout placed on the page, with the slots Top 1 to Top 3, Sidebar 1 to Sidebar 5, Main 1 to Main 5, and Bottom 1 to Bottom 3

  3. In the Settings form on the right, under Endpoint, pick the endpoint.

    The Settings of the layout with Endpoint set to Content, Endpoint URL (manual entry), Additional parameters, Default results per page, and Default result display

Place the components ​

  1. Drag each component from the Library into a slot:

    • Search input into Top 1
    • Search sort into Top 2
    • Search result summary into Top 3
    • Facet checkboxes into Sidebar 1
    • Search results into Main 1
    • Search simple pager into Main 2

    A component's Settings form opens on the right when the component is placed or clicked. The defaults work for this guide, except for the facet. In the Settings of Facet checkboxes, under Facet, pick the facet from Getting started. The list names each facet by the endpoint's label and the facet's name, e.g., Content: Content type.

    The Settings of Facet checkboxes with Facet set to Content: Content type, Facet key (manual entry), Label override, Prefer attributes, and Show label

    The editor runs the search as the components are placed, so results and facet options show while you build. With every component placed, the Layers panel looks like this:

    The Layers panel with Search input in Top 1, Search sort in Top 2, Search result summary in Top 3, Facet checkboxes in Sidebar 1, Search results in Main 1, Search simple pager in Main 2, and Search no results message in Main 3

The settings of each component placed above:

Search input
  • Placeholder: the text in the empty field.
  • Label: the submit button's text.
  • Clear text: the text of the button that empties the field.
  • Keep filters: off, so a new keyword drops the applied facets.
Search sort
  • Display as: how the sort options are shown.
    • select: a native dropdown.
    • list: a list of buttons.
    • html: a dropdown built from HTML, for styling.
  • Label: the dropdown's label.
  • Sort options: leave the rows empty to show the endpoint's sort options.
Search result summary
  • Summary text: "@start - @end of @total". The tokens are @start, @end, @total, @searchQuery, and @time.
Facet checkboxes
  • Facet: the facet from Getting started. Facet key (manual entry) takes a facet key instead.
  • Label override: text shown instead of the facet's name.
  • Show label, Show counts, and Show reset: what the facet shows beside its options. The facet's widget settings win over these unless Prefer attributes is on.
Search results
  • Result field and Result mappings: leave them empty to use the endpoint's result elements from step 8 of Getting started.
Search simple pager
  • Pages to display: how many page numbers show on each side of the current one.
  • Show next and previous and Show first and last: which buttons the pager has, with their texts in the fields above.

The Search no results message component in Main 3 shows what is placed in its No results message slot when a search finds nothing, e.g., a text component from the theme.

For all available components and settings, see Drupal Canvas.

  1. Click Review 1 change at the top right, check Select All, and click Publish 1 selected.

    The Unpublished changes dialog with Select All checked, the Search page listed, and the Publish 1 selected button

  2. Open the page and search.

Search Web Components ships no CSS. The components take the theme's styles and are styled with normal CSS. For the classes a theme can style, see Styling.

Next ​