Data Resource Selector location

Developer preview

This feature is in developer preview. Use with caution as it may change unexpectedly. For more information, contact us.

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.

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. 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.

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

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

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

Minimum SDK version

The Data Resource Selector location requires @uniformdev/mesh-sdk version 20.66.1 or higher.

Use useMeshLocation('dataResourceSelector'):

APIDescription
valueSelected JSON pointer string (for example /title or /images/0)
setValueSet the selected pointer. Call with { newValue: '/path' }
getDataResourceFetch additional data from the connector if needed
metadata.dataResourceValueResolved JSON for the current data resource
metadata.dataResourceNameName of the data resource being connected
metadata.dataTypeIdData type ID
metadata.archetypeArchetype key
metadata.allowedTypesConnectable types valid for the target parameter or field
metadata.componentDefinitionsComponent 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 documentation.

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

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 (dataResourceSelector.tsx).

Last modified
Next
Parameter Type location