検索イベントを活用してください

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

以下のReact例はSEARCH_FINISHEDイベントの使い方を示しています。

!ヒントこの例のウォークスルーは、Discover Sitecoreチャンネルで視聴可能なSitecore Content Hub - 外部部品の動画でご覧いただけます。

例

index.tsx

import ReactDOM from "react-dom"; import React from "react"; import AddSearchFilters from "./AddSearchFilters"; import { FieldFilterRequestResource } from "@sitecore/sc-contenthub-webclient-sdk/dist/models/search/field-filter-request-resource";

interface Context { config: { searchIdentifier: string; }; options: { entityId?: number; }; api: { search: { addFilters: ( searchIdentifier: string, filters: Array ) => void; updateQuery: (searchIdentifier: string, query: string) => void; updateFullTextFilter: (searchIdentifier: string, text: string) => void; clearFullTextFilter: (searchIdentifier: string) => void; getEventSearchIdentifier: (searchIdentifier: string) => string; }; }; }

export default function createExternalRoot(container: HTMLElement) { return { render(context: Context) { const { addFilters, updateQuery, clearFullTextFilter, updateFullTextFilter, getEventSearchIdentifier, } = context.api.search;

ReactDOM.render( , container ); }, unmount() { ReactDOM.unmountComponentAtNode(container); }, }; }

返還

AddSearchFilters.tsx

import { Nullable } from "@sitecore/sc-contenthub-webclient-sdk"; import { FieldFilterRequestResource } from "@sitecore/sc-contenthub-webclient-sdk/dist/models/search/field-filter-request-resource"; import { FieldFilterResponseResource } from "@sitecore/sc-contenthub-webclient-sdk/dist/models/search/field-filter-response-resource"; import { FilterOperator } from "@sitecore/sc-contenthub-webclient-sdk/dist/models/search/filter-operator"; import { RequestedFilterType } from "@sitecore/sc-contenthub-webclient-sdk/dist/models/search/requested-filter-type";

import React, { FunctionComponent, useEffect, useState } from "react";

interface SearchInteractionProps { /** * The identifier of the search component whose filter changes we want to track. */ searchIdentifier: string;

/** * A callback to add filters to the search component. */ addFilters: ( searchIdentifier: string, filters: Array ) => void;

/** * A callback to update the current query (e.g. to remove filters). */ updateQuery: (searchIdentifier: string, query: string) => void;

/** * A callback to update the full text filter. */ updateFullTextFilter: (searchIdentifier: string, text: string) => void;

/** * A callback to clear the full text filter. */ clearFullTextFilter: (searchIdentifier: string) => void;

/** * A function that returns the correct search identifier to check for when listening to the SEARCH_CHANGED event */ getEventSearchIdentifier: (searchIdentifier: string) => string; }

interface FullTextFilter { /** * The current full text filter. */ value: string;

/** * The encoded query without the full text filter. */ removeQuery: string; }

const AddSearchFilters: FunctionComponent = ({ searchIdentifier, addFilters, updateQuery, clearFullTextFilter, updateFullTextFilter, getEventSearchIdentifier, }) => { const appliedSearchFilters, setAppliedSearchFilters = useState< Array

();

const fullTextFilterValue, setFullTextFilterValue = useState("");

const addSearchFilter = () => { // We setup some filters to add. const extraFilters = new FieldFilterRequestResource({ fieldName: "taxonomy_items.64.*", values: 1025, nestedValues: , operator: FilterOperator.AnyOf, visible: true, hidden: true, multiSelect: true, filterType: RequestedFilterType.InFilter, }), ;

// We call the callback function and pass the search identifier and filters to add. addFilters(searchIdentifier, extraFilters); };

useEffect(() => { // Whe the search has finished we show the updated filters const onSearchFinished = (evt: Event): void => { const { filters, searchIdentifier: eventSearchIdentifier, // We rename the property to eventSearchIdentifier. fullText, } = ( evt as CustomEvent<{ searchIdentifier: string; fullText: string; filters: Array; ids: Array; }> ).detail;

// We check if the searchIdentifier on the event is the one we are interested in. if ( eventSearchIdentifier === getEventSearchIdentifier(searchIdentifier) ) { setAppliedSearchFilters(filters); setFullTextFilterValue(fullText); } };

window.addEventListener("SEARCH_FINISHED", onSearchFinished);

return () => { window.removeEventListener("SEARCH_FINISHED", onSearchFinished); }; }, );

return ( <> {appliedSearchFilters.map((filter) => ( <button onClick={() => updateQuery(searchIdentifier, filter.removeQuery)}

Remove {filter.label} ))} {appliedSearchFilters.length > 0 && ( <>

Currently applied filters

{JSON.stringify(appliedSearchFilters, undefined, 4)}

)}

Full text filter

setFullTextFilterValue(e.target.value)} /> ); };

export default AddSearchFilters;

この記事を改善するための提案がある場合は、お知らせください!