@coveops/configure-quickview-header
v1.0.0
Published
Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.
Downloads
4
Maintainers
Keywords
Readme
ConfigureQuickviewHeader
Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.
Getting Started
- Install the component into your project.
npm i @coveops/configure-quickview-header
- Use the Component or extend it
Typescript:
import * as ConfigureQuickviewHeader from '@coveops/configure-quickview-header';
Javascript
const ConfigureQuickviewHeader = require('@coveops/configure-quickview-header');
- You can also expose the component alongside other components being built in your project.
export * as ConfigureQuickviewHeader from '@coveops/configure-quickview-header'
- Or for quick testing, you can add the script from unpkg
<script src="https://unpkg.com/@coveops/configure-quickview-header@latest/dist/index.min.js"></script>
Disclaimer: Unpkg should be used for testing but not for production.
- Add the following execution to your code once the page has initialized:
<script>
Coveo.ConfigureQuickviewHeader({})
</script>
Options
| Argument | Type | Default | Purpose | | |-----------------------|----------|----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|---| | className | String | undefined | Inject a css class at the top level of the modal | | | generateCustomContent | function | (result, options, headerOptions => undefined | Passes all the information the QuickviewHeader receives, including the options specified here to a custom function to handle custom rendering | | | icon | String | undefined | Specify an icon css class to pass to the Icon | | | iconClass | String | Icon | Override the component used to handle the Icon used as the title | | | iconOption | Object | {} | A configuration object that follows the specifications of the component specified in iconClass | | | resultLinkClass | String | ResultLink|SalesforceResultLink | Override the component used to handle the ResultLink used as the title | | | resultLinkOptions | Object | {alwaysOpenInNewWindow: true} | A configuration object that follows the specifications of the component specified in resultLinkClass | |
Extending
Extending the component can be done as follows:
import { ConfigureQuickviewHeader, IConfigureQuickviewHeaderOptions } from "@coveops/configure-quickview-header";
export interface IExtendedConfigureQuickviewHeaderOptions extends IConfigureQuickviewHeaderOptions {}
export class ExtendedConfigureQuickviewHeader extends ConfigureQuickviewHeader {}
Contribute
- Clone the project
- Copy
.env.dist
to.env
and update the COVEO_ORG_ID and COVEO_TOKEN fields in the.env
file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default. - Build the code base:
npm run build
- Serve the sandbox for live development
npm run serve