{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Prerequisite","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468460945"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Setup for development with typescript","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Steps to extend","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create a components directory in the designated react folder.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create a React component file (e.g. ","type":"text"},{"text":"CustomItem.tsx","type":"text","marks":[{"type":"em"}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Open the file to edit and import ","type":"text"},{"text":"React","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"ResultItemProps","type":"text","marks":[{"type":"em"}]}]},{"type":"codeBlock","content":[{"text":"import React from 'react';\nimport { ResultItemProps } from 'react-hawksearch';","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create the component function","type":"text"}]},{"type":"codeBlock","content":[{"text":"function CustomItem({ item }: ResultItemProps) {\n // Configuration goes here\n}","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For the configuration, declare all the fields that are gone be used in this component","type":"text"}]},{"type":"codeBlock","content":[{"text":"let title = item.getDocumentValue('title');\nlet content = item.getDocumentValue('content');","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The component function should return the structure","type":"text"}]},{"type":"codeBlock","content":[{"text":"return (\n\t

\n\t\t

{title}

\n\t\t

{content}

\n\t

\n)","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Export the component","type":"text"}]},{"type":"codeBlock","content":[{"text":"export default CustomItem;","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save the file.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Open the results component file for editing.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Import the newly created item component","type":"text"}]},{"type":"codeBlock","content":[{"text":"import CustomItem from '../components/CustomItem';","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Locate the ","type":"text"},{"text":"Results","type":"text","marks":[{"type":"em"}]},{"text":" component initialization. It should be in the ","type":"text"},{"text":"App","type":"text","marks":[{"type":"em"}]},{"text":" structure.","type":"text"}]},{"type":"codeBlock","content":[{"text":"function App() {\n return (\n ...\n \n ...\n );\n}","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Set the ","type":"text"},{"text":"ResultItem","type":"text","marks":[{"type":"em"}]},{"text":" prop to point to the item component","type":"text"}]},{"type":"codeBlock","content":[{"text":"function App() {\n return (\n ...\n \n ...\n );\n}","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save and re-build the JS resources.","type":"text"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Examples","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Creating a custom item for dynamic layout based on content type (e.g. ","type":"text"},{"text":"components/ContentTypeDynamicItem.tsx)","type":"text","marks":[{"type":"em"}]}]},{"type":"codeBlock","content":[{"text":"import React from 'react';\nimport { ResultItemProps } from 'react-hawksearch';\n\nfunction ContentTypeDynamicItem({ item }: ResultItemProps) {\n var contentType = item.getDocumentValue('contenttype');\n var title = item.getDocumentValue('title');\n var link = item.getDocumentValue('link');\n var summary = item.getDocumentValue('summary');\n var content = item.getDocumentValue('content');\n var image = item.getDocumentValue('image');\n var item;\n\n switch (contentType) {\n case \"Telerik.Sitefinity.Events.Model.Event\":\n item =\n

{title}

{content}

\n break;\n\n case \"Telerik.Sitefinity.News.Model.NewsItem\":\n item =\n

{title}

{summary}

\n break;\n\n default:\n item =\n

{title}

{content}

\n break;\n }\n\n return (\n

\n {item}\n

\n );\n}\n\nexport default ContentTypeDynamicItem;","type":"text"}]}]}]},{"type":"paragraph"}],"version":1}

Browser not supported