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

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

> **Note:**
> 
> This update is available with the PageBuilder Editor 3.16 Release and is supported with PageBuilder Engine 3.3.6 and up.

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

A convenient way to integrate the search with Composer is to use the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api#searchablefield-function) hook. This hook can be applied to block elements to tell the PageBuilder Editor that users should be able to search Composer for a replacement story.

## Creating a Searchable Story

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

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

### Requirements

Ensure your bundle has `@arc-fusion/cli` that’s version 2.0.9 or higher.

### Example of a custom block

/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', 'story', { contentSource: 'story-search' })} >)
}

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

export default SmallPromo
```

The values for the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api#searchablefield-function) component hook maps to the following:

- **Param 1**: This maps to the component’s custom field ID associated with the contentConfig.
- **Param 2**: The type of content integration to associate with the contentConfig. In this case the value `story` will allow the component to show the story 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 story.

### Example of a content source

This feature applies the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api#searchablefield-function) 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 Composer. In this example, when a story is selected, the story `_id` custom field will be replaced with the value of the story’s ID.

/content/sources/story-search.js

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

module.exports = {
  resolve,
  schemaName: "ans-item",
  params: { _id: "text", website_url: "text" },
  searchable: "story",
};
```

The key takeaways from this are to make sure your content source:

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