# SharinPix Search Display component integration with Avonni Dynamic Components

## Overview

In this documentation, we will show you how to integrate the SharinPix Search Display component with Avonni Data LWC Container. At the end of this integration, you will be able to filter your query and based on the result, it will perform a SharinPix Search and display the result in the component.

{% hint style="info" %}
**Prerequisites:**

Install the Avonni Dynamic Component package from the AppExchange. Direct link here:\
<https://appexchange.salesforce.com/appxListingDetail?listingId=e855ec28-bf2c-47fa-aa38-30b43948ab4f&tab=d>
{% endhint %}

## Setup

{% hint style="success" %}
Avonni primary documentation can be found here:\
<https://docs.avonnicomponents.com/dynamic-components>

Avonni Data LWC Container documentation is here:\
<https://docs.avonnicomponents.com/dynamic-components/components/data-lwc-container>
{% endhint %}

Drag and drop the Data LWC Container component onto the page layout. Afterwards, configure your query to fetch the corresponding records.

In the LWC Name, add **sharinpix/searchDisplay** and set the value of Record Key Fields Attribute Name to **recordIds**. You can customise this component to display a filter and a search based on a field.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FV0E6tE05072HvnxYTbaX%2Fimage.png?alt=media&#x26;token=dfc1c6fb-caca-45eb-8bf2-0b115f94b215" alt=""><figcaption></figcaption></figure>

## Usage

To use this component dashboard, edit your page layout and drag and drop Avonni Dynamic Component onto your page. Change the Component Name in the builder and choose your component.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fa7sHZtvx8MDSz19toRSS%2Fimage.png?alt=media&#x26;token=d1fc9911-fbca-4fd0-b0e1-47573a801f46" alt=""><figcaption></figcaption></figure>

## Demo

Open your page and play with the filters and search.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FOi4EU2UdhZQZFCKZIdJf%2Fimage.png?alt=media&#x26;token=2eff4d1d-3f25-44a4-ad78-c071f05b96cf" alt=""><figcaption></figcaption></figure>