By default, browsing items in a list with a PowerApp the items all look the same.  This is fine in most cases, but I want to ensure the managers viewing the items can see items that are older first.  I could do this by modifying the search parameters for the browse screen to put the oldest at the top, but I want the older ones to jump out a bit.  So right now logging in, a user is going to see this:

Modifying the PowerApps Display Styles Based on Field Values - Default View

I want to modify the view so that the text of each is a different color depending on the age of the request and also how close the request start date is from the current date.  So initially I want the colors set based on the following criteria:

  • If less than 7 days old: Green
  • If more than 7, but but less than 14: Yellow (<– Yellow on white background is hard to see)
  • If more than 14 days: Orange
  • If the current day is less than 21 days from the start date: Red

This is where conditionals come into play.  Like all programming languages, PowerApps allows you to use conditional statements to control objects.  If…then…else, switch statements, etc are all available to allow you to conditionally manipulate your environment.  In this case I want to use conditionals to control how the text will appear.

The format of an IF conditional is If(<Condition>,<then>,<else>) or If(<Condition>,<then>,<elseif condition>,<then>,….)

For example: if I wanted to use an if statement for the text color of the user’s name I would put the following formula on the color attribute:

If(ThisItem.Created >= Today()-7,RGBA(44, 210, 47,1))

Today() is a function similar in function to Date.Now().  So what the statement above states is if the item created date is within the last 7 days, change the color to green.  Applying the function to the above list items will give us the second item as green for the Name field:

Modifying the PowerApps Display Styles Based on Field Values - Formatting The Name

If I wanted to do show a couple of my options above I would need to use an if\elseif conditional.  So for the Green and Yellow conditional I want:

Modifying the PowerApps Display Styles Based on Field Values - Multiple Conditionals

So that’s just two conditionals.  As you can see it could get pretty long.  I would love to say that we could move to a switch statement using something like this:

Switch(ThisItem.Created,>Today()-7,RGBA(44, 210, 47,1))

However, currently only comparisons to constants will work. For instance if you did a math calculation of “NumDaysDif = Today() – ThisItem.Created” and had a result of 5 you could then do this in your switch statement and get the result you want:

Switch(NumDaysDif,5,RGBA(44, 210, 47,1))

Unfortunately this is not an option currently.  So to accomplish what I want to do I need to write a long if statement.  The final statement will look something like this:

If(ThisItem.TrainingStartDate <= Today()+7,RGBA(249, 31, 38, 1),ThisItem.Created >= Today()-7,RGBA(44, 210, 47,1),ThisItem.Created <= Today()-7 && ThisItem.Created >= Today()-14,RGBA(232, 225, 27, 1),ThisItem.Created > Today() - 14,RGBA(249, 132, 31, 1))

And when added to all of the fields in the Browse Gallery your result should look something like this:

Modifying the PowerApps Display Styles Based on Field Values - All Fields Updated

Pretty straight forward once you get going.

 

Thanks for reading!