Umbraco 13 to 17: Equivalent of block.Index in custom backoffice views

Questions
1

Hi all,

I’m migrating custom backoffice views for some blocks from v13 - v17.

In the old AngularJS setup, it was possible to get the index of a block using {{block.index}}.

Anyone know of an equivalent method to expose this in the new backoffice?

Thanks!

2

Anything in… UMB_BLOCK_ENTRY_CONTEXT

untested AI generation…

this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (instance) => {
      if (!instance) return;

      // Observe layout changes or query the block manager for its current index
      this.observe(instance.layout, (layout) => {
        if (layout && 'index' in layout) {
          this._blockIndex = (layout as any).index;
        }
      });
    });
3

Thanks Mike! Great starting point, tweaked it and got it working.

For anyone else trying to solve, managed to get there with this:

 import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';

@property({ type: Number })
private _blockIndex = 0;

constructor() {
    super();

    this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (instance) => {
        if (!instance) return;

        this.observe(instance.index, (i) => {
            if (i !== undefined) {
                this._blockIndex = i;
            }
        });
    });
} 

return html`
<div>
       ${this._blockIndex}
</div>
`;
4

Hi @si25

A little late to the party, but if I´m not mistaken, you can just add a Property called index:

@property({ type: Number })
public index?:number;

and then use that in your template.

Here is the TypeScript definition for Block Custom View Properties, so it gives you an idea about what is being parsed on:

manifest?: ManifestBlockEditorCustomView;

config?: UmbBlockEditorCustomViewConfiguration;

blockType?: BlockType;

contentKey?: string;

label?: string;

icon?: string;

index?: number;

layout?: LayoutType;

content?: UmbBlockDataType;

settings?: UmbBlockDataType;

contentInvalid?: boolean;

settingsInvalid?: boolean;

unsupported?: boolean;

unpublished?: boolean;

readonly?: boolean;
5

Thanks @nielslyngsoe, that’s a much easier route to get there!

6

On a related note, I’m trying to replicate the out of the box v13 functionality that shows a user a content label on hover.

Don’t suppose there’s a uui element I can wrap the html in to get to this, or would I need to roll my own?

image
image1245×586 115 KB