{"id":13750404,"url":"https://github.com/estruyf/react-handlebars-search","last_synced_at":"2025-03-23T07:34:45.634Z","repository":{"id":80486622,"uuid":"96411427","full_name":"estruyf/react-handlebars-search","owner":"estruyf","description":"SharePoint Framework search web part which makes use of React and Handlebars to do result visualisation","archived":false,"fork":false,"pushed_at":"2019-02-15T21:13:20.000Z","size":1665,"stargazers_count":22,"open_issues_count":2,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-12T08:28:51.709Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/estruyf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-07-06T09:13:05.000Z","updated_at":"2022-11-09T05:01:17.000Z","dependencies_parsed_at":"2024-01-17T13:15:22.054Z","dependency_job_id":null,"html_url":"https://github.com/estruyf/react-handlebars-search","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Freact-handlebars-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Freact-handlebars-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Freact-handlebars-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Freact-handlebars-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/estruyf","download_url":"https://codeload.github.com/estruyf/react-handlebars-search/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221847193,"owners_count":16890989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T08:00:35.074Z","updated_at":"2024-10-28T15:15:01.575Z","avatar_url":"https://github.com/estruyf.png","language":"CSS","funding_links":[],"categories":["Apps"],"sub_categories":["Open Source"],"readme":"# Search Result Visualizer web part created with React and Handlebars templates\n\nThis web part is created to allow you to visualize search results by using custom Handlebars templates. Originally this web part made use of a React template system, but by switching the system to use Handlebars instead it became a lot easier to create custom templates.\n\n\u003e If you are interested in the original project, feel free to explore the code over here: [Search WP SPFx](https://github.com/estruyf/Search-WP-SPFx).\n\nThe idea of this web part is to mimic the functionality of the `Content Search Web Part` and its `display templates` approach.\n\n![Search visualizer result](./assets/wp-example.gif)\n\n\u003e Credits to [Simon-Pierre Plante](https://github.com/spplante) for the idea to make use of Handebars templates and [Mikael Svenson](https://twitter.com/mikaelsvenson) for the code to allow to load external scripts in the templates. \n\n## Minimal Path to Awesome\n\n- Clone this repository\n- In your command prompt, run:\n    - `npm install`\n    - `gulp serve --nobrowser`\n    - Open your hosted workbench and start exploring the web part\n\n## Using the web part\n\n### Search query settings\n\n![Search query settings](./assets/search-query-20170808.png)\n\n#### Queries\n\nIn the query field, you can enter your own queries like:\n- `*`: to retrieve everything\n- `fileextension:docx`\n\nBut you can also use search tokens like:\n- `{Site}`\n- `{SiteCollection}`\n- `{Today}` or `{Today+Number}` or `{Today-Number}`\n- `{CurrentDisplayLanguage}`\n- `{User}`\n- `{User.Name}`\n- `{User.Email}`\n\n#### Number of results\n\nSpecify the number of results you want to retrieve for the specified query.\n\n\u003e Maximum 50 results. This is a limit configured in the web part code and can be changed.\n\n#### Sorting\n\nSpecify the managed property name and the sorting order (comma separated):\n- Single: `lastmodifiedtime:ascending`\n- Multiple: `lastmodifiedtime:ascending,author:descending`\n\n#### Trim duplicate results\n\nSpecify if you want to trim duplicate results.\n\n\u003e By default this option is disabled.\n\n### Search through data from private groups\n\nSpecify if you want to search through the data of private Office 365 Group sites.\n\n\u003e By default this option is disabled.\n\n### Template settings\n\nBy default the web part shows the debug view of your query. This returns all the fields, values, and bindings of how to make use of it in your templates.\n\n![Template settings](./assets/template-settings.png)\n\n#### Web part title\n\nThis is a title which you can specify to be used in your custom template. The Handlebar binding to be used is `{{wpTitle}}`.\n\n#### Show debug output\n\nThis setting is by default enabled. If you want to make use of your own template you have to disable it and specify a template URL.\n\n#### External template URL\n\nSpecify an absolute URL to your HTML template file. In the templates folder you can find a sample template file: [test.html](./templates/test.html).\n\n\u003e The project also automatically includes the [handlebars-helpers](https://github.com/helpers/handlebars-helpers) library for you. This way you can achieve more in your templates.\n\nTemplate can also have paging controls. You have to create two elements with the following IDs:\n- `prevPage`\n- `nextPage`\n\n```html\n\u003ca id=\"prevPage\" href=\"javascript:;\"\u003ePrevious\u003c/a\u003e\n\u003ca id=\"nextPage\" href=\"javascript:;\"\u003eNext\u003c/a\u003e\n```\n\nThe web part will automatically do the event binding.\n\n![Paging controls](./assets/paging.png)\n\nTemplate can also have localization system, see [test.html](./templates/test.html) for example (moment and key/value example).\n\n##### SharePoint Helpers\n\nThere are a couple of custom SharePoint helpers available for you to make use of. The list of available SP helpers are:\n- `siteCollectionUrl`: returns the URL of the current site collection\n- `siteUrl`: returns the URL of the current site\n- `splitDisplayNames`: (input =\u003e \"user1;user2;user3\") (common example is the author field)\n- `splitSPUser`: (input =\u003e \"email | displayname | .... i:0#.f|membership|username\") (common example is the editor field)\n- `splitSPTaxonomy`: (input =\u003e \"GP0|#4586d598-0685-4fdc-bd99-b9eed3cea791;L0|#04586d598-0685-4fdc-bd99-b9eed3cea791|MyTerm;GTSet|#e961b817-850b-4898-9dd7-12409669d2fe\")\n- `splitSPUrl`: (input =\u003e \"http://www.myurl.com,Description\", \"url || description\")\n\nThey can be use in the template as follows:\n```html\n{{siteCollectionUrl}}\n{{siteUrl}}\n{{splitDisplayNames Author}}\n{{splitSPUser EditorOWSUSER 'displayName'}}\n{{splitSPTaxonomy owstaxIdmytaxonomy}}\n{{splitSPUrl urlProp 'url'}}\n```\n\n#### Script loading\n\nWith this setting you can specify if you want to execute/load the script that are defined in your template. When you add a custom template, the web part will automatically check and warn you (only when you are configuring the web part).\n\n![Script loading warning](./assets/script-loading.png)\n\n\u003e By default this setting is disabled.\n\n### Audience targeting settings\n\nInside the audience targeting settings you can target content based on a users profile property.\n\n![Audience targeting](./assets/audience-targeting.png)\n\n#### Audience Managed Property to User Profile Property Mapping\n\nIn this setting you define which managed property and user profile property you want to bind. For example: `{\"RefinableString00\":\"Department\"}`. The web part will look into the user its profile properties, if it finds it, it will get added to the search call: `RefinableString00=\"IT\"`.\n\n\u003e Multiple properties are possible, add each mapping on a separate line.\n\n#### Select the boolean operator for the above mappings\n\nSpecifies the operator between the above settings. \n\n#### Audience managed property value to indicate content targeted to everyone\n\nThis can be used to include content audience targeting which should be visible for everyone.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Festruyf%2Freact-handlebars-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Festruyf%2Freact-handlebars-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Festruyf%2Freact-handlebars-search/lists"}