# How to add searchable collections content to your blocks and chains

Source: https://dev.arcxp.com/pagebuilder-editor/developer-docs/how-to-add-searchable-collections-content-to-your-blocks-and-chains/

There are times when an editor would like to curate a page to add a collections block and not have to leave the editor screen to select which collections to add. A common way to enable this functionality is to create a custom field that allows the editor to enter a collections ID or collections URL. However, it can be burdensome to search WebSked and then copy/paste the ID or URL back into the custom field.

A convenient way to integrate the search with WebSked is to use the `searchableField` hook. This hook can be applied to block elements to tell the PageBuilder Editor that users should be able to search WebSked for a replacement collections.

## Creating searchable Collections

The WebSked Collections search functionality is enabled whenever a collections block element uses the `searchableField` hook, which is part of the [Consumer API](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api#searchablefield-function), to override custom field values. Let’s first define a sample component that uses `searchableField`.

> **Note:**
> 
> The component’s parent element must include a style of `position: relative` for proper button placement in the PageBuilder Editor UI.

## Requirements

As a dev dependency, ensure your bundle has `@arc-fusion/cli` that’s version 2.0.9 or higher.

## Custom block example

An example feature might look like this:

/components/features/global/small-promo.jsx

```js
import React from "react"
import PropTypes from "@arc-fusion/prop-types"
import { useEditableContent } from "fusion:content"

const SmallPromo = ({}) => {
  const { searchableField } = useEditableContent()
  return (<div {...searchableField('itemContentConfig', 'collections', { contentSource: 'collections' })} >)
}

SmallPromo.propTypes = {
  customFields: PropTypes.shape({
    itemContentConfig: PropTypes.contentConfig("feeds").tag({
      group: "Configure Content",
      label: "Display Content Info",
    })
  })
}

export default SmallPromo
```

The values for the `searchableField` component hook maps to the following:

- **Param 1:** This maps to the custom field id associated with the component’s content configuration.
- **Param 2:** The type of content integration to associate with the `contentConfig`. In this case the value `collections` will allow the component to show the collections search integration.
- **Param 3:** An `object` which at this time, only takes a contentSource prop. The value should be the name of the content source for the editor preview to display the collections.

## Content source example

/content/sources/collections.js

```js
const resolve = function resolve(key) {
  const website = key['arc-site'] || 'east-coast-herald'
  return `/content/v4/collections/?_id=${key._id}&website=${website}`
}

module.exports = {
  resolve,
  schemaName: 'feeds',
  params: { _id: 'text', from: 'text', size: 'text' },
  searchable: 'collection'
}
```

The **key take-aways** from this are to make sure your content source:

- Pulls a single collection, not a feed.
- Uses the parameter `searchable: "collection"` in the export parameters.

This feature applies the `searchableField` hook to a top level component, which allows the PageBuilder Editor to replace the desired custom fields with the content provided by the [Content API](https://dev.arcxp.com/api/public-content-retrieval/content-api/). The input to the `searchableField` hook is an Object that contains a mapping of custom fields to the desired values from WebSked. In this example, when a collection is selected, the collection `_id` custom field will be replaced with the value of the collection’s ID.