PowerApps Week of Selector Component

Have you ever needed to filter data based on the week of? To use a select-able dropdown, you first need to figure out the week start date based on the current date, week end, build a dynamic collection, filter, date add, sequence… yada yada, blah blah! Instead of doing all that in multiple apps, why not build one reusable component that handles all that tricky date calculation logic? That’s exactly what we’ll cover in today’s post.

Component Goals

1. Develop a reusable component that displays the week of start and end date in a dropdown
2. Allow the user to select all weeks within a year as well as proceed forward and backward week-by-week
3. Output the selected week of object for use in gallery filtering
4. Use design principals that work with both a classic and modern PowerApps theme

If you just want the component without the technical explanation on how it works, skip to the end for the download, else read on…

Example: Weekly Task Tracking

I have a simple collection of tasks comprised of a name and due date. I use the week of component so that I can filter the tasks by week of their due date.

Technical Details

The trickiest part of getting this to work is the items within the dropdown. The results of which needs to be a list of all the weeks for a given year. By default, it will use the current year, since my global variable “varSelectedWeekOf” won’t have a value until the user uses the arrows to go to the next or previous week. Using the following code, we can generate this list of weeks. For the items property of the dropdown:

// Generate all ISO weeks for the selected year (or current year if none selected)
With(
    {
        SelectedYear: If(
            !IsBlank(varSelectedWeekOf),
            Year(varSelectedWeekOf),
            Year(Today())
        ),
        WeekStartDay: cmp_Date_WeekOf_Modern.WeekStartDay,
        DateFormat: cmp_Date_WeekOf_Modern.DateFormat
    },
    // Find the start of ISO Week 1 (based on Jan 4th rule)
    With(
        {
            StartOfISOWeek1: DateAdd(
                Date(
                    SelectedYear,
                    1,
                    4
                ),
                1 - Weekday(
                    Date(
                        SelectedYear,
                        1,
                        4
                    ),
                    WeekStartDay
                ),
                TimeUnit.Days
            )
        },
        // Build a list of weeks (up to 54)
        Filter(
            ForAll(
                Sequence(54),
                With(
                    {
                        WeekStart: DateAdd(
                            StartOfISOWeek1,
                            (Value - 1) * 7,
                            TimeUnit.Days
                        )
                    },
                    If(
                        // Include only valid weeks belonging to this year
                        Year(WeekStart) = SelectedYear || (Year(WeekStart) = SelectedYear - 1 && Month(WeekStart) = 12),
                        {
                            ISOWeekNumber: ISOWeekNum(WeekStart),
                            WeekStart: WeekStart,
                            WeekEnd: DateAdd(
                                WeekStart,
                                6,
                                TimeUnit.Days
                            ),
                            Title: Text(
                                WeekStart,
                                DateFormat
                            ) & " - " & Text(
                                DateAdd(
                                    WeekStart,
                                    6,
                                    TimeUnit.Days
                                ),
                                DateFormat
                            )
                        }
                    )
                )
            ),
            !IsBlank(WeekStart)
        )
    )
)

The reference to cmp_Date_WeekOf.WeekStartDay and cmp_Date_WeekOf.DateFormat in my code above are to input parameters for StartOfWeek.Monday and "m/dd/yyyy" respectively. These can be modified to work for your datetime region.

For the DefaultSelectedItems of the dropdown is as follows:

// Logic - Use the current week of if varSelectedWeekOf is blank (which it will be on intial load)
With(
    {
        SelectedWeekStart: DateAdd(
            Today(),
            -1 * (Weekday(
                Today(),
                cmp_Date_WeekOf_Modern.WeekStartDay
            ) - 1),
            TimeUnit.Days
        )
    },
    With(
        {
            DefaultWeekStart: Text(
                Coalesce(
                    varSelectedWeekOf,
                    SelectedWeekStart
                ),
                cmp_Date_WeekOf_Modern.DateFormat
            ),
            DefaultWeekEnd: Text(
                DateAdd(
                    Coalesce(
                        varSelectedWeekOf,
                        SelectedWeekStart
                    ),
                    6,
                    TimeUnit.Days
                ),
                cmp_Date_WeekOf_Modern.DateFormat
            )
        },
        {
            ISOWeekNumber: ISOWeekNum(DefaultWeekStart),
            WeekStart: DefaultWeekStart,
            WeekEnd: DateAdd(
                DefaultWeekStart,
                6,
                TimeUnit.Days
            ),
            Title: Text(
                DefaultWeekStart,
                cmp_Date_WeekOf_Modern.DateFormat
            ) & " - " & Text(
                DateAdd(
                    DefaultWeekStart,
                    6,
                    TimeUnit.Days
                ),
                cmp_Date_WeekOf_Modern.DateFormat
            )
        }
    )
)

For the next and back arrows, the OnSelect property adds or subtracts 7 days to the variable to get the next or previously week respectively. In addition, I’ve added custom input event properties called “NextWeekOnSelect” and “PriorWeekOnSelect”. These can be used as desired to make a event call from the component to the parent app. Here’s the next arrow’s OnSelect code.

Set(
    varSelectedWeekOf,
    DateAdd(
        Coalesce(
            varSelectedWeekOf,
            dd_WeekSelect.Selected.WeekStart
        ),
        7,
        TimeUnit.Days
    )
);
cmp_Date_WeekOf.NextWeekOnSelect();

If the user advances or goes back to a week of range that falls into the next or previous year, the drop down items will update it’s week of values accordingly for that year.

And here’s a simple example with a next event that I am aggregating the number of tasks for each week into a variable I can use in my app:

The reset button resets the dropdown back to the current date. It actually calls on the OnReset code on the component itself which resets the week back to the current week.

Set(
    varSelectedWeekOf,
    DateAdd(
        Today(),
        -1 * (Weekday(
            Today(),
            cmp_Date_WeekOf.WeekStartDay
        ) - 1),
        TimeUnit.Days
    )
);

Get the Component

Please visit my github page for the component code.