Business Card is a very important thing that you can need anytime. If you need something in emergency, it will be very difficult for you to search for the cards according to your need. If you didn’t find it in right time or you found it later the work done, there will be no value after it. So, in this modern age business card is very important thing for a person to connect with anyone anytime but what happens when you lost the paper cards. Don’t worry I have a solution for that.
In this Scenario, I’m discussing about the digital Business Cards Scanner where you can just scan and store your data in the cloud and use whenever you need it. You can access it anywhere, anytime whenever you need it.
For creating this, I divided these whole Process into these three steps-
1. Creating connection in PowerApps (including Azure Cognitive Service)
2. Creating Canvas app.
3. Creating Flow to convert pictures to image (OCR to TEXT) and set up with the canvas app.
- Creating connection (including Azure Cognitive Service)
In this step, I’m going to show you how to create Azure Cognitive Service. First, you need to sign up for a free Azure trial account by going Microsoft Cloud Computing website , it will take your debit card details and may be charged you Rs. 2 for human verification.
After successfully creating Microsoft Azure Instance log in to https://portal.azure.com/ with your credential. It will look like the below picture.
Search “Cognitive Service” in the upper search box and click the result below. You will get an “Add” option in the top left corner below “Cognitive Services” heading or, you can click on the middle of the page where “ Create Cognitive Services” is written. See the picture below
After clicking Add button a marketplace of AI + Machine Learning will open. In this marketplace screen search for Computer Vision, click on the result below and Click Create.
A form will open, here enter name “BusinessCardScanner”, subscription will be auto selected to Free, thereafter select the nearest Location to your country, in this case I’m going to select “East Asia” which is near to me. After that select the Pricing tier to “S1 (10 Calls per second)”, in Resource Group click create new and enter “BusinessCardScanner” click ok. Your form will look like this.
After doing all process correctly click Create button below to Create the Computer Vision, it will take some time to deploy the service you can check in the top notification panel.
After successfully creation, it will automatically ask you to redirect to the next page where you find “Go to Resource” button so Click on that, it will redirect you to the created Computer vision resource.
Now you will find an tab option “Overview”, click on that tab, this tab contains all the details about our Computer Vision Resource that will help us to connect with PowerApps. For connecting to PowerApps we need the Endpoint URL and the Access Keys. See the picture below.
In this above picture, the red line shows the endpoint URL and blue line shows the access keys, by clicking here you will get two keys, but you only need one of them.
So, we build our Azure Cognitive Service Connection. Now its time to link it with PowerApps. Go to https://make.powerapps.com and login with your PowerApps credential, then go to Data > Connection > New Connection and search Computer Vision, you will get result “Computer Vision API(Preview)” select that and here you need to enter Account Key and site URL. Copy Endpoint URL from Azure and paste it to Site URL box. Same for the Account Key, copy one of the Access Key from Azure and past it to Account Key and click Create.
This is how we successfully created a Computer Vision Connection using Azure and linked with PowerApps for further usage.
- Creating Canvas App
In this step we are going to create the business scanner canvas app which is the main important part of the app because every dependency work from here like flow. This step is divided into four screens so I’m going to explain you guys one by one screen in each task.
Task- 1 Creating the main screen of our Canvas App.
First, log in to https://make.powerapps.com and select Canvas App from Blank and enter name “Business Card Scanner”. In this task our goal is to make our main screen looks like the picture below.
First, insert a label and place it in the top of the app so it looks like a header and name it. There after insert a label for Name and Contact Details just above the Full name and twitter handle respectively.
After that we need to add a text input control and an add button for our required details, but its not a hard task because we are going to add a button and text input control and then we copy and past it for other details. Some short things like Hint Text and the label & button name. But every Add button’s OnSelect Function will be different.
*Note: The mode of the resident address Text Input will be Multiline
So, insert label and button & enter the hint text for text input’s just like the above picture. After doing this, rename each text input and button as our function requires this and for your better understanding it is very important.
Name
For Full Name : Text Input = FullNameTextInput1
Add Button = FullNameBtn
For Company Name: Text Input = CompanyNameTextInput1_1
Add Button = CompanyNameBtn_1
For resident Address: Text Input = AddressTextInput1_1
Add Button = AddressBtn_1
Contact
For Twitter: Text Input = TwitterTextInput1_3
Add Button = twitterBtn_3
For Phone: Text Input = PhoneTextInput1_2
Add button = PhoneBtn_2
For Email: Text Input = EmailTextInput1_1
Add Button = EmailBtn_1
After renaming, add a Submit button and a Scan button also insert a Camera icon over it. In the third step when we will build our flow then we configure all buttons function, so be patient.
Add a vertical gallery and place it below the Scan button resize it same as Scan button. Change the layout to Title only and delete the Next( >) button and insert Checkbox Control from Controls like the above picture.
Add a hamburger icon on the top left corner and adjust it to the middle of the Header label.
Task-2 Creating the Scan Screen
Add a new blank screen from the upper menu & rename “ScanScreen” and insert camera control from Insert > Media > Camera.
Fit the camera to full screen just like the below picture. Also change the stream rate of Camera control to 100.
After that insert a button and change its fill property to None[ RGBA(0,0,0,0)] so that it won’t display over the camera while taking pictures and set the Text property of the button to “Tap anywhere to click” just like the above picture.
After doing this add a cancel icon in the bottom right of the app and set its OnSelect Function to Navigation(MainScreen, Fade) so that if user want to cancel the scan he can tap this icon to cancel.
Task – 3 Creating the effect of pressing the hamburger icon on the main screen or Sidebar Menu
Insert a new screen & rename it HamburgerMenu. This is basically not a screen and it is like a side menu opens when user will press the hamburger menu icon on the Main Screen. So we have to make it like nothing changed when user pressed the icon and all the text inputs looks as it was. Check out the below pic to make sure you understand it better.
For doing this we just copy all the things from the main Screen and past it to hamburger menu Screen. And add two rectangles and place it over the all text inputs and gallery just like the above picture. Change the Fill property of the right Rectangle to RGBA(153, 153, 153, 0.75373134) also set the OnSelect property Navigate(MainScreen, Fade) so that if user touches the right shaded rectangle it will hide the left option just like our mobile apps.
After that add a label in the top of the left rectangle and set the Text property of the label to “Menu”. Add a cancel icon beside the label like the above picture and set its OnSelect property Navigate(MainScreen, Fade), this will hide the left menu.
thereafter, add a button below the menu label to navigate to the saved cards screen which we’ll doing in the next task.
Task – 4 Creating the Saved Cards Screen
For saving the cards, we must add a data source so in this case we are going to store our data in excel sheet.
Create an excel like the below picture and rename each column as shown in this picture.
Also, not forget to rename your table “BusinessCardScanner” otherwise it will default set to Table1. After creating this table save it to OneDrive for business.
Let’s go to our canvas app studio and add a new screen and rename “SavedBusinessCardsScreen”. This screen is very simple but needs some customizations showing the cards. So, after adding the screen insert a header label and name it “Saved Business Cards” and add a Home icon in the top left corner of the app. It will redirect from Saved Cards Screen to the Main Screen. The OnSelect of the Home button will be Navigate(MainScreen, Fade). See the picture below.
Add a vertical gallery then connect its data source to the excel file that we created in the OneDrive and change the gallery layout to Blank.
Insert a rectangle in the gallery and resize the gallery items so that it can only show two items at a time and adjust the Fill colour of the rectangle so that it looks like a card.
After that insert six labels for each of the data that we stored in our data source and place it like the above picture and change the Text property of the labels are as follows:
Full Name Label = ThisItem.Fullname
Company Name = ThisItem.CompanyName [ Change the Style to Italic & bold ]
Email = “Email: “ & ThisItem.Email
Phone = “Phone: “ & ThisItem.Phone
Twitter = “Twitter: “ & ThisItem.Twitter
Save your App. In the next step we are going to create flow and add actions of all buttons.
- Creating Flow to convert pictures to image (OCR to TEXT) and set up with the canvas app.
In this step, we are going to create a flow that will trigger from our PowerApps and Scan the clicked images and convert it to text and then respond back to PowerApps. Also, in this step, we set up all the button’s function and wrap up the app.
Go to https://flow.microsoft.com and before creating a flow make sure that you are in the same environment where you created the app in PowerApps. And you have Azure Cognitive Service linked to your Flow just like you linked in the First step. [Go to (Data > Connection) of the flow to link azure service to flow]
Go to (My Flows > New > Automated-from blank > Skip)
A Flow editor will open, Search PowerApps in the Search box and select PowerApps from below triggers option. It is the trigger that will work from PowerApps when user press that button associated with this flow.
Click (+New step), it will add another search box, triggers and action like before. Search “Compose” and Select Compose from Actions Tab.
Here we put an expression to convert the clicked image taken from upper trigger PowerApps, from URI to Binary. This is very important part of the flow so watch out the steps how I doing?
Step -1 Open the dynamic Content and click the “Ask in PowerApps” Dynamic Content. You’ll see that another dynamic content added automatically “Compose_Input”
Step – 2 Now Click on the expression tab on the Dynamic content. You’ll find an expression input box, type there “dataUriToBinary” and select the same result that came, after that open ” ( “bracket after the expression. It will automatically add another closing bracket “ ) “ like the below picture.
While in the middle of the brackets go to Dynamic Content tab and click the “Compose_inputs” Dynamic content. It will look like the below picture.
The expression will be like: dataUriToBinary(triggerBody()[‘Compose_Inputs’])
Now Click “OK” and the expression will be added in the Inputs of the Compose action. After successfully adding the expression delete the precious Dynamic Content i.e., Compose_inputs and Click Save. Make sure your flow will look like this.
Click +New step Type “ Computer vision” and click the first result Computer Vision API select the Optical Text Recognition(OCR) to Text(Preview) action as shown in the below picture. It will scan for any text on our picture and convert to text.
Select Image Content for the image source. Thereafter select the Dynamic Content “Output” for the image content input.
After converting to text, we need to respond the text back to PowerApps. Select + New Step and search “Respond” and click Respond to PowerApps action. See the below picture.
Select “Add an Output” and select text. Leave the title to be blank and in the value to respond select the Detected Text Dynamic content from the Dynamic Panel shown in the below picture.
Rename the Flow “ScanBusinessCard” from top left corner and Click save to save the Flow. Now we will attach this flow to PowerApps to finish our app.
Go to the canvas app and select Scan Screen > Button1. We will create a collection to store the scanned texts retrieved from flow. Choose its OnSelect function and select the Action tab then select the flow option, A data panel will open Contains the flow that we created in the previous step.
Select the Flow, an expression (ScanBusinessCard.Run) will automatically added. Now, write the function before and after that expression.
ClearCollect(ScannedImages, ScanBusinessCard.Run(camera1.Stream));Navigate(MainScreen, Fade)
Now Go to the main Screen and let’s configure the Add buttons of text inputs. Insert this function on the below button’s OnSelect property.
FullnameBtn –
Set(FullNameTextVar,
(Concatenate(FullNameTextVar, “”, Gallery1.Selected.Title2.Text)))
CompanyNameBtn_1 –
Set(CompanyNameTextVar, (Concatenate(CompanyNameTextVar, “”, Gallery1.Selected.Title2.Text)))
AddressBtn_1 –
Set(PostalAddressTextVar, (Concatenate(PostalAddressTextVar, “”, Gallery1.Selected.Title2.Text)))
twitterBtn_3 –
Set(TwitterTextVar, (Concatenate(TwitterTextVar, “”, Gallery1.Selected.Title2.Text)))
PhoneBtn_2 –
Set(PhoneVarText, (Concatenate(PhoneVarText, “”, Gallery1.Selected.Title2.Text)))
EmailBtn_1 –
Set(EmailTextVar, (Concatenate(EmailTextVar, “”, Gallery1.Selected.Title2.Text)))
All add buttons are configured now it’s time to configure Submit button
Select the Submit Button OnSelect property and enter the following expression.
It will patch the details into our data source and update the saved cards screen. But what happen if some user clicks the submit button without entering any data, our data will be empty, and the saved cards screen will show a blank card. For fix this issue select the OnVisible property of Submit Button and enter the following expression –
OnVisible = If(IsBlank(FullNameTextInput1), false, true)
And that’s the end of this post. Let me know if you have any question or suggestion in the comment below. I’ll see you next time. 😊🙂🙏