How to Enable Integrated Collections Search for PageBuilder Editor

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 Arc XP Consumer API, 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 - /components/features/global/small-promo.jsx

An example feature might look like this:

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 - /content/sources/collections.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 collections, 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. 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 collections is selected, the collections _id custom field will be replaced with the value of the collections ID.

In this section: