Reduce Columns Created in a Collection in Canvas Apps

One of the first lessons when getting to grips with Canvas Apps was that you should always use Collections where possible to reduce the number of calls to the original data source, and with any luck, you may see a performance increase as a result too. However, I often find that the data source I’m using always collects a number of columns that I am never going to use in the Canvas App itself.

Let’s take the example of listing Account records from Dataverse using a simple Power Fx statement:

ClearCollect(ListOfAccounts, Accounts);

As you can see below, there are a significant number of columns that I don’t plan to use relating to various relationships across the Dataverse database.

A screenshot showing a Collection in Canvas Apps returning all fields from the data source.

These columns are extremely important for the database and we shouldn’t underestimate their criticality, but these are not necessarily important for me when building a Canvas App as I just want to retrieve the Account Name and the Account ID.

We can make a small change to the original Power Fx statement, by expressing exactly which columns to use, such as:

ClearCollect(ListOfAccounts, ShowColumns(Accounts, "name", "accountid"));

Which in turn produces a Collection that is much more refined, shown below.

A screenshot showing a Collection in Canvas Apps returning a more defined list of columns based on my needs for the app.
This won’t necessarily make a difference to the code that you write within your app, other than the collection’s size itself, however, when you start to write Power Fx within your components you’ll see a much shorter and more defined list of available attributes when trying to retrieve data from your collection!

How to convert UTC into Your Local Timezone in Canvas Apps

One of the technical challenges we have in the UK is that for half of the year we are in the UTC time zone that we’re all familiar with, and the other half we’re in British Summer Time (BST). Those lucky few that keep the same time zone all year don’t know how easy they have it!

It can be quite confusing, as some digital solutions (including Dynamics 365) host UTC and our local time as separate time zones but call both UTC, but others don’t always make this distinction, and you may have seen data that you just submitted appear with a date stamp of ‘1 hour ago’. This is easily done if you’re non-technical. Why would you ever consider having to change your time zone if you can already see ‘UTC’ in the dropdown?

This doesn’t have a major material impact until you’re working with date values without times, particularly if the solution you’re using only allows you to control the date entry from the front end, and not the time entry. The difficulty we face in this scenario is that an application could even show yesterday’s date!

Yesterday’s date? Are you sure?

Well submitting data at 2pm during your workday doesn’t cause too much of an issue, you might see data entry from 1pm instead. But what if you submit a ‘date only’ value, or, (hopefully you’re not working at this time) but at some time between 00:00 and 00:59?! In this instance, the application can often confuse the user and present the data back as yesterday’s date instead!

How do I prevent this?

Fortunately we don’t have any problems submitting data as these will always be submitted in UTC and convert appropriately.

The issue we face occurs when we are trying to retrieve data from a data source, where (for example) the database stores the date as 30/07/22 00:00:00, but our Canvas App reads this from the data source as 29/07/22 23:00:00 due to the database storing our submitted date in UTC.

I discovered this when using the Outlook Tasks Connector to pull in today’s To Do items into a Collection, rather than using the Today() function to compare dates.

Check out the example below:

DateAdd(DateTimeValue(DueDateTime.DateTime),-TimeZoneOffset(),Minutes)) = Today()

“Add the negative of my local timezone offset in minutes to the local date, and then show me all of the To Do Items where the DueDateTime.DateTime value is equal to the newly calculated date.”

Note: For this particular connector I needed to explicitly specify DateTimeValue as the format, but you don’t need to do this for all Connectors.

That’s all. Fortunately Power Fx allows us to grab the time zone offset for the time zone I am currently in, but we must be aware that this value is a negative, and therefore we need to negate the negative in order to add the correct number of minutes. I’ll be using this in every Canvas App I build now, particularly as I work in an organisation that spans multiple time zones!

Modify An Owner’s Connection References in Power Automate

No matter how amazing an organisation may be, unfortunately there will always be the possibility of someone leaving the organisation. When it comes to Power Automate, this means that you can be stuck with the original Owner of the Cloud Flow having left the organisation, where Connection References eventually error, and lead to an automated process failing which may be critical to business systems.

Referenced Forever?!

At present, there is no way for you to delete the original Owner of a Cloud Flow even if you manage to establish yourself as a Co-Owner. Connection References cannot necessarily be deleted either!

Workaround

In this example I’ll use the Centre of Excellence Starter Kit environment that I inherited from a previous colleague, and for demo purposes I’m going to modify the Dataverse Legacy Connector as it is currently in the correct state to demo.

Let’s make our Connection References valid, and eventually fix the Cloud Flow by following the below steps for each Connection Reference:

A screenshot of a Power Platform environment, looking at Connection References within the Default Solution.
Your screen should look similar to the above screenshot at this stage.
  • Open the Connection Reference that you wish to modify. Hint: Filter by Owner to get to your reference quickly if you have many to search through.
  • Click on Edit.
  • Select the Dropdown with the existing Connection and re-point it to an existing valid Connection or create a new one.
  • Repeat those same steps for every invalid Connection Reference.

But Wait!…

Now there are some caveats to this approach which you should consider during this process:

  1. This does not remove the Owner from the flow, but it stops the Owner’s account from being used as a Connection Reference when using a data source in your Cloud flow.
  2. In my instructions I asked you to navigate to the Default Solution. For the consultants among us, with great power comes great responsibility. Be careful here, and use the original Unmanaged solution if you can. In most circumstances, you will be presented with Managed solutions and will be forced to use the Default solution.
  3. To ensure that you can see the full scope of your solution and automations, you ideally need to be a System Administrator to complete this exercise.

What is Microsoft’s Accessibility Insights for Web?

One of my favourite things about consulting in Power Apps Portals is that I am able to step back in to the world of traditional web development temporarily, and I get to explore a whole host of tools to improve our solution.

Visual improvement tools are cool, but helping ourselves reach a wider audience whilst simultaneously improving inclusivity is even better! This is where Microsoft’s Accessibility Insights for Web tool comes in to play.

The tool can be used for any website, but in this blog post I’ll use a Power Apps Portal as an example.

Context

Accessibility in digital services is all about providing alternative navigational aids and component references for those with impairments, and they can be elements that could be visible or hidden to all users. A couple of examples include:

  • Ensuring that the colour contrast between background colour and text that sits on top is significant enough to be considered easily readable. Using two similar colours may create difficulties for those with colour blindness.
  • Defining Tab Indexes in the website’s code to explain the order of your site’s navigation, so that anyone using a screen reader can access the components (such as a navigation bar with child links) in a logical order.

Regulations came into force in the late 2010s in many parts of the world, and more specifically, in the UK all public sector organisations had to ensure that their website was considered accessible by 23rd September 2018. If this isn’t possible, the organisation needs to provide a suitable alternative.

As many of the largest suppliers of digital services now give you the ability to create your own content, whether that’s social media or the Power Platform, many of the tech giants have created tools to empower you to make your content accessible, as it would be impossible for the tech giants themselves to automatically make every single piece of digital content meet these standards.

Getting Results Quickly Using FastPass

To get started, you don’t need a Microsoft account or even need a log in for your website. This tool can be run against any website to measure the closeness to common accessibility standards, or lack of. The tool is installed as a browser extension and is available for most modern browsers here.

To run the tool, simply click the following icon within your browser’s navigation bar:

Accessibility Insights for Web icon that is visible in your browser's navigation bar. A blue heart with a white search icon.

The browser window will give you several options which are self-explanatory, but to get reasonable results fast, the ‘FastPass’ option works well enough straight away.

A notification will pop up alongside the report for automated checks which instantly gives you a visual summary of all of the issues that have been raised.

A screenshot of a web browser showing the Accessibility for Insights Web tool by Microsoft with two different errors.
This particular portal has two errors relating to HTML code.

And there you have it! Within a few minutes you now have a list of potential issues to resolve shown in Step 1, and if you’re unfamiliar with the specific results you receive, there is plenty of information from the report or the web.

A screenshot of the FastPass results, showing two issues on the homepage of the demo website, with visual indicators on the website itself.

If you keep the report open on this page, as you expand your selection in the report, it will highlight on your original web page exactly where the issue is found and it will explain how to fix in order to avoid lengthy researching or development processes for someone that is comfortable editing HTML.

Moving on to Step 2, this provides a way to understand how accessibility tools will behave on our website when using ‘Tab Stops’ to navigate the screen.

A screenshot of the tab index being recorded by the report on my demo website to tell us how a screen reader will navigate the website.
Tab Stops are flowing in a logical order on this website, moving from left to right before shifting down to the next interactive item on the page.

To enable this, you simply press the ‘tab’ key on your website linked to the report and indicators will display for all elements on the page that are included within the ‘Tab Index’, and as this is subjective, the user is expected to decide whether the current order is correct.

Full Assessment

Whilst FastPass is likely to be beneficial for most small websites, for larger audiences or those in the public sector, you may want to consider running a full automated assessment. This is the second option available from your browser’s extension, and returns a significantly larger set of results in trade-off for a slower running time.

A screenshot of the full Assessment feature being run against a website looking at every component for accessibility issues.
Full assessment being run on a website.

Once the report has been completed, you can navigate to any items on the left-hand side of the browser window, focussing on those with an X to identify where issues lie, and once opened, the conventions used for displaying issues and recommendations follows the same path as the FastPass option.

Final Thoughts

Just because accessibility regulations aren’t law for all websites, it doesn’t mean that we shouldn’t consider this within our digital assets. For someone that is comfortable with HTML, running the tool (remember, it’s free!) with the FastPass report and fixing two issues could take less than one hour to change your homepage, but it could open up your site’s usability to a whole host of new audience members, not only increasing reach, but improving the perception of your services or product for those that need accessibility features everywhere.

When you’re next on social media or working with a website that you or your organisation owns, take a look at the accessibility features and you might open up a world of seemingly hidden features to make the digital experience better for all!

Microsoft’s Accessibility Insights for Web

Useful Guidance & Tools for Digital Accessibility

Colour Hex

How To Enable ModelDrivenFormIntegration for Existing Canvas Apps

Earlier this week I found myself trying to embed an existing Canvas app into a Model-Driven app to better present information relating to the record using the flexible UI controls, but as an infrequent user of such a feature, I struggled to understand how I could reference the current Model-Driven app record’s data within the Canvas app!

All over the web I could find resources pointing towards a special type of control called ModelDrivenFormIntegration and how it works, but I simply couldn’t see it within my solution. This is where it should be:

A screenshot of a Canvas app, highlighting the ModelDrivenFormIntegration control that appears after embedding within a Model-Driven app.

The new Power Platform interface has improved so many of the existing controls and added fantastic new features, but unfortunately at the time of writing, embedding a Canvas app via the new user interface needs a little more work, and it doesn’t quite complete the job in all circumstances. There are two reasons for this:

  1. You have to associate the control with a field on the Form, and when adding the Canvas app via the new User Interface, it doesn’t configure the field control automatically leading to errors when loading.
  2. The functionality available via the ‘Customize’ button is not available in the new User Interface, which is partly the reason for this blog post!

As some of you will be aware, sometimes it’s just better to head over to the classic user interface to complete your configuration, and although I’m finding myself using this user interface less these days. In this post I attempt to bridge the gap and I’ll explain how to get things working.

What is ModelDrivenFormIntegration?

As Microsoft have explained in detail here, this control allows us to bring contextual data from the Model-Driven app that the Canvas app is utilised in.

There are a significant number of benefits to doing this, primarily because it provides you with the ability to dynamically change your Canvas app content based upon the record you’re currently viewing in the Model-Driven app.

Enable ModelDrivenFormIntegration

Step 1: From https://make.powerapps.com, navigate to the correct environment and choose the relevant Table’s Form within your solution file. Use the ‘Switch to Classic‘ button from the navigation bar straight away.

A screenshot of a Dataverse Table's Form, highlighting the 'Switch To Classic' button.

Step 2: Navigate to the required field you’ve configured for your Canvas app control and double click. You’ll notice a pop up window which provides the ability to navigate to the Canvas app control configuration. Click on ‘Controls‘ and press the ‘Customize‘ button.

A screenshot of the classic user interface that was inherited from Dynamics CRM, showing the Properties of a Mandatory field on the Controls tab, highlighting the 'Customize' button.

Step 3: Your Canvas app will now open, and you’ll notice that ModelDrivenFormIntegration is now available as the first control on the list for the first time! We’re not done yet though, we need to tell the control which Table we are using within the Model-Driven app by editing the ‘DataSource‘ Property.

A screenshot of a Canvas app, highlighting the ModelDrivenFormIntegration control's Property called 'DataSource'.

And finally the ‘OnDataRefresh‘ Property.

A screenshot of a Canvas app, highlighting the ModelDrivenFormIntegration control's Property called 'OnDataRefresh'.

We can use the plural label/friendly name of the Table here, instead of having to look up the logical name, which is a great touch in a lot of Power FX’s abilities.

Conclusion

And we’re done!

The configuration for this isn’t difficult, but finding out why the issue exists can often be challenging, especially if you’re an infrequent user of this functionality.

Remember to ‘Save‘ and ‘Publish‘ your Canvas app changes when you’re ready, but you don’t need to publish your Model-Driven app as this was simply a route into enabling the functionality with no configuration changes.

There are a few pointers to be aware of when generally configuring embedding Canvas Apps:

  1. Microsoft advise that associating your embedded Canvas app control is tied to a mandatory field, so that you can guarantee the operation of the Canvas app.
  2. Remember to share your Canvas app or make other users Co-Owners as appropriate before releasing the functionality to end users.
  3. The classic user interface is due to be deprecated in an upcoming release nearer the end of the year. I suspect this feature will still work for a short period of time, but we will have to watch and wait until such a time, and I’ll update this post if/when this happens.

Power Apps ModelDrivenFormIntegration Control

Embedded Canvas App Guidelines & Troubleshooting