> For the complete documentation index, see [llms.txt](https://docs.sharinpix.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sharinpix.com/documentation/integrations/other-apps/sharinpix-search-display-component-integration-with-avonni-dynamic-components.md).

# 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="/files/DAWWhHpjoc6KjcoI8tED" 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="/files/zoqYXJmVk2w8Lvuwxoyk" alt=""><figcaption></figcaption></figure>

## Demo

Open your page and play with the filters and search.

<figure><img src="/files/85jiCzrZrV0NBRlm4JEl" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.sharinpix.com/documentation/integrations/other-apps/sharinpix-search-display-component-integration-with-avonni-dynamic-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.