Configure a search component
Feature availability is part of a phased rollout. Your organization may not see this functionality yet. It will become available when your environment is included in the rollout.
After you have created a source, you can add a search component to you page to make it easy for users to find content on your website. The search component is preconfigured with the settings you enabled when you created the source, such as what data is visible, and which fields can be used as search keywords.
See getting started with search experiences to ensure search is functional in your environment.
Create a search component
To create a search component:
-
On the menu bar, click Page Builder
. -
In the Page builder, click the page you want to add a search component to.
-
Click Add
, and select Search Experience from the Components drop-down list. -
When prompted, assign a compatible content item, or create a new one by clicking Add
.ImportantThe first time you create a compatible content item, you must include a JSON template in that item.
-
Click Assign.
Configure data from your search source
After you have added a search component to a page, select a source to connect to the component, and map the data from your source.
To configure data from your search source:
-
Click on the search component to open the component settings in the right-hand pane.
-
On the Search Configuration Manager tab, select the desired source from the Search Index drop-down list.
-
Use the drop-down list associated with each heading, such as Tags or Title, to map and apply preconfigured styling to your fields.
Configure layout and styling
After you have connected a source to your search component, you choose how the search results will look on the page.
To configure layout and styling:
-
On the Design tab, in the Layout drop-down list, configure the styling of the component. For example, its size, position, and alignment.
-
On the Styling tab, configure the styling of the content in the component. For example, the spacing and alignment.
-
On the Advanced Styling tab, use the fields to enter specific styling configurations:
-
Columns - the number of columns in the search component. You can choose 1, 2, or 3 columns; the default is 3.
-
ID - the ID attribute for your component that you can see in the deployed site's HTML.
-
CSS Styles - additional classes you can use to apply custom styling, for example, mt-30 adds a 30px top margin.
-