cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
kriggo15
Responsive Resident
Responsive Resident

Month Navigation (Next & Previous)

I need some ideas on how to best create the below method of navigating through months. The dropdown will default to the most recent month which is no problem, but I'm not sure how to create the logic for the "next" and "previous" month arrows. Right now, I'm just using SharePoint to figure out what the best way to model my data is.

My initial thought was to use variables to increment the month number + or - 1 but not sure how to translate that to actually selecting the corresponding month in the dropdown.

Month Selection.png
Month Source.png

1 ACCEPTED SOLUTION

Accepted Solutions
RandyHayes
Super User
Super User

@kriggo15 

Yes, get to know those functions - they are highly powerful in PowerApps, and will save you a lot of work!!

 

For #1, not a problem, but it changes the design as you need to have your list of months available to all the controls that are playing in this process.  Currently, the months are just available to the dropdown through the Items property.  So we need to make them external to the control so other can see them.

 

Let's start over!  Here are all the formulas:

 

In the OnVisible action of your screen:

UpdateContext({lclMonths:
    ForAll(Sequence(13, 0),
        With({_date: DateAdd(Today(), Value-12, Months)},
            {Value: Text(_date, "mmmm yyyy"),
             Date: _date,
             Sequence: Value
            }
        )
    )
    }
)

This creates the table of the months from this month back to the same month of the prior year.

 

The Items property of your Dropdown:

lclMonths

 

The OnSelect action of the Left arrow:

UpdateContext({lclDate: LookUp(lclMonths, Sequence=yourDropdownName.Selected.Sequence -1).Date})

The DisplayMode property of the left arrow:

If(yourDropdownName.Selected.Date> First(lclMonths).Date, DisplayMode.Edit, Disabled)

 

The OnSelect action of the Right arrow:

UpdateContext({lclDate: LookUp(lclMonths, Sequence=yourDropdownName.Selected.Sequence +1).Date})

The DisplayMode property of the right arrow:

 

If(yourDropdownName.Selected.Date < Last(lclMonths).Date, DisplayMode.Edit, Disabled)

 

 

And finally, the Default of your dropdown:

Text(Coalesce(lclDate, Last(lclMonths).Date), "mmmm yyyy")

 

That should provide what you need.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

4 REPLIES 4
RandyHayes
Super User
Super User

@kriggo15 

Yes, a variable is needed in this case.

 

Set the Items property of your dropdown to:

ForAll(Sequence(12),
    {Value: Text(Date(Year(Today()), Value, 1), "mmmm yyyy")}
)

 

Set the OnSelect action of the Left arrow to:

UpdateContext({lclMonth: Coalesce(lclMonth, 1)-1})

Set the DisplayMode property of the Left arrow to:

If(lclMonth>1, DisplayMode.Edit, Disabled)

Set the OnSelect action of the Right arrow to:

UpdateContext({lclMonth: Coalesce(lclMonth, 1) +1})

Set the DisplayMode property of the Right arrow to:

If(lclMonth<12, DisplayMode.Edit, Disabled)

Set the Default of the Dropdown to:

Text(Date(Year(Today()), Coalesce(lclMonth, 1), 1), "mmmm yyyy")

 

 

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

Thanks @RandyHayes for the detailed reply. You're using some code I've never used before (Sequence and Coalesce) and I have a couple questions....

  1. I didn't include this in the original post, but the dropdown should be a rolling 12 months. It should show March 2022 now as the first dropdown item and allow selection back to March 2021. How does this change the logic for the sequence?

  2. Your left/right arrow logic works until I select a dropdown value and then try to navigate +/- a month. For example, if I use the arrows to Navigate to July 2022, then choose October 2022 via the dropdown and click the left arrow, it loads June 2022. Would I need to add logic to the OnChange property of the dropdown to update lclMonth?
RandyHayes
Super User
Super User

@kriggo15 

Yes, get to know those functions - they are highly powerful in PowerApps, and will save you a lot of work!!

 

For #1, not a problem, but it changes the design as you need to have your list of months available to all the controls that are playing in this process.  Currently, the months are just available to the dropdown through the Items property.  So we need to make them external to the control so other can see them.

 

Let's start over!  Here are all the formulas:

 

In the OnVisible action of your screen:

UpdateContext({lclMonths:
    ForAll(Sequence(13, 0),
        With({_date: DateAdd(Today(), Value-12, Months)},
            {Value: Text(_date, "mmmm yyyy"),
             Date: _date,
             Sequence: Value
            }
        )
    )
    }
)

This creates the table of the months from this month back to the same month of the prior year.

 

The Items property of your Dropdown:

lclMonths

 

The OnSelect action of the Left arrow:

UpdateContext({lclDate: LookUp(lclMonths, Sequence=yourDropdownName.Selected.Sequence -1).Date})

The DisplayMode property of the left arrow:

If(yourDropdownName.Selected.Date> First(lclMonths).Date, DisplayMode.Edit, Disabled)

 

The OnSelect action of the Right arrow:

UpdateContext({lclDate: LookUp(lclMonths, Sequence=yourDropdownName.Selected.Sequence +1).Date})

The DisplayMode property of the right arrow:

 

If(yourDropdownName.Selected.Date < Last(lclMonths).Date, DisplayMode.Edit, Disabled)

 

 

And finally, the Default of your dropdown:

Text(Coalesce(lclDate, Last(lclMonths).Date), "mmmm yyyy")

 

That should provide what you need.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

@RandyHayes, you are a genius! I appreciate your help!

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (4,170)