Sorting quirks of Combo Boxes and Drop Downs in Canvas Apps and Custom Pages

Although Custom Pages generally have most of the functionality of traditional Canvas Apps, they’re not without their limitations and quirks.

Setup

Consider the following variable:

Set (
    Hours,
    [
        {
            Display: "0 Hours",
            Value: 0
        },
        {
            Display: "1 Hour",
            Value: 60
        },
        {
            Display: "2 Hours",
            Value: 120
        },
        {
            Display: "3 Hours",
            Value: 180
        },
        {
            Display: "4 Hours",
            Value: 240
        },
        {
            Display: "5 Hours",
            Value: 300
        },
        {
            Display: "6 Hours",
            Value: 360
        },
        {
            Display: "7 Hours",
            Value: 420
        },
        {
            Display: "8 Hours",
            Value: 480
        },
        {
            Display: "9 Hours",
            Value: 540
        },
        {
            Display: "10 Hours",
            Value: 600
        },
        {
            Display: "11 Hours",
            Value: 660
        },
        {
            Display: "12 Hours",
            Value: 720
        }
    ]
);

A simple array of objects, to hold a ‘Display’ value of a number of hours and a ‘Value’ in minutes.

Canvas Apps Combo Boxes and Drop Downs

If you were to present that data in a Combo Box or a Drop Down in a Canvas App using the following:

Sort(Hours,Value,SortOrder.Ascending)

You would expect to see the options presented in Value order – 60, 120, 180 etc. And that is certainly the case:

Custom Page Combo Boxes

However… in a Custom Page Combo Box, the Sort command is ignored and the values are always in Display order:

And as a result, 10, 11 and 12 appear before 2, which obviously isn’t helpful. If you enable the modern controls and select a Dropdown (no idea why it’s ‘dropdown’ in a custom page and ‘drop down’ in a canvas app), you still get the same behaviour:

The Solution

I’m not sure why Sorts are ignored in Custom Pages, but fortunately, the workaround isn’t too bad – add a space before all the single-digit numbers:

Set (
    Hours,
    [
        {
            Display: " 0 Hours",
            Value: 0
        },
        {
            Display: " 1 Hour",
            Value: 60
        },
        {
            Display: " 2 Hours",
            Value: 120
        },
        {
            Display: " 3 Hours",
            Value: 180
        },
        {
            Display: " 4 Hours",
            Value: 240
        },
        {
            Display: " 5 Hours",
            Value: 300
        },
        {
            Display: " 6 Hours",
            Value: 360
        },
        {
            Display: " 7 Hours",
            Value: 420
        },
        {
            Display: " 8 Hours",
            Value: 480
        },
        {
            Display: " 9 Hours",
            Value: 540
        },
        {
            Display: "10 Hours",
            Value: 600
        },
        {
            Display: "11 Hours",
            Value: 660
        },
        {
            Display: "12 Hours",
            Value: 720
        }
    ]
);

and you then get the desired result:

I’m not sure if this is a bug or just a limitation, but it’s worth being aware of at least.