To catch up on where we left off in my last blog post, check out part 1 on how to set up your Canvas App with the correct data model that this blog post enhances.

In the first part of this theme we ended with a working set of notifications that could be displayed within the Canvas App using a Dataverse table, however, I decided to leave the cosmetics until part 2 so that I could deliver something unique. Here’s what the Notification area looked like when we finished part 1:

Let’s take a look at three UI enhancements that we can make for the user to improve their experience, and to bring alerts to their attention!

1. Make the Notifications Gallery Distinctive

Gradients, rounded corners, white space, and minimalist designs are the latest go-to trend in software design – and for good reason too! Using these tricks helps you to focus the user’s mind on to a specific area of the app without overwhelming the user with too much information, whilst other components seem to blend in to the container that the content sits within.

At the time of writing, rounded corners aren’t available in every control and gradients just simply aren’t possible. However, for those of you that are comfortable with inserting CSS through templated means, you’ll be pleased to know that you can use the ‘Html Text’ generate these designs for you.

First of all, we need to choose a colour palette. If you don’t have any experience in working with colours then you can use a combination of the Power Toys’ Colour Picker and/or this Tailwind Colour Generator to create gorgeous modern designs.

Keeping the app on-trend, here are my colour palette options in Power Toys:

And here is the same colour with its colour palette in the Tailwind Colour Generator:

To incorporate these into our app, we need to add the new Html Text Control to the screen and we can use a simple snippet of HTML that wraps around our CSS with our chosen styles. The snippet you’ll need is:

"<div style=""border-radius: 15px; background-image: linear-gradient(#952e8b, #692661); width:100%;height:" & HtmlBg.Height -11
 &"px;""></div>"

• <div> acts as the ‘block’ that we want to design.
• border-radius allows us to add rounded corners.
• background-image allows us to specify our gradient, and lastly,
• width & height specifies the size of our ‘block’.

Whilst building this I realised that I was seeing a vertical scroll bar on my <div>, so by calculating the height as ‘height of the Html Text Control – 11’ we can make our <div> small enough to fit within the Control and therefore remove the scrollbar.

Your screen will now look something like the above, so just remember to right-click on your Html Text Control, navigate to Reorder, and choose Send to back.

2. Adjust the Fonts

Your Notification Gallery will now look far better than before but depending on the colours you have selected for your gradient, it’s unlikely that your text will be visible to the vast majority of individuals, and you may receive accessibility warnings in your App Checker.

Set your Labels’ colour to white (or RGBA(255,255,255,1) for the technical amongst us!), and use bold and underline formatting to make elements of your Notifications panel stand out.

For my example, I have:

• Set the ‘Notifications:’ Label to size 18px and bold.
• Set the ‘Date’ Label to size 14 and underlined.
• Adjusted the main body of the notification text so that the modern Navigation controls fit nicely against the title and footer of the Notifications without taking up too much space.

3. Visualise Information

If you remember from part 1, we had even more information that we wanted to display in this notification panel. We created a Type field that allowed us to specify the severity of the notification. Our objective is to keep this design clean, so instead of adding a Label with the type, perhaps we could provide a circle that shows the severity.

To do this, we need to add a Circle Control to the Gallery Control and our Fill Property is going to be controlled using the Switch Function, which allows us to provide different results based on a series of potential outputs.

Use the following snippet with some well selected colours using Power Toys’ Colour picker again, and each Circle within the Gallery will have a different colour based on its severity, or it’ll be filled white for anything else.

Switch( ThisItem.Type, Type.Information, RGBA(69,164,255,1), Type.Error, RGBA(238,92,54,1), Type.Warning, RGBA(255,232,79,1), Type.Success, RGBA(78,195,74,1), RGBA(255,255,255,1))

To make sure that our colours remain accessible, adding a border to the Circle Control also enhances the look & feel. The end result should look something like this:

Conclusion

We’ve now completed our fully styled Notification panel that can be used alongside other Controls in our app! You may want to make some adjustments to your final output, and thankfully this is extremely easy to do using the Properties within your app or further CSS within your Html Text Control, you just need to spend some time testing out what works for you and your company’s brand/style.

If this article helps you and you manage to create something new, please feel free to share your creations in the comments!

When you use a dropdown control within a Canvas App it can be surprisingly tricky to show exactly what you want as an option unless the data already exists as a value in your data source. I assume that the reason for this is that dropdown controls are most commonly used within forms, and therefore the options available need to be valid for your submission otherwise your data entry will fail.

Dropdown controls have other uses too such as filtering data within a Table or a Gallery, and in this situation, you may need the data displayed under your control based on processing within the Canvas App itself. Last week I needed to do exactly that!

The Challenge

I am currently building a small timesheet approvals app, and the dropdown I wanted to create needed to display a list of people with an indication to the end user of how many unapproved time entries there were for that person. Afterall, if 40% of people had no unapproved time, it would be really frustrating for the end user to endlessly click on people to find that they have no time entries awaiting approval. In my example, I was using data from a Collection that was getting data from a table in another data source holding delivery resources, and I could choose any of the following fields but I couldn’t do anything else as the Value Property is not available for me to modify with Power Fx.

This may not be a problem in other use cases as the people with approved time could be disregarded from the Collection by filtering on Delivery Resources where ‘unapprovedcount’ is 1 or more, but this won’t work for me with the app’s requirements so I had to seek another solution so that I could show ‘name’ and ‘unapprovedcount’ as one dropdown item.

The Solution

The workaround for this was relatively simple, but trying to find resources on how to achieve it was proving tricky! Given that we have already created a Collection from the data source called ColDeliveryResources, we simply need to create a second Collection based on this to add a column to the existing data, and in this particular case I needed to also sort by the number of unapproved timesheet entries too. By doing this in the OnStart property of the app, we can use Power Fx here to define a new column that we can select within the Value property of the Dropdown control:

First Collection

//Collects all resources from the Delivery Resources table to use across the app.

ClearCollect(ColDeliveryResources, ShowColumns('Delivery Resources',"name","resourceid", "email", "unapprovedcount"));

Second Collection

//Collects the results from ColDeliveryResources and adds a column to each one combining 'name' and 'unapprovedcount'. For example, 'Aaron Gumbs (9)'. Once this has been achieved, we sort the names from highest number of time entries unapproved to lowest so that the end user can prioritise their workload.

ClearCollect(DropdownDisplay, SortByColumns(AddColumns(ColDeliveryResources, "displayname", Concatenate(name," (", unapprovedcount,")")),"unapprovedcount",Descending));

Final Result

Once I had run OnStart and my new collection was available, I simply needed to swap out the original Collection for the new one in the ‘Items’ Property of the Dropdown control, and ‘displayname’ became available to select, allowing me to finally show both ‘name’ and ‘unapprovedcount’ on the screen as shown below.

New year, new challenge!

This week I was asked to adapt one of our internal Canvas Apps that was used for an exercise challenge in December to track miles, so that the leaderboard resets to ‘0 miles’ at the beginning of each month. Our team’s goal is to log the miles run or walked within the month, with the aim to contribute at least one mile per day of the month.

One of the features I delivered was a progress bar, but I wanted this progress bar to change based upon the duration of the month. Amongst other dynamic calculations, the width of the progress bar I want should be “total number of days in the month multiplied by 10”, and it looks something like this:

As we are all well aware, the length of months aren’t consistent, and in my app progress should be ‘higher’ in February if I have run 15 miles in 28 days, as opposed to running 15 miles in March which has 31days. In February the width should be 280px and in March it should be 310px.

To my surprise there wasn’t an existing Power Fx function that could achieve this but I was able to do this myself with the following solution. For someone who writes Power Fx regularly, I found this quite difficult to explain whilst writing the one statement, so hopefully the following explanation that breaks down the formula can help you too.

Constructing the Formula

I’m using the last day of the month in multiple places in my Canvas App, so I don’t quite want to create the final value (the multiplication by 10 for the width of the progress bar) just yet. For now, let’s start our formula by declaring a new variable called varDaysInThisMonth in the OnStart Property of the Canvas App.

//Create the variable varDaysInThisMonth with an empty string.

Set(varDaysInThisMonth,"")

We then want to identify the last day of the month, but there’s also no direct formula for this either! We can use a little trick to achieve this by finding out the first day of next month, and then take away one day from the value.

Let’s do this by constructing the date for the first day of this month, and then add one month to the value. Please note that we need to make the Year and Month value dynamic here, otherwise we’ll end up with bad data in later months.

//Given that the current date is in January, construct the first day of the month using Date (01/01/2023) and return the value "01/01/2023" by adding one month.

Set(varDaysInThisMonth, DateAdd(Date(Year(Today()),Month(Today()),1),1,Months))

We now know the first day of the next month, so now we just need to subtract one day from this value to find out the last day of this month by wrapping a new DateAdd formula around our existing DateAdd formula.

//Given that the output above is "01/01/2023", return the value "31/01/2023" by adding -1 days.

Set(varDaysInThisMonth, DateAdd(DateAdd(Date(Year(Today()),Month(Today()),1),1,Months)), -1, Days)

In this situation the last day of the month is returned, which may be enough for some of you trying to achieve a similar calculation. In order to finally turn this in to the total number of days in this month, we just need to wrap our DateAdd calculation in a Day formula, which takes the “31” from “31/01/2023”.

//Given that the output above is "31/01/2023", return the total number of days this month, which equates to "31".

Set(varDaysInThisMonth, Day(DateAdd(DateAdd(Date(Year(Today()),Month(Today()),1),1,Months),-1,Days)))

And there we have it! Personally, I found this more difficult than I expected to. I know other similar languages used in Excel and Power BI allow for simpler calculations than this, and I’d be interested in whether you’ve found a quicker way to achieve this!

The last step for me was to simply change the Width Property of the grey rectangle acting as the background of the progress bar alongside the formula for the with of the actual progress shown in the green rectangle by using this constructed variable.

Fact check: In this article Aaron implied that he has run 15 miles in January. This is completely false, Aaron would never run 15 miles within one month!

Lately I’ve been spending a lot of time working with photos in Canvas Apps in order to create more of a visual impact in my user interface design. Often this photo can come from the Office 365 User’s profile photo upload but we can’t necessarily predict or control whether the end user will definitely have a photo uploaded.

In this example I wanted to use data from Shifts to show who is going to be on annual leave this week, and the code that I am using to retrieve the photo is as follows where ‘userId’ is the column to identify the user in the list of Shifts records.

Office365Users.UserPhotoV2(Text(ThisItem.userId))

The Power Fx formula tries to obtain the photo based upon the userId of the returned Gallery Item. Immediately we receive an error and depending on the way that you’re trying to identify the Office365User, this error can vary, sometimes showing ‘resource not found’ too!

The reason for this error is that the Canvas App doesn’t know what to show as the image if it can’t find the Office365Users’ photo. Whilst this doesn’t seem significant right now as other images are showing, it will prevent any proceeding functions from behaving correctly and your end users may have a degraded user experience when running the app.

Fortunately we can fix this with some minor edits.

Use IfError to Control the Situation

The IfError function is a way to identify whether an error occurs and what the ‘fallback’ should be in that particular event. We use IfError as opposed to IsError as this formula is specifically designed to revert to an alternative if the error occurs, whereas if we use IsError, we would need to combine this with an If statement and repeat parts of our code because IsError only returns whether an error actually occurred. I have used IfError as shown below:

IfError(Office365Users.UserPhotoV2(ThisItem.userId),SampleImage)

By adapting our previous snippet of code and using SampleImage as the fallback, this guarantees that we will not see a system error for this particular reason moving forward, and that a placeholder image will be shown for any users that do not have a profile picture. All proceeding code can execute with no problems too.

This also increases the perception of quality. Showing a placeholder image instead of a blank circle indicates that there is data that has been returned rather than giving the impression that something hasn’t loaded.

As you’d expect though, it’s difficult to tell who this person is with the placeholder image showing, so it’d be worth adding an additional identifier such as the Office365Users’ Display Name underneath the photo too. This can easily be done with the Office365Users Connector with the following code, but I haven’t shown it in this example as I was working with real data.

Office365Users.UserProfileV2(ThisItem.userId).displayName

References

Microsoft Learn | Error, IfError, IsError, IsBlankOrError functions in Power Apps