Archive for August, 2017

Modifying the PowerApps Display Styles Based on Field Values

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!


Using SharePoint Lookup Type Fields in PowerApp Browse Screens

In my previous post I discussed how to create a new PowerApp directly from a SharePoint list.  I also indicated it had a few limitations that needed to be addressed.  One of these limitations was the default browse screen is not compatible with lookup type fields (People\Groups, Choice, Lookup, etc).  These field types are of course available in the details and edit screens, but not the browse screen.

Using SharePoint Lookup Type Fields in PowerApp Browse Screens - Bad User Experience

I can force the control to look at the field I want, but it doesn’t know how to convert the object into text.

Using SharePoint Lookup Type Fields in PowerApp Browse Screens - spUser Not Compatible

Being limited to just the text fields of the list or at least fields PowerApps knows how to treat as text (Date\Time fields) was creating a bad user experience in the forms I wanted to create. I had to come up with another way.  Using a calculated field in the SharePoint list won’t work because a calculated field can’t see those columns either.  It’s actually

Using SharePoint Lookup Type Fields in PowerApp Browse Screens

Because I want to be able to see these values on my browse screen they need to be converted to text.  The two fields I want on my browse screen that are not compatible with the view are:

  • Training Requested For – The name of the person taking the training (Person or Group field)
  • Training Requested – Title of the training course (Lookup Field)

Luckily there are formulas that can help us out here.  To display the name of the user PowerApps has the ability to call the DisplayName property of the field.


Using SharePoint Lookup Type Fields in PowerApp Browse Screens - Display Name of Person Field

To get the title of the training requested is just another property of the field.


Using SharePoint Lookup Type Fields in PowerApp Browse Screens - Displaying Lookup Field

I decided to get a bit fancier and add some text at the beginning of the value to add to the experience.  I wanted the field to read: Course Name: <“Name of the Course”>.  To do this, you simply combine two strings together (the can be variable based or static (what you typed)) inside a Concatenate function.

Concatenate("Course Name: ", ThisItem.TrainingRequested.Value)

The final values I wanted on the form were the start date, End Date and total estimated cost.  Dates were straight forward as they are available from the drop down of the data properties.  The cost I had to get a bit fancy here too.  I wanted the cost to display as Total Estimated Cost: $XXXX.XX.  The problem now is that the Concatenate function requires strings and the TrainingCost field comes back as a numeric.  Enter in a another formula.  Text(<string>, formula) will convert a string to a formula.  The final formula looked like this:

Concatenate("Total Estimated Cost: ", Text(ThisItem.TrainingCost, "[$-en-US]$#,###.##00"))
//The #,###.##00 format indicates to put a comma at every thousand, ten thousand etc, 
//and the 00 at the end indicate to add trailing zeros if none exist.

When all was said and done I ended up with my form looking like this”


PowerApps is still pretty new, but there is a lot you can do with it.  I look forward to seeing where it will get to in the near future.


Thanks for Reading!