How do I Sort the Tree in UI Builder?

I have some dashboards I’m working on for a client and I cannot seem to figure out how to set the sort order on the items in the tree. Currently I have the following:

However, orders that are ready for production should be before orders that are in production. I have them added to the tree in the order that I want in the settings, but it seems to be defaulting to alphabetical. I couldn’t find anything when searching around in the code, or in the documentation, about how to change this.

Anyone know? :slight_smile:

Have you tried using AddTreeAfter to add add a given tree after another tree?

If that’s not working then it sounds like it might be a bug.

Alternatively, most config options should also have a SetOrdinal method that can set the sort order.

Hey Matt, thank you so much! I was looking at the AddTreeBefore/AddTreeAfter settings and those work for the whole tree, but there’s no AddCollectionBefore/AddCollectionAfter to let you sort your collections that I could find - let me know if I’m missing something?

I tried .SetOrdinal and that doesn’t seem to be effecting the sort order either - they’re still alphabetized. I tried futzing with them to really scramble them just in case, but no luck. I’ve included a simplified version of the code here that just isn’t showing all the actions, search, filters, and full fields list.

public static UIBuilderConfigBuilder AddUIBuilderConfiguration(this UIBuilderConfigBuilder uIBuilderConfig)
{
    uIBuilderConfig.AddSectionAfter("commerce", "Custom Orders", sectionConfig => sectionConfig
        .Tree(treeConfig => treeConfig
            .AddCollection<ProductionOrderLine>(x => x.OrderLineId, "Order Line", "All Custom Orders", "A single custom order line for production", "icon-dna", "icon-dna", collectionConfig => collectionConfig
				.SetOrdinal(0)
				.DisableCreate()
                .SetNameProperty(p => p.Sku, "Sku")
                    .SetDataViewsBuilder<CustomOrderLineDataViewBuilder>()
                    .ListView(listViewConfig => listViewConfig
                        .SetPageSize(50)
                        .AddField(p => p.OrderId).SetHeading("Order Id")
                        .AddField(p => p.OrderLineId)
                        .AddField(p => p.ProductionStatus, fieldConfig => fieldConfig.SetFormat((x, p) => x != null ? Enum.Parse<OrderStatus>(x, true).GetAttribute<DisplayAttribute>().Name : string.Empty))
                    )
            )
            .AddCollection<ProductionOrderLine>(x => x.OrderLineId, "PreProduction Order Line", "Ready for Production", "A single custom order line for production", "icon-checkbox", "icon-checkbox", collectionConfig => collectionConfig
				.SetOrdinal(1)
				.DisableCreate()
                .SetNameProperty(p => p.Sku, "Sku")
                    .SetFilter(p => p.ProductionStatus.ToLower() == "preproduction")
                    .ListView(listViewConfig => listViewConfig
                        .SetPageSize(50)
                        .AddField(p => p.OrderId).SetHeading("Order Id")
                        .AddField(p => p.OrderLineId)
                        .AddField(p => p.ProductionStatus, fieldConfig => fieldConfig.SetFormat((x, p) => x != null ? Enum.Parse<OrderStatus>(x, true).GetAttribute<DisplayAttribute>().Name : string.Empty))
                    )
            )
			.AddCollection<ProductionOrderLine>(x => x.OrderLineId, "Production Order Line", "Orders In Production", "A single custom order line that is in production", "icon-wrench", "icon-wrench", collectionConfig => collectionConfig
				.SetOrdinal(2)
				.DisableCreate()
				.SetNameProperty(p => p.Sku, "Sku")
				    .SetFilter(p => p.ProductionStatus.ToLower() == "production")
				    .ListView(listViewConfig => listViewConfig
					    .SetPageSize(50)
					    .AddField(p => p.OrderId).SetHeading("Order Id")
					    .AddField(p => p.OrderLineId)
					    .AddField(p => p.ProductionStatus, fieldConfig => fieldConfig.SetFormat((x, p) => x != null ? Enum.Parse<OrderStatus>(x, true).GetAttribute<DisplayAttribute>().Name : string.Empty))
				    )
			)
		)
    );

    return uIBuilderConfig;
}

Orders In Production is still displaying above Ready for Production:

Am I missing a step somewhere or should I be reporting a bug? :slight_smile:

Yea, by the sounds of it, it seems like a bug. I’ve just checked the issue tracker and it looks like it’s actually already been reported SetOrdinal() not properly setting sort order · Issue #138 · umbraco/Umbraco.UIBuilder.Issues · GitHub

Might be best to follow that issue for updates :+1:t2:

2 Likes