Sort Content Picker items by date/name in Umbraco 17?

Questions
1

Hi everyone,

Is there any way to change the order of items in the Content Picker’s selection list in Umbraco 17 (e.g. by date or name , it wasn’t possible in Umbraco 13) ?

2

@sumitboghara.01 There’s no built-in sort setting on the Content Picker data type itself the picker preserves whatever order items were selected in, both in v13 and v17. That hasn’t changed with the new backoffice.

The standard approach is to sort on output rather than trying to change picker behavior:

csharp

@{
    var picked = Model.Value<IEnumerable<IPublishedContent>>("myContentPicker");
    var sorted = picked?.OrderByDescending(x => x.CreateDate); // or .OrderBy(x => x.Name)
}

If you need editors to see sorted order while picking (not just on render), that’s not exposed via config in v17 you’d need to extend the picker’s property editor UI (it’s Lit/TypeScript-based now). That’s a fair bit more work and only worth it if sort-while-picking is a hard requirement.

For 95% of cases, sorting at the template/rendering layer is the way to go.

/Bishal

3

Thanks @BishalTimalsina12!
Quick question , what do you mean by “sort on output”? Do you mean sorting the items in the Razor view when rendering the page?

Our real issue is inside the picker dialog. 99% of our editors want newest items at the top when picking. With big lists they have to scroll to the bottom every time something new is added. Same pain with the Media Picker too.

4

@sumitboghara.01 I went and checked the actual v17 source code to give you a definitive answer .

The Content Picker’s item-fetching code (document-tree.server.request-manager.ts) only sends parentId/dataTypeId, skip, and take to the Management API there’s no orderBy or sort parameter anywhere in the request. So this isn’t a config setting you’re missing: the picker genuinely has no mechanism to request items in a different order. Whatever comes back is the default sortOrder (manual tree order). Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/server-data-source/document-tree.server.request-manager.ts at a414c8d866c25ed33dc6ed09d0e7200628ab4e6f · umbraco/Umbraco-CMS · GitHub

There’s also a live, confirmed GitHub issue on this reported against v17/v18, where the core team reproduced that the new picker UI dropped the old pagination/sort-friendly UX from v13 in favor of a flat “load more” list, which matches exactly what I found in the code (skip/take, no ordering).

this isn’t fixable from your end via config. your options are to add a :+1: or comment on #22992 to help it get prioritized, or build a custom property editor UI if you need this urgently the “Content Picker” and “Media Picker” both hit the same underlying limitation since they share this tree data-source pattern.

github: Umbraco 17 Content Picker UI · Issue #22992 · umbraco/Umbraco-CMS · GitHub

5

oh and “sort on output” just means sorting the already-picked items when you render them in the Razor view (e.g. OrderBy/OrderByDescending on the collection). That only affects how items display on the published page it won’t help with the picker dialog itself.

and welcome to Umbraco forum :hugs:

/Bishal

6

:folded_hands: Thank you @BishalTimalsina12 for taking the time to investigate this in detail.

Your explanation gave me a clear understanding of the limitation and the right implementation approach.

:blush: I truly appreciate your support and guidance. Thanks again! :rocket:

7

@BishalTimalsina12

Thanks again for confirming the limitation regarding sorting.

As a follow-up, I’m exploring whether it’s possible to extend the current Content Picker’s behavior instead of building a completely new custom Property Editor.

My goal is to keep the existing Content Picker behavior, including:

  • the same value storage format,
  • the same value retrieval and entity resolution,
  • and the same editor experience,

while only customizing the selection dialog to support sorting and filtering.

Is this approach supported in Umbraco 17? Are there any extension points or reusable services/components that would allow this, or is creating a fully custom Property Editor the only recommended approach?

8

@sumitboghara.01 Yeah, this is doable without a new property editor.

The picker dialog isn’t hardcoded into the property editor it’s resolved via a modal alias (UMB_TREE_PICKER_MODAL_ALIAS) from the extension registry. The property editor just opens whatever’s registered under that alias and reads back a selection; value storage and entity resolution live in a separate layer (schema alias + value converters) untouched by the modal.

Two options:

  1. Override the modal via overwrites. You can’t register a duplicate alias directly (registry rejects it), but overwrites is the supported way to replace it. Bonus: Media Picker uses its own separate alias (Umb.Modal.MediaPicker), so this shouldn’t affect it — haven’t confirmed Member Picker.
  2. New Property Editor UI, same schema alias. Register against Umbraco.ContentPicker/Umbraco.MultiNodeTreePicker, reuse the input-content wiring, point it at your own modal — one that queries the Collection endpoint (getCollectionDocumentById, supports orderBy/orderDirection) instead of the plain tree endpoint. Return the same UmbTreePickerModalValue shape and value format, Razor consumption, and entity resolution stay identical.

I’d go with option 2 scoped, keeps default pickers untouched elsewhere.

feel free to create a new thread so we can help u in the process.

all the best
/bishal

9

Hi,

I’ve not checked this, but I suspect the standard content picker will follow the sort order of the content items in the tree. If so you might be able to use the approach I wrote about here…