Keep the love in your photograph and make them memories for yourself. Don’t let them slip through the pocket of your ripped jeans. Preserve your memories with SharePoint/One-drive. Mirror the following demo and keep your photograph for eternity.
Step 1: Setup the Storage Location
As mentioned above One-Drive and SharePoint both have a Create File action that can be used and are interchangeable. Using the use-case of a receipt up-loader I am going to use SharePoint for this demo. We will just create a simple Library called “Receipts.”
Step 2: Create the Flow
Next, we will create the Flow that will manage the conversion. This Flow will get triggered from the Power Apps and will take a few different arguments needed to store the document.
Create a Flow from blank, and for the trigger use the Power Apps trigger from the Power Apps connector. We will later be able to trigger this within the App as a function call.
The next step is the Compose action that is a part of the “Data Operations” connector. For now, leave the Inputs property blank and we will come back to this in a moment.
The third step is to select the Create File action After asking for both properties, you will see that they become available to use in the tool panel.
Step 3: Base 64 to Binary
Store the image, we need to convert to binary so that the Create File action can store the file. this is where the Base64ToBinary()Workflow function comes in to play.
First in the Expression panel, enter the function and have the cursor within the parenthesis
Then switch to the dynamic content panel and select the FileContent property we asked for earlier. the expression should read: base64ToBinary(triggerBody()['name of file content variable']
Step 4: Finalizing the flow
If you have followed the steps above your Flow should look like the screenshot below. Once it looks good, save, and we are done with the Flow.
Step 5: Build the Power Apps
Now with calling the function from the Powe rApps, we will keep it as simple as possible. Create from a blank template (tablet or mobile is fine) and on the page we will add a camera control. We do not want the user to just automatically load the image without review, so we are going to create a User Experience so that the user can review the image first. To do this, we set the camera control’s OnSelect handler to: ClearCollect(receiptPhoto, Camera1.Photo) ;UpdateContext({receiptTaken:true})
This variable controls the visibility of a second set of objects grouped together to display a copy of the image captured. Once this is true, a few components are used to display the preview.
Step 6: Making a photo preview
Allow the user to review their photo, we are going to insert five components and group them. We will then need to configure their visibility property to be dynamic based on the variable receiptTaken.
Icons > Box – A box to cover the other content to focus the preview panel (think of a shadow behind a modal)
note –
Media > Image – An image component that is set to display the preview image. The image property will be set to: First(receiptPhoto).Url
Text > Label – A label to present the generated file name. This can be generated a number of ways, but to keep it simple we set the Text property to: "Receipt-"&Text(Today(),"[$-en-US]mm_dd_yyyy")&".png"
Text > Label – A second label to display the content string (this is the string version of the string in base64. This is not required but is useful for testing). We set the Text property to: First(receiptPhoto).Url
Controls > Button – A “retake” button to hide the preview panel and allow the user to retake a photo. The Onselect handler is: UpdateContext({receiptTaken:false})
Controls > Button – And finally the “Save to SharePoint button.” This button has a hefty function configured for its Onselect handler in place so let us break it down more.
Step 7:Using the Flow function to Save the Image
Now that we have built our Flow to do the Document conversion and storage, we can go back to the Power Apps to hook up the flow to our original submit button. In the Power Apps editor, under the Action tab select Flows. This will pull up a panel where you can see all your Flows with triggers set to Power Apps. Select the Save to SharePoint button, and then in the panel select the Flow you created earlier.
Step 8: Testing the app
Make sure to save and publish your Power Apps. You are now ready for testing!
Toast to the ones here today. Toast to the ones that we lost on the way. Let memories bring back bundle of joy, happiness, little sorrow and all the that you wish to safeguard with SharePoint or One-Drive.
For further queries or demo please comment below or contact us.
For any for consultant/ support work on O-365/ development, contact us or visit our website www.sigilotech.com