Anchor in url -> scroll to block grid element
# help-with-umbraco
m
How do I make a deep link to a content node and a block grid element on that node. The element key is there. But is it possible to add the key to the edit url, so the user is guided directly to the location of the element on the node. https://cdn.discordapp.com/attachments/1330916350226337862/1330916350927044629/image.png?ex=678fb7f1&is=678e6671&hm=56bb9d17e139717e2ce3a5994b22479201a89b30820884cd6e68b62b235ae339&
d
Hey @Mikkel Johansen - using the same code that adds the GUID to that data attribute to populate an id e.g.
id="yourguid"
you can then use this fragment identifier in a URL e.g.
href="#yourguid"
within the page or appended to the full url.
m
If I add the block grid elements Key as the anchor link like I normal would do on a webpage. It do not work - Then browser does not scroll down to the element on the page Example: The block element has key = f9cd12fb-f818-4861-a001-aa3db8d90680 Adding it to the edit url of the page - nothing happens. /umbraco/section/content/workspace/document/edit/d1b55dc3-2d7e-4f22-97e4-c5a123146166/invariant/tab/content#f9cd12fb-f818-4861-a001-aa3db8d90680 Examine the DOM elements there seems to be no elements with id=f9cd12fb-f818-4861-a001-aa3db8d90680 The closest element is: <umb-block-grid-entry class="umb-block-grid__layout-item" index="1" data-element-key="f9cd12fb-f818-4861-a001-aa3db8d90680" .....
d
If you mean in the back office this could prove complex as the element is rendered from the shadow root meaning elements inside a shadow root are not accessible via fragment identifiers in the URL. You could do it with JS but in the older back office I would not go to the trouble.
m
The old backoffice is left behind. We are only going forward - living on the edge 🙂 Yes, our conclusion is using some kind of JS to get the element in focus. Was just hoping that some knew of unkown Umbraco backoffice magic.
d
So you are working in 14+?
m
v15.1.1 Counting down to v15.2-RC in a few days
d
In that case definitely make a package that is a drop menu that can jump to blocks, that would be awesome. And as the new back office is just js something like
Copy code
function scrollToShadowElement() {
      const target = shadowRoot.getElementById('target');
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
      }
    }
I am using Block Grid a lot so it could be very useful for long pages for editors. Although to be fair I am also using @User's Block Preview which makes it very easy to find content visually.
m
We are only using the backoffice like a headless cms. So we have just made our own extensions of the visiual rendering of the grid elements in the backoffice. The tasks right now is making some deep links to these elements from a dashboard overview where we would make it easy for the editors to go directly to the content node and down to the specfic block grid element. Think we will try the JS scrollIntoView as you mentioned.
d
Out of interest which framework are you using to render the front end and how are you finding managing routing?
d
I meant for the front end but this is amazing
m
Oh 😄 Actually we are not developing the frontend. Right now we are pushing content from Umbraco to a API that transforms content and saves it to a database. The frontend application reads data through a content-service from the database. I think the frontend is a React app
d
Either way it's very reassuring to see Block Grid in a package. Perhaps this thread would have been useful in the #882984798719729704 channel 😂
s
You can open up a discussion in Github, without considering potential drawbacks, I think it would be nice to be able to deeplink to specific block items on a content node in the backoffice.
12 Views