Deep linking to fields

✋ Feature Requests
1

Hi there,

I would love to have deep linking to fields into DatoCMS.
There was another feature request like this one : https://community.datocms.com/t/deep-linking-to-datocms-content-and-revisions/4355

Being able to target a Model record and its specific field ( including expanded modular content) would be awesome.

My use-case is pretty simple. We have a preview mode where we can highlight components reflecting the DatoCMS Blocks, or fields. We would like to direct link to these blocks in page context within DatoCMS back-office.

This feature would improve a lot authoring experience.
Regarding another feature request I’ve made, this one would match perfectly with it.

Thanks for your understanding.

Best regards.

2

We’ve heard this request a few times, and I hope it will get implemented!

In the meantime, just as a workaround:

We have an undocumented feature that might be able to do what you want… with some caveats.You can use append a URL parameter after the /edit link like #fieldPath=multiple_blocks.0.nested_block_multiple.1.example_field and that will point you to a specific field and highlight it. For example:

image
image1920×1099 86.4 KB

The downsides are that:

  • This is an undocumented, unofficial feature and may change in the future
  • It’s not super easy to figure out the exact fieldPath for a given modular content field/sub-field. It basically goes fieldName.nestedBlockNumberStartingFromZero.fieldName. You can also make a simple DatoCMS plugin and use the ctx.fieldPath prop to retrieve that (Edit: Actually, it’s pretty easy now! See next post about using the inspector).
  • It only works on certain field types (text fields, basically)… it’s a side effect of an enterprise feature (https://www.datocms.com/docs/content-link/how-to-use-content-link#which-graphql-fields-support-content-link) so it’s not really meant to be used on its own like this…
3

Also, if you use the browser inspector to inspect the field label, you can more easily identify the path:

e.g.

The "for" label is the fieldPath
The "for" label is the fieldPath1920×1099 174 KB

<label for="multiple_blocks.0.nested_block_multiple.1.example_field" class="form__label">

Becomes:

Append it to your URL with #fieldPath={path}
Append it to your URL with #fieldPath={path}1920×1099 174 KB

#fieldPath=multiple_blocks.0.nested_block_multiple.1.example_field
4

Thank you @roger , that will do the job !

:slight_smile:

1 Like
5

@roger , reading the documentation, this feature request is something “similar” to Vercel Content Link with a much more custom approach on linking from frontend ?

6

Yes, the in-page anchors and #fieldPath help support that feature, but there’s more that goes into Vercel Content Link than just that (as described in the article).

Nonetheless, it’s a useful, albeit unofficial, way to jump directly to a field even without Content Link.

7

Hey, thanks for your work! Did you find out how to get the fieldPath/for label through the GraphQL endpoint?

8

@samuel.bichsel It’s not returned in the GraphQL endpoint because it’s just a frontend function that targets certain kinds of fields, not something that works with GraphQL. You can look them up manually the browser inspector (Deep linking to fields - #3 by roger), or they’re really just the API model names you give each model. Is that what you’re asking, or did I misunderstand?

1 Like
9

Yes, we realized that they are just the API model names. We are trying to link directly from the draft website to the fields in Dato, that should be possible like that. Thanks @roger!