Docs
API Reference
External

External

Select data from a list, typically populated via a third-party API. Extends Base.

Interactive Demo
Example
data

No data selected

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async () => {
            // ... fetch data from a third party API, or other async source
 
            return [
              { title: "Hello, world", description: "Lorem ipsum 1" },
              { title: "Goodbye, world", description: "Lorem ipsum 2" },
            ];
          },
        },
      },
      render: ({ data }) => {
        return <p>{data?.title || "No data selected"}</p>;
      },
    },
  },
};

Params

ParamExampleTypeStatus
typetype: "external""external"Required
fetchList()fetchList: async () => []FunctionRequired
getItemSummary()getItemSummary: async ({ title }) => titleFunction-
mapProp()mapProp: async ({ title }) => titleFunction-
placeholderplaceholder: "Select content"String-
showSearchshowSearch: trueBoolean-
initialQueryinitialQuery: "Hello, world"String-

Required params

type

The type of the field. Must be "external" for Array fields.

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async () => {
            return [
              { title: "Hello, world", description: "Lorem ipsum 1" },
              { title: "Goodbye, world", description: "Lorem ipsum 2" },
            ];
          },
        },
      },
      // ...
    },
  },
};

fetchList()

Return a promise with a list of objects to be rendered in a tabular format via the external input modal.

The table will only render strings and numbers.

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async () => {
            // ... fetch data from a third party API, or other async source
 
            return [
              { title: "Hello, world", description: "Lorem ipsum 1" },
              { title: "Goodbye, world", description: "Lorem ipsum 2" },
            ];
          },
        },
      },
      // ...
    },
  },
};

Optional params

getItemSummary(item)

Get the label to show once the item is selected.

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async () => {
            return [
              { title: "Hello, world", description: "Lorem ipsum 1" },
              { title: "Goodbye, world", description: "Lorem ipsum 2" },
            ];
          },
          getItemSummary: (item) => item.title,
        },
      },
      // ...
    },
  },
};
Interactive Demo
Example
data

Hello, world

mapProp(item)

Modify the shape of the item selected by the user in the table before writing to the page data.

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async () => {
            return [
              { title: "Hello, world", description: "Lorem ipsum 1" },
              { title: "Goodbye, world", description: "Lorem ipsum 2" },
            ];
          },
          mapProp: (item) => item.description,
        },
      },
      render: ({ data }) => {
        return <p>{data || "No data selected"}</p>;
      },
      // ...
    },
  },
};
Interactive Demo
Example
data

No data selected

placeholder

Set the placeholder text when no item is selected.

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async () => {
            return [
              { title: "Apple", description: "Lorem ipsum 1" },
              { title: "Orange", description: "Lorem ipsum 2" },
            ];
          },
          placeholder: "Pick your favorite fruit",
        },
      },
      // ...
    },
  },
};
Interactive Demo
Example
data

No data selected

showSearch

Show a search input, the value of which will be passed to fetchList as the query param.

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async ({ params }) => {
            return [
              { title: "Apple", description: "Lorem ipsum 1" },
              { title: "Orange", description: "Lorem ipsum 2" },
            ].filter((item) => {
              // ...
            });
          },
          showSearch: true,
        },
      },
      // ...
    },
  },
};
Interactive Demo
Example
data

No data selected

initialQuery

Set an initial query when using showing a search input with showSearch.

const config = {
  components: {
    Example: {
      fields: {
        data: {
          type: "external",
          fetchList: async ({ params }) => {
            return [
              { title: "Apple", description: "Lorem ipsum 1" },
              { title: "Orange", description: "Lorem ipsum 2" },
            ].filter((item) => {
              // ...
            });
          },
          showSearch: true,
          initialQuery: "Apple",
        },
      },
      // ...
    },
  },
};
Interactive Demo
Example
data

No data selected