Powerapps - displaying color choices related to date choice

Question

I am new to powerapps and I've created an app based off of a sharepoint list.

The sharepoint list basically has 2 columns, date and color. Color is a choice of green, orange, yellow and red.

I've made an app where the user can choose the date and a color for that day. It works well, and I have the browse screen showing everybody's choices for that day.

I would like to now create a new screen where a small square of the chose color gets added and you can see all colors (so all squares) added for the last week, with the squares all right next to one another.

I would like to do it for the last year, as well, and ultimately make a date picker.

I'm having trouble figuring out how to do the "square creation" part and the formula to show the squares for the last week.

Should I create a second browse screen?

Really appreciate the help!

Thanks

Answer 1

You can use a vertical gallery with the WrapCount property set to the number of columns that you want to display in your colors. In the example below, the gallery has a WrapCount property of 4:

And in the gallery there is a single Rectangle control, with the following expression for its Fill property:

Switch(
    ThisItem.Color,
    "green", Color.Green,
    "orange", Color.Orange,
    "yellow", Color.Yellow,
    Color.Red)

Notice that you will have to update it to match the schema in your SP list (and make it prettier than my quick example :-).

If you want to display all items from the past week, you can use something like the example below, in which we have a horizontal gallery, and inside of it, we have a vertical gallery:

These are the controls involved in this example, and some of their properties:

• OuterGallery
  • Items: ForAll(Sequence(7, -6), { Date: DateAdd(Today(), Value) })
  • Children:
    • Label (for the day of the week)
      • Text: Index(Calendar.WeekdaysShort(), Weekday(ThisItem.Date)).Value
    • InnerGallery
      • Items: Filter(MySPList, Date = ThisItem.Date)
      • TemplateSize: 40
      • TemplatePadding: 1
      • Children:
        • Rectangle (for the color)
          • Width: Parent.TemplateWidth
          • Height: Parent.TemplateHeight
          • Fill: Switch( ThisItem.Color, "green", Color.Green, "orange", Color.Orange, "yellow", Color.Yellow, Color.Red)

As usual, you can always update how things are displayed (sort colors, change layout), but that should give you a starting point.