Creating A Low Code App Using PowerApps & The Power Platform

Published 06/07/22 under:

Step By Step Low Code/No-Code App Building

Demonstrating the building of a low-code/no-code Microsoft PowerApp with text recognition, using Azure Cognitive Services

 

The Kerv Digital team recently attended an all-day Microsoft Hackathon to demonstrate how easy it is to use the Microsoft Stack, Power Apps and the Power Platform to create low code/no code apps.

The various teams involved weren’t given a brief till first thing in the morning (so there was absolutely no prep time) with just four hours to design and create a solution.

For those of you who have never attended a Hackathon hosted by Microsoft before, these briefs typically take the form of a business scenario or problem to solve… You then go away and as a team come back with your finished solution, built using the Microsoft Stack, and present it to the other 70/80 attendees, all who have done the same thing, and then (the fun bit) have your solution judged.

 

The brief on the day was to create an app that could be useful during a COVID-19 world.

Our intrepid Kerv Digital team decided to build an app that would help getting people their cars and their rubbish whilst in lockdown into and out of recycling centres.

They chose this as the scenario had actually happened to one of the team recently who’d (believe it or not) had to use a re-purposed theatre booking system to book a time slot at his local tip, then, on arrival, the staff were waiting with big clipboards and reams of paper/license plate numbers to check people in and out.

Not an ideal situation we’re sure you’d agree!

 

In traditional Kerv Digital fashion they rolled up their sleeves and decided to fix that problem… in under four hours!

The Hackathon was on!

 

Their chosen solution was a website (Power Apps Portal) within the Microsoft Power App Platform that an end user could access to book a time slot at a recycling centre.

Their data would then be stored in the Common Data Service (more on that in a minute) but the main thrust of the solution on the day was automatic text recognition for the staff checking in cars.

The app would allow staff at the recycling centre to take a photo of a car coming in and automatically check if that person had a booking and if so, what time they were booked in for.

 

The first thing they did was to head to make.powerapps.com where they created a demo environment.

The great thing with PowerApps is that you can just go on to the Microsoft Dynamics trial section and say… “I’d like to play around with Dynamics and the Power Platform please” and it’ll create you a temporary area for you to play in that’s free for the first thirty days.

 

The first step was to head to entities and, as you can see below, select bookings.

 

 

From there, the team guessed a few details that would be helpful to know about someone visiting a recycling centre (or tip if you prefer).

 

 

At this point (just in case any existing or potential clients are reading this) we should point out that Kerv Digital aren’t in the habit of guessing anything and if this was a real project we’d have conducted a lot of research into your organisation, with our Business Architects and Solution Architects building out both staff and customer personas for how the app would be used… but the team only had four hours so we’ll give them a bit of a break!

Our Power App Pro builders. As they’d been trained to do, first defined the problem (managing queues in and out of recycling centres), before building user personas and designing a solution with a clearly defined outcome of what the app should achieve as an end result.

 

Once the fields they wanted to capture had been structured (and adding new fields was literally just a case of clicking the add button, typing the field name and pressing save) they just need to head to the Apps tab (shown below) and start building.

 

 

As mentioned, all the data was to be held in the Common Data Service so once they’d done that it would automatically start to build a default app with loads of options for customisation.

 

 

Once you click connect (bottom right in the image above) PowerApps will head off to read the entity and create a mini app that should allow you to view records within that entity, edit them and add new ones.

 

 

Back in the bad ol’ days of yore (and depending on the sector you’re in) this could have taken a developer anywhere from a day or so to six months but with the Microsoft’s PowerApps Studio and a bit of Kerv Digital know-how you can see the team accomplished the same result in minutes.

Customising and then integrating the app into specific business processes  is a more complicated matter and will likely require a Power Apps Pro builders expertise but as you can see, the basics aren’t insurmountable for anyone with access to the Microsoft Power Platform.

 

 

From here you can see Power Apps has gone away and created three screens.

A browse screen in the middle with a list of all the bookings…

 

 

A detail screen with an expanded view displaying more information about each booking

 

 

And an edit screen that would allow you to amend any booking details you might wish too.

 

At this point not one line of code has been written for this app.

It took about four/five minutes from having no app to having a perfectly functioning data capturing app and that’s the power of the Power Platform and Power Apps itself!

 

So far, the above is the basic framework you’d need to get an app up and running. We’re now going to demonstrate how easy it is to expand it out.

 

The first screen we’ll add is a bit of a blank screen for when an end user first opens the app.

To do that’s it’s as simple as clicking new screen (you’ll note we’ve still not had to write any code)

 

 

And choosing the kind of screen we want

 

 

We take this blank screen and move it to the very ‘top’ of the application

 

 

As we’ll want this to be the very first thing users see when they open it up on their phones.

From here we can add image both images, texts and functioning buttons.

 

 

 

(Still no real coding!)

These buttons will give the staff at the recycle centre the option to view bookings or book people in.

Now, making these buttons ‘do something’ is actually incredibly easy.

All you need to do is select the button you want to work on and head over to advanced settings.

 

 

If you choose the onselect box, which means when the user ‘does’ something with the button (i.e. presses it) you can describe what you want to happen.

In this case we want them to navigate somewhere (one of the many pre-built options within the Power Apps toolkit).

 

 

Power Apps will then very helpfully list all the screens you’ve previously built for you to select which one you wish the button to navigate to (if you’re feeling fancy you can even add in a pre-built transition fade).

Right… now let’s get on to the fun bits…

 

 

Rather than manually typing in the number plate you can head to media and select the camera option.

 

 

On a mobile this automatically defaults to your device’s camera, and it’ll do the same thing if you’re on a tablet or laptop.

Once that image is taken by the app it can be saved in a database or sent off to another API or service. Power Apps had always been able to do that though.

What’s really new and cool is this bit here called AI Builder…

 

 

Power Apps being Power Apps there’s then lot’s you can do within this section with the analytics like:

 

• Business card reader
• Form Processor
• Object detector
• Text recogniser

 

 

As we all know there’s loads of things within Microsoft Azure around Cognitive Services that will try and learn or recognise things for you and many of those have started to be added into the Power Apps framework.

The one we used for this app was text recogniser…

 

 

This camera option, like the last, will automatically default to your devices standard camera or you can just choose to upload an image.