Display custom order properties in order list view in Umbraco backend

[thomas-jf]

Is your feature request related to a problem? Please describe. We are using order's custom properties very often. It is very easy to show these properties in details view, but it will be nice to display them also in orders view. It will be easier to find an order with specified property.

Describe the solution you'd like I think it can be the same solution with JSON config file as details view. As a start, just property label and value. and it can be displayed as custom order line properties in details view:

Describe alternatives you've considered Custom order properties can be also displayed in a separate column

As an extra feature, it will be nice to use custom properties in filters/search.

[MichaelNielsenDK]

I'd like to second this.

Different customers has different properties that are important to them. So being able to customize what columns and informations is shown here, would be a great help to customers, so we could list the shipping method, discount code used or something completely different and custom.

[thomas-jf]

Are there any chances to get it implemented? We got a request from our customer, that would like to see some order properties already on the list.

Regards, Tomasz

[mattbrailsford]

Definitely something we can look at. Just getting v2 out of the way first then regrouping on what to focus on next. We still have items on the roadmap to address, but will see what makes most sense to tackle. 👍🏻

[thomas-jf]

Hi Matt, 10 months passed and I'm asking again, as we are close to finishing the project (which was also delayed). It's the customer request, that order listview needs to show some custom order properties. I would rather not do a custom order view in the backoffice.

I've looked into Changelog, but found not so much.

Regards, Tomasz

[mattbrailsford]

Hey @bjarnef

This wasn't something we were planning on working on imediatly as like I said, we had/have other more pressing items on the backlog to resolve.

This said, I have taken a quick look at what could be possible pretty quickly and I've come up with the following so far.

I now have a local build that has a "store.order.list.config.js" file similar to the order editor config that can have contents like

{
    properties: [
        { alias: "color", label: "Color" },
        { alias: "size", label: "Size" }
    ]
}

which then gets mapped to columns in the table AFTER the name property

Limitations on this implementation are

1. It only displays order properties (not order line properties, or other order related values)
2. You can only really display the property value (this isn't entirely true, but mostly, see template below)
3. Each defined property is it's own column

In the config, the supported key values would be

• alias the property alias to render
• label the label to use for that column
• align whether to align left or right
• placeholder a value to display if there is no value
• template a SIMPLE angular template that can have access to the order object. The default template used if nothing is provided is {{ properties['alias'].value }} so as you can see, you could render a different value if you want to, but only things that can be interpolated can be used (so you can't use if statements for example). You can add markup to that template, but be careful as you could mess things up. Also, note that the order you have access to in the template is a simplified order with only key information retrieved. We don't fetch the whole order as this would be heavy on the request.

Also, we don't have anything to scroll the table horzontally so if you add a whole bunch of properties, things will get squashed up.

Would this be enough of a starter for everyone on this issue? // @MichaelNielsenDK

[mattbrailsford]

PS if anyone wants to test this, there is a 2.4.0-alpha-order-list0016 build on our unstable feed at https://nuget.outfield.digital/unstable/vendr/v3/index.json

[thomas-jf]

thank you, @mattbrailsford I'll try that

[bjarnef]

Hi @mattbrailsford

Okay, I wasn't part of this discussion, but it seems good to me 😅

If the value stored is an udi, I guess it would be possible to use angular filters? E.g. {{ properties['alias'].value | ncNodeName }} or formatting a date {{ properties['alias'].value | date: 'dd/MM/yyyy' }}.

I guess it is using $interpolate to handle the expression similar to how block label expression is handled in Umbraco core? https://github.com/umbraco/Umbraco-CMS/blob/v10/contrib/src/Umbraco.Web.UI.Client/src/common/services/blockeditormodelobject.service.js#L584

[mattbrailsford]

@bjarnef yes it would, and exactly that. So if you are familiar with Nested Content label templates, or the block list label templates, it follows the same approach.

[bjarnef]

@mattbrailsford that's great and a cool addition from my point of view. I haven't tested the new release, but I guess it potential could add a custom angular filter to turn a rating value, 1-5 to x number of <i class="icon-rate"></i> in the markup just to give an example: https://github.com/vendrcontrib/vendr-reviews/blob/v2/dev/src/Vendr.Contrib.Reviews/Web/UI/App_Plugins/VendrReviews/BackOffice/controllers/review-list.controller.js#L78-L82

I don't think <umb-icon> would render in this context though, which is why I didn't used that for now in the Vendr Reviews package.

[mattbrailsford]

@bjarnef potentially. It's not something I've tried though, but don't see why it couldn't work. But yea, the <umb-icon> wouldn't work here.

[bjarnef]

Another example could be if you have a order property storing True or False.

{{ properties['alias'].value === 'True' ? "Yes" : "No" }} or {{ properties['alias'].value === 'True' ? "<i class="icon-checkbox-dotted-active"></i>" : "<i class="icon-checkbox-dotted"></i>" }}

I haven't tested this though, but I would imagine it would work, when it follows the same approach as Nested Content and Block List.

[MichaelNielsenDK]

Hi @mattbrailsford

Just tested this, and it works great 👍

In my case the client has requested shipping and payment methods, which are not order properties, but I'm thinking just saving these values on custom order properties, then they can be shown in the order list.

The client also wishes to be able to sort the columns, including the default ones. So maybe these should be sortable by default, and for the custom ones, being able to set sortable true/false in the config?

The sorting is not a critical need though, just getting what is already there in a production version would be awesome. 😎

[thomas-jf]

Hi @mattbrailsford Yeah! It works! I think the customer will be glad. I have just bought an yearly license and the commited to buy upgrades.

Thank You for effort! :)

As @MichaelNielsenDK says, it will be nice with sorting, but it's not critical now.

Are there any other "issues" in this alpha realease I should be aware of? I intend to use it in production 😮

[mattbrailsford]

The only other thing that is in this alpha is some additional null checking for another bug fix so shouldn't be anything major. The reality is our unstable builds move pretty quickly so are usually pretty stable. I'll see when I can get this scheduled into a release though

Thanks for testing👍