Thursday, November 8, 2018

I created my first PowerApp! It's a Conference Badge Scanner!

By Steve Endow

I love attending conferences.  They are a rare opportunity to meet the faces behind the emails and voices and spend time with friends that you only get to see once or twice a year.

At the GPUG Summit 2018 conference in Phoenix last month, I had a great time, but there was one thing that I noticed was really frustrating me.

After a session, attendees would have questions or need assistance with a Dynamics GP issue, and I would promise to email them some information.  Sometimes I would hand them one of my business cards, sometimes they would hand me theirs.  If we had a pen handy, one of us would scribble something on the card to remind us what we talked about and prompt a follow up email.

Unfortunately, I have plenty of evidence that this process just doesn't work well.  Everyone is running around to different sessions at the conference, there are tons of distractions, we run out of business cards, the cards get stuffed into a backpack, and by the time we get home from the conference, exhausted, the last thing we want to do is sift through a pile of business cards with cryptic notes on them and try to remember what we were supposed to do, who we were supposed to contact, and which conversation went with which business card.

At the Summit conference, there were a lot of sessions on PowerApps and Flow, so I started thinking...

And I tweeted:


I had never used PowerApps and had never created a PowerApp before, so I didn't know if this was possible, and if it was possible, how difficult it would be.

Turns out, it is definitely possible.  And although it was a little more challenging than I thought, now that I've done it, relative to other things I've done, it's not that difficult.  And considering what the app can do, it's amazing how easy it is to build.

And here it is--my very own PowerApps Conference Badge Scanner!


So what do we have here?

In the upper left is the live view of the cell phone camera. When the app is open on my phone, I can take a photo of a conference attendee's badge.



In the upper right is a photo of the badge.  Because conference badges can have lots of other noisy text besides the attendee name, I found that it is best if I take a photo of just the text that I want scanned.


In order to get the best photo, I turned my phone sideways so that I could fill the image with the text I was interested in.  This makes the OCR and subsequent data parsing process much easier.

Once I have captured a good image, I tap the OCR button.  That PowerApps button then triggers a Microsoft Flow.


The integration of PowerApps with Flow is very impressive.  Flow understands how to work with PowerApps, and once you figure out the quirks of how the two work together, it is surprisingly easy to call a Flow from a PowerApp.

So in this example, PowerApp sends my attendee badge photo to Flow, and I use a Data Compose action to convert the camera image to Binary format.  It then sends the image to the Azure Computer Vision API, which performs OCR and returns the text that it found in the image.  Flow then takes that text and sends it back to PowerApps.

Fellow MVP Mariano Gomez created a similar PowerApp using Computer Vision, and has some information in his blog post about how to setup that feature in Azure.  It is remarkably easy--just a few clicks in Azure to turn the feature on.


As you can see, the OCR step in Flow submitted the image/jpeg content and received the text from my conference badge.  My name, company, and city were accurately detected from the sideways image that I took on my phone.  This is one area where I was lucky.  Conference badges are usually neatly printed, in relatively large text, with clear areas for the attendee information.  Mariano's project to scan expense receipts was much more difficult, as the text on receipts is often poor quality and the layout is far more complex than a conference badge.  So my Conference Badge Scanner seems to be a perfect, simple, use of these PowerApps, Flow, and Azure Computer Vision technologies.

The OCR Flow runs very quickly, returning the scanned text in a second or two.


Once Flow sends the OCR text back to PowerApps, I drop it into a multi-line text box.  Because conferences badges have different layouts, I didn't want to hard-code my app to assume that line 1 is First Name, or Full Name, etc.

By dropping the scanned text into the text box, it lets me review the results and also manually edit the results.  Notice that in the badge image, my first name is STEVE.  Before parsing the values, I simply tapped in the text box and manually corrected my name to be Steve.

Once that review and editing of the text is complete, I setup Combo Boxes that allow me to select the text value that I want to assign to each field.  I click on the First Name drop down and select Steve.  Then Last name drop down and select Endow.  Then I select the Company.  This should let me use this app to work with different conference badge formats.

Once I've identified the three main fields, I have fields to manually enter the attendee's email address and phone number.  And I will also try to fit an additional Note field so that I can record any specific requests or discussions I had with the attendee at the conference.

Once my data looks good, I tap the Save button.  That triggers a second Microsoft Flow.


PowerApps sends the clean parsed field values to Flow, which then creates a new Outlook contact for me.  It fills in first name, last name, company, email, and phone number.  And it also fills in the Department field, which I'm using to store a category, indicating which conference I was attending when I created the contact.


Back in PowerApps, the Save button simply calls the Flow and passes in the field values as parameters.  Super simple.

Once the values are submitted to the Flow, the fields are cleared using the Reset function, and I can scan the next badge.

In Outlook, my new contact gets created immediately.



I can enhance the Flow by also sending myself an email, reminding me to follow up with the attendee after the conference.  And when I get home after the conference, I can view all of the new contacts that have been tagged with the conference name that I defined in the PowerApp.

For my first PowerApp, I'm pretty impressed.  It was probably a bit ambitious for a first App, and I had to do quite of bit of research and learning to put it all together, but it was a great, practical project for me.

Note that this entire project did not require a single line of code.  Not one.

It required the use of the Split function, and one function to convert the camera image to Binary, but that's as technically complex as it got.

With that said, this project was challenging because of the learning curve around PowerApps and Flow.  Both products have a very different design philosophy and UI, so they are unlike any other development tools that I've used.  And because they are generally zero code tools, it often requires quite a bit of creativity and clever workarounds to do things that I would normally do with a few simple lines of code.

But now that I'm getting a feel for their quirks, I'm really liking both tools.

And best of all, I now have a Conference Badge Scanner app that I can use at the next conference I attend!



You can also find him on Twitter, YouTube, and Google+




No comments:

Post a Comment

All comments must be reviewed and approved before being published. Your comment will not appear immediately.

I created my first PowerApp! It's a Conference Badge Scanner!

By Steve Endow I love attending conferences.  They are a rare opportunity to meet the faces behind the emails and voices and spend time wi...