cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
chris421
Level: Power Up

App for field staff to take photos and work offline

I'm fairly new to Power Apps, and I'm hoping someone can point me in the right direction.

 

I'm doing an app for work to be used by field staff to report issues. The app needs to take in certain details about the issue, and take photos, and then send back to the main office to be passed to the maintenance team for dealing with.

 

I already have the app taking photos from the Camera, and storing in a Collection, and that Collection is the Items source for the Attachments field of the form (whilst being shown as a Gallery for confirming they are suitable).

On Submit, the form is moving all the fields AND the photos (as attachments) into a Sharepoint list for further processing. (I don't have access to Common Data Service, and therefore SQL).

 

However, my issue comes when I try to cover the Offline scenario.....if the field staff don't have a signal/aren't connected, then I still need them to send the problem reports. I've added the Connection.Connected code to check for the connection, and if not true, then it will store the data in a Collection, and use SaveData to store on the device.

 

Now I need to get that data back out, and send it. So, I've got a Timer setup to keep checking for a Connection every 30seconds, and when it's there, LoadData into a Collection and Patch it to the List. However, I can't do this for the Attachments.....I keep getting errors, and when I search for answers all I find is "you need to Update/Delete attachments through the Attachment form control".

 

Does anyone have any thoughts / pointers as to how I may be able to get the Attachments back out of the data file, and sent over to the List on Connection? It all works for the text fields.....but as soon as I try to code in the attachments, it all falls apart.

3 REPLIES 3
WarrenBelz
Level 8

Re: App for field staff to take photos and work offline

Hi @chris421 ,

Below is a process I use for offline photos - I also posted this last week on another query and this may address some of your requirements.

Firstly, I use the Connection.Connected test on every screen and if not online, all other screens other than the offline photo screen have only a button in the middle to navigate to the offline screen. So from the start

At App OnStart - it loads data from olPhotos storage on device into Collection OLPhoto. The true parameter tells it to ignore the command if the phone currently has not had the storage configured.

LoadData(
   OLPhoto,
   "olPhotos",
   true
)

Now the camera takes a picture and sends it to collection OLSample so it can be reviewed in the Image control

ClearCollect(
   OLSample,
   CameraScreenO.Photo
)

Now when the user accepts this picture - it is collected from camera screen and added to collection OLPhoto, then this is saved to the device collection to device storage olPhotos replacing data currently stored

Collect(
   OLPhoto,
   {
      sPhoto:ImageDisplayO.Image,
      sNotes:PhotoNotesO.Text,
      sDate:Text(Now(),DateTimeFormat.ShortDateTime24,"en-GB")
   }
);
SaveData(
   OLPhoto,
   "olPhotos"
)

When the device comes back online (and Connection.Connected is true), the users gets another button that says either return to the "normal" photo screen or choose a photo to upload. If they choose the photo (check icon in a gallery) this runs

ClearCollect(
   colPhoto,
   ThisItem.sPhoto
);
Navigate(PhotoScreen,Cover);
Set(vPhoto,true)

and simply puts the saved photo in the same collection that the "online" camera uses and displays the picture. This can then be saved via Flow to the SharePoint Library in the same manner as an online taken photo. Also on the main photo screen, a button appears if there are any offline photos on the device and navigates to the offline screen as above.

Now to delete an item - first bit displays a big red pop-up with the picture image for the user to confirm they want to delete it.

Set(vDelete,true);
Set(vDelItem,ThisItem)

Then if the user selects the confirmation, removes the item from the collection OLPhoto and then writes to the device replacing the data olPhotos with the updated collection. Then the pop-up disappears.

Remove(
   OLPhoto,
   vDelItem
);
SaveData(
   OLPhoto,
   "olPhotos"
)
Set(vDelete,false)

It all has worked fine for some time and we intentionally made the users clear them one at a time when they came back online and uploaded them (using the normal screen, but collecting from OLPhoto instead of the camera above). 

 

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up

chris421
Level: Power Up

Re: App for field staff to take photos and work offline

Thanks @WarrenBelz 

 

Elements of this I already have in place, but I can tidy up my code a bit to ensure stability in the take/save/load process.

 


@WarrenBelz wrote:

This can then be saved via Flow to the SharePoint Library in the same manner as an online taken photo.

 


As for the uploading process, do you believe that using Flow for anything offline is the online way to deal with the stored photos?

 

The online photos that I'm currently taking AREN'T uploaded using flow, they are uploaded via SubmitForm. When the photo is taken, it's stored in a Collection (e.g. CapturedPhotos). The Camera element is within the form DataCard and the attachments list has it's Items set to the CapturedPhotos collection and a horizontal Gallery also within the DataCard is also set to the CapturedPhotos and has a small Trash can under each image. So, when a photo is taken by pressing the live Camera image, it takes a photo, holds it in the collect. The Gallery then shows a small preview, with the option to Remove from the Collection, and the Attachments field of the Form shows the filename as an attached item. When the user presses the Submit button, it simple runs SubmitForm(Form1) and then resets the Form OnSuccess, ready for the next time. This all works well, but now that I'm adding Offline functionality, I'd been working on having to use SaveData when not Connected, which also works.

 

The Timer I'd described previously just checks for Connection.Connected, and when it finds it, it then tries to process the SaveData if it exists. But I cannot get the photos that were Saved into the Sharepoint List the same as the Online reports/images.

 

Am I going to have to go down the route of a Flow to take the stored images?

 

 

 

 

WarrenBelz
Level 8

Re: App for field staff to take photos and work offline

Thanks @chris421 ,

You have a slightly different process to me (and I have seen many others to achieve the same result). I will try to clarify my "normal" online process.

Firstly, I keep it simple for users - they take a photo, review it in an image control and then if happy with it, accept it which saves it to a separate SharePoint Library. Like you, I write the photo to a collection (colPhoto), but the save sends the First(colPhoto).Url to a Flow which does a dataUriToBinary conversion and files it in this Library with some other metadata. We use these photos independently of the app for audit purposes (there are currently about 30,000 in the library)  so Attachments or Base64 text storage in the SharePoint list is not an option. Also the library items belonging to the item concerned (I send the record ID as a reference in the Library metadata) are collected and displayed as thumbnails for the user to review as below..

P2Photos.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Now to your question in relation to the above. When the user navigates to the offline photo screen and selects a saved photo from the gallery, it simply ClearCollects it to colPhoto and then goes back to the online screen. The photo appears the same as if it had been taken from the camera and the save to the Library simply works as described above.

This is fairly "old" process in PowerApps terms (about 18 month ago), but it achieves the desired purpose. I also have a "upload saved photo" facility for images off the device (written more recently), but image size/bandwidth are at times an issue here. This one uses JSON conversion at "both ends" with a Flow.

 

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up

 

Helpful resources

Announcements
thirdimage

Power Apps Super User Class of 2020

Check it out!

thirdimage

New Badges

Check it out!

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

SecondImage

Difinity Conference

The largest Power BI, Power Platform, and Data conference in New Zealand

Top Solution Authors
Top Kudoed Authors
Users online (5,442)