Collapsible / toggleable Grid items in the Umbraco backoffice

Questions
1

We have several clients using the Umbraco Grid to manage quite long and content-heavy pages.

A question that comes up more and more often is whether there is a way to collapse or hide Grid content using a toggle in the backoffice.

The main goal would be to improve the overview and make it easier for editors to navigate large pages without having to scroll through all Grid content all the time.

Has anyone implemented something like this, or is there an existing solution or recommended approach for this use case?

2

Hi @tobiasmorf

I assume you are referring to Block Grid? Regardless, there is no way to collapse or expand the grid content as far as I am aware? I’ve certainly not come across anything that toggles grid content.

Justin

3

There is sort mode on block(grids/lists).. that if you are using block previews collapses the rendered content back to labels.. So that could be a quick win, but a bit hackey as you have to live with in sortmode and still not all that compact..

You should be able to inject a similar sort of thing into the grid so that rows/areas/full grid can be collapsed?? (either as a property action, or a block action?)

I did add a discussion on for the blockpreviews package.. but no traction as yet
Property Editor Action/ Block Action Toggle for using Block Previews? · rickbutterfield/BlockPreview · Discussion #314

I also did something with traversing the shadow dom to add a jump menu back for groups..
Bringing back the old jump menu for Content ContentApp Umbraco #package-development

could do the same to find the umb-block-action-bar.. and inject something?

image
image907×353 38.9 KB

 _findGroups() {
     const findDeep = (t, r = document) => {
         let items = Array.from(r.querySelectorAll(t));
         r.querySelectorAll('*').forEach(el => { if (el.shadowRoot) items = [...items, ...findDeep(t, el.shadowRoot)]; });
         return items;
     };
     return findDeep('uui-box').map(b => {
         const name = b.getAttribute('headline') || b.headline || b.shadowRoot?.querySelector('#headline')?.innerText || b.querySelector('[slot="headline"]')?.innerText;
         return name && name.trim().length > 0 ? { name: name.trim(), el: b } : null;
     }).filter(x => x !== null);
 }

 _findDeep(t, r = document) {
     let items = Array.from(r.querySelectorAll(t));
     r.querySelectorAll('*').forEach(el => { if (el.shadowRoot) items = [...items, ...this._findDeep(t, el.shadowRoot)]; });
     return items;
 }
4

Though AI suggests that could be much easier..

import { UmbBlockActionBase } from '@umbraco-cms/backoffice/block';
import type { UmbBlockAction } from '@umbraco-cms/backoffice/block';

export class MyCustomBlockAction extends UmbBlockActionBase implements UmbBlockAction {
  async execute() {
    // Access block details via this.args (e.g., content, settings, or block-level contexts)
    console.log('Custom block action executed for block:', this.args);
    
    // Perform your custom logic, trigger a modal, or call an API here
  }
}

export default MyCustomBlockAction;
5

Dear Mike, dear Justin,

Thank you very much for your replies.

I had a look at UmbBlockAction, and it is definitely heading in the right direction. Tobias and I work at the same company, and what we are specifically looking for is a global action or toggle at the top of the Grid.

In Umbraco 8, we had implemented this as shown in the screenshots:

image
image1920×1084 133 KB

image
image1920×962 372 KB

This allowed our customers to globally switch the Grid Preview on and off. Since upgrading to Umbraco 17, they have been missing this functionality.

Is there a global and maintainable way in Umbraco 17, similar to UmbBlockAction, to implement such a toggle for the Grid Preview without compromising Umbraco’s upgradeability?

Thank you very much for your support.

Best regards,
Nico

6

Hi @NicoM77

There’s nothing out of the box so you would have to build it yourself (or use AI to build it for you). As @mistyn8 suggested, the sorting collapses the blocks, so you could try and re-use into that to create a toggle to collapse/expand.

The other suggestion from AI is to use a Property action and shared context:

Register a propertyAction extension targeting the Block Grid’s property editor UI alias (Umb.PropertyEditorUi.BlockGrid). This gives you a button in the property’s action bar, same spot as things like “Sort”. Its click handler toggles a boolean held in a custom UmbContext (provide it at the property editor or workspace level, consume it wherever needed).

The catch: whether a block renders its rich preview or the default label card is currently driven per block-type by whether a “Custom View” is set. There’s no runtime flag core checks. So for a global toggle to actually do anything, your custom view elements (the ones implementing UmbBlockEditorCustomViewElement) need to consume that shared context and conditionally render either your rich HTML or fall back to plain label output themselves. That means every custom view you write has to be context-aware, it’s not something you can bolt on externally to existing views you don’t control.

That would need building yourself though I’m afraid.

Justin

7

Have you considered putting the block grid on a separate tab?

It may not be suitable in your situation, but sometimes the simplest solution is best.

8

Thanks everyone for your input. We’ve now decided to go with the already built-in, native approach using “Sort mode”.