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.
Purpose In a Result Template, show or hide markup if a specified condition matches the component's options (see examples below).
- Install the component into your project.
npm i @coveops/show-if-condition
- Use the Component or extend it
Typescript:
import { ShowIfCondition, IShowIfConditionOptions } from '@coveops/show-if-condition';
Javascript
const ShowIfCondition = require('@coveops/show-if-condition').ShowIfCondition;
- You can also expose the component alongside other components being built in your project.
export * from '@coveops/show-if-condition'
- Or for quick testing, you can add the script from unpkg
<script src="https://unpkg.com/@coveops/show-if-condition@latest/dist/index.min.js"></script>
Disclaimer: Unpkg should be used for testing but not for production.
- Include the component in your template as follows:
Place the component in your markup:
<div class="CoveoShowIfCondition"></div>
Render the component if the query result item's @documenttype field value is Article or Documentation.
<div class="CoveoShowIfCondition" data-condition-field-documenttype="Article, Documentation">
</div>
Render the component if the query result item's @documenttype field value is anything but Case.
<div class="CoveoShowIfCondition" data-condition-field-not-documenttype="Case">...</div>
Render the component if the query result item's @documenttype field value is Article, and if its @author field value is anything but Anonymous.
<div class="CoveoShowIfCondition" data-condition-field-documenttype="Article" data-condition-field-not-author="Anonymous">...</div>
Extending the component can be done as follows:
import { ShowIfCondition, IShowIfConditionOptions } from "@coveops/show-if-condition";
export interface IExtendedShowIfConditionOptions extends IShowIfConditionOptions {}
export class ExtendedShowIfCondition extends ShowIfCondition {}
- 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