Easily Create a Business Card Scanner using Microsoft Power Apps and Save to SharePoint

Harshani Perera, 01 April 2020

With Microsoft’s new AI Builder, it’s very easy to add intelligence into your business applications without writing any code. At the time of writing this, the AI Builder is only available for USA and Europe environments and is currently in Preview.

The Business Card Reader component in AI Builder can read business cards by simply taking a picture of the card. The Business Card Reader will extract the information on the business card e.g. name, phone number, email etc. and save this in CRM or SharePoint.

In this blog, I will show you how to use the Business Card Reader component to create an App that will scan business cards and save the data to SharePoint.

Step 1: Go to https://make.powerapps.com and login with your account.

(If you don’t have a Microsoft account, you can create a Microsoft Dynamics 365 Trial version by going to https://trials.dynamics.com/)

Step 2: Once you are in Power Apps, on the left pane under Apps, click + Create and select Canvas app from blank to create an App.

Step 3: Click Insert > AI Builder (preview) > select Business card reader

Step 4: You can adjust the size of the Business Card Scanner to fit the screen.

Alternatively, you could add the Business Card Reader straight away from Power Apps by selecting the AI Builder on the left pane > Select Build > Click on Business Card Reader. This will automatically add the Business Card Reader to the app like Step 4.

Step 5: You can now place fields you would like to extract from the business card to be saved. In this demo, I will extract the name, email and phone number.

Go to Insert > Click Label > Type the name of the fields inside the box e.g. Name, Email, Phone

Now Insert Text Input boxes for the data.

Go to Insert > Text > Select Text input

Step 6: In order to extract the data, you will need to enter the following formulas for each of the Text input boxes.

Name

Select the Text input box under Name and enter BusinessCardReader1.FullName. This will extract the full name from the business card.

Email

Select the Text input box under Email and enter BusinessCardReader1.Email. This will extract the Email from the business card.

Phone

Select the Text input box under Phone and enter BusinessCardReader1.BusinessPhone. This will extract the Phone from the business card. You can also select MobilePhone as well.

Step 7: Now let’s test our Power App by scanning a Business Card.

I will use the following Test Business Card.

Click the Play Button on the right-hand side to open the App in Web Browser.

Click Scan business card and upload a business card from your computer. We are uploading a business card from the computer for testing on the browser however once the app is published, you can use your phone camera to take a picture of the business card instead of uploading a card from your computer.

As you can see, the AI Business Card Reader has extracted the name, email and telephone number from the Business Card.

Step 8: Now I will show you how we can transfer this extracted information and save it in SharePoint.

Following is my SharePoint list which I will use to connect my Business Card Reader App.

Connect the App to SharePoint

Firstly, connect your App with SharePoint by going to View > Click Data sources

Search for ‘SharePoint’ > Select the connection

The following flyout will be displayed on the right. Enter the SharePoint URL of the location of the list.

For example, the SharePoint URL where my list is located is: https://powerapps12345.sharepoint.com/sites/PowerApp/

i.e. Select everything before Lists https://powerapps12345.sharepoint.com/sites/PowerApp/Lists/Contacts/AllItems.aspx

Click Connect

Select the List > Click Connect

How to Save data to SharePoint

Go back to the Edit mode in PowerApps and Insert a button onto the Screen. Go to Insert > Click Button.

You can move the button to the bottom of the screen and rename it ‘Save’.

Select the ‘Save’ Button and you can use the Patch function to save the Data in SharePoint. Following is the formula I used.

Contacts is the name of my SharePoint list. You will need to update this to the name of your SharePoint list.

I also renamed the Textboxes and Labels to make them more meaningful otherwise they will be displayed as TextInput1, TextInput2 etc. You will need to select the relevant field names for your App.

Name, Email and Phone are the column names on my SharePoint list. You will need to enter the names of your SharePoint Columns.

Step 9: Test the Business Card Reader App

Now let’s test our App by scanning a business card to see if it saves the extracted data on SharePoint.

Scan a business card and click Save.

As you can see, the information has been saved in SharePoint.

Step 10: As the App is working now, you can publish it by going to File > Save > Publish.

You can use the App on your Mobile Phone or Tablet to take a picture of the Business Card and instantly upload the information onto SharePoint.