Do you know there are 74 built in components in canvas Power Apps (I counted icons as one not each one), and that's before we import custom PCF components. And I wonder how many do you use, let me take a guess that in 90% of apps you only use the below 10 (modern or classic):

  • label
  • button
  • input
  • combobox
  • datepicker
  • vertical gallery
  • image
  • icon
  • form
  • container

If you read this in a year we all know Copilot will be on the list too

So I wanted to talk about 6 really cool components you should be using more often.

Call out Im cheating, some are single components, some are groups, so it's not really 6 😎

  • HTML
  • Timer
  • Charts
  • Map
  • Add Picture
  • Import/Export

The first 2 (HTML and Timer) are probably used more then the rest, so if you have already used them feel free to skip them, but even if you use them I still suspect you are under using them.

Further reading - MS Learn all components

HTML

HTML is what it says on the box, it allows you to create HTML and render it on your app. What is really cool is it allows custom CSS and dynamic content.

CSS (Custom Style Sheets) is the way websites get style (colour, positioning, size, animations, and more). We can't do style sheets, but can do inline.

inline css

Dynamic content can be included by simply reverencing variables, what is particularly useful is concat() that will process the full collections/array into HTML.

html table

Also as HTML is easy to handle, you can pass the created HTML to a flow that then saves the HTML file or even better converts to a PDF.

Timer

The Timer shouldn't be thought of as a simple timer, but the way to add pro-code functionality to your app.

If you want background functionality, like polling, then Timer is what you need.

Set the duration to a second, on repeat and auto start and now you have a compute cycle that can check for conditions and run code.

timer code

The above code was for a game I made (Bop It), the timer was used to validate if the level had been passed or game over.

There are loads of other examples, I used a Timer in this blog, to check to see if a background file had been processed in a cloud flow.

You can also do proper loops with Timers (as the ForAll Power FX is very limited), again a previous blog goes into detail how you can use Timer as a way to do real loops, FizzBuzz, Quick Comparison of Power FX & JavaScript

Charts

There are 3 Charts to choose from (excluding the Power BI one which I don't like anyway).

charts

They are all similar do will just talk about one, and that's the classic Pie Chart 😎

Charts are actually a group of 3 components:

  • Label
  • Chart
  • Legend

Along with the file upload hidden in forms that's another secret component

The Legend on its own is pretty cool, and I use it for simple lists (it has a nice auto wrap and auto scroll bar feature).

legend

Both the Chart and Legend have a collection for the input data and the colours, so its really easy to use and pretty light weight.

Simply set the collection as the items, and create a collection of colours in the itemColorset.

chart
I see so many apps with just tables of data, and adding a simple chart can add that row factor.

Map

This is one of my favourite components, super simple to use and very powerful. There is no longer a need for Bing API key, its fully out of the box (though does require premium license).

map

You simply have a collection with Longitude and Latitude (or even with address in the US) and can plot upto 500 markers. You can also:

  • Set custom colours for markers
  • Different Map types
  • Routes
  • Have info cards
  • Draw Shapes

and more, its easy on par with Google Maps, and that is high praise.

Add Image

A quick one but one I wanted to call out, I see the Camera component used all the time, but I always recommend the Add Image instead. It has best of both worlds, as on most mobile devices it offers the camera or the gallery, and it works well on laptops etc.

add image

It also has the benefit of including the image component (never realised how often a component is actually a group of other components, first Charts and now Add Image).

Anyway it may not be as sexy as Maps and Charts, but it is super useful and I would always instead of a camera component.

Import/Export

import and export

The Import and Export is pretty simple but also a really useful feature for enterprises. In a nutshell it allows you to export a collection of data and import it back in. It only works on mobile devices, which is a shame but still covers most use cases.

You have HHTs and you want a way to backup data or simple transfer. You can use connections and databases, but having a way to save locally is ideal for those niche cases.

The Data for export is your collection, and then on the import you use the OnSelect and set the Import.data to a collection.

The actual file export is a zip file with 3 json files:

json files

With only the data.json doing much, so it's super easy to make your own exports and import data into your app.

json contents

And there you have it, my top 6, well actually there was 3 not 1 Chart, plus the Legend, and Import as well as Export, so that's 6+2+1+1, so maybe its my top 10 😎

If you would like to get notified every new blog (I also do a few in the Power Platform Community), subscribe below

Subscribe to David Wyatts Blogs

favicon powerdevbox.com