# Data Resource Selector location | Mesh locations

> Provide custom UI for selecting JSON pointers when connecting data from data resources to dynamic tokens.

Source: https://docs.uniform.app/docs/integrations/mesh-integrations/locations/data-resource-selector

The **Data Resource Selector** location lets you replace Uniform's default JSON tree when authors pick a path from a data resource for a [dynamic token](https://docs.uniform.app/docs/guides/composition/connect-external-data/data-resources#dynamic-tokens).

By default, authors navigate the raw JSON returned by the connector, which makes dynamic tokens less accessible to non-technical users who might be unfamiliar with JSON tree structures. A custom selector presents the same data in a way that matches your domain, helping authors pick the right value faster and with fewer mistakes. Common use cases include:

- **Friendlier field selection**: surface only the meaningful fields (for example, title, price, or image) with readable labels instead of exposing the entire JSON structure.
- **Value previews**: render the resolved value next to each option, such as showing the actual product image or formatted price, so authors can confirm their choice before connecting data.
- **Domain-specific UI**: present the data using controls that fit the source, like a media grid for images, a table for variants, or a dropdown for a known set of attributes.
- **Type-aware filtering**: use `metadata.allowedTypes` to show only the paths whose values are valid for the target parameter or field, preventing invalid data connections.

This location is **not** the same as the [Data Resource location](https://docs.uniform.app/docs/integrations/mesh-integrations/locations/data-resource). The Data Resource location is the full picker or editor for creating a data resource instance. The Data Resource Selector appears later, when an author connects a parameter or field to a specific data element inside an existing resource.

## When it appears

The selector renders in the dynamic token connection drawer when:

- The parameter or field connects to a data resource whose archetype defines `dataResourceSelectorUrl` in the integration manifest
- The author chooses to pick a JSON pointer path from the resolved data

## Manifest configuration

Configure the selector URL on the data archetype, alongside the data resource editor:

```json
{
  "dataArchetypes": {
    "product-by-id": {
      "displayName": "Product by id",
      "dataEditorUrl": "/data/resource",
      "dataResourceSelectorUrl": "/data/selector/product"
    }
  }
}
```

## Location API

> **Minimum SDK version:**
>
> The Data Resource Selector location requires `@uniformdev/mesh-sdk` version **20.66.1** or higher.

Use `useMeshLocation('dataResourceSelector')`:

| API | Description |
| --- | --- |
| `value` | Selected JSON pointer string (for example `/title` or `/images/0`) |
| `setValue` | Set the selected pointer. Call with `{ newValue: '/path' }` |
| `getDataResource` | Fetch additional data from the connector if needed |
| `metadata.dataResourceValue` | Resolved JSON for the current data resource |
| `metadata.dataResourceName` | Name of the data resource being connected |
| `metadata.dataTypeId` | Data type ID |
| `metadata.archetype` | Archetype key |
| `metadata.allowedTypes` | Connectable types valid for the target parameter or field |
| `metadata.componentDefinitions` | Component definitions index keyed by public ID |

The location also exposes `editorState` for read/write access to the surrounding composition or entry. See the [Editor state API](https://docs.uniform.app/docs/integrations/mesh-integrations/editor-state-api) documentation.

## Example

This example lists top-level array keys from the resolved data resource and sets a JSON pointer when the author clicks one:

```javascript
import { useMeshLocation } from '@uniformdev/mesh-sdk-react';

const ProductArraySelector = () => {
  const { value, setValue, metadata, isReadOnly } = useMeshLocation('dataResourceSelector');
  const { dataResourceValue, allowedTypes } = metadata;

  if (!dataResourceValue || typeof dataResourceValue !== 'object') {
    return <p>No data available.</p>;
  }

  const handleSelect = (pointer) => {
    if (isReadOnly) {
      return;
    }
    setValue(() => ({ newValue: pointer }));
  };

  return (
    <ul>
      {Object.keys(dataResourceValue).map((key) => {
        const pointer = `/${key}`;
        const entry = dataResourceValue[key];
        if (!Array.isArray(entry)) {
          return null;
        }
        return (
          <li key={key}>
            <button type="button" onClick={() => handleSelect(pointer)} disabled={isReadOnly}>
              {key} {value === pointer ? '(selected)' : ''}
            </button>
          </li>
        );
      })}
    </ul>
  );
};
```

For richer examples, see the [Mesh integration starter kit](https://github.com/uniformdev/examples/tree/main/mesh/mesh-integration) (`dataResourceSelector.tsx`).