cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
GrootCRM
Frequent Visitor

Offline images with custom component in Model Driven App possible ?

We are trying to design an app (model driven or canvas) where previously saved inspection data and corresponding images can be accessed offline on a tablet. It concerns a lot of inspections (100s) and ditto (small size) images. New inspections and images should be able to add using the (offline) tabled and uploaded as soon as the connection is up again.

 

The preferred solution is a DataVerse Model Driven App. But how to view images offline (isn't possible yet). Is that possible with custom component? Is this component available offline anyway? And does someone has a suggestion on how to solve this puzzle? Where to store the images and how to view them?

 

Thanks a lot!!!!

 

Best regards,

Elowy

1 ACCEPTED SOLUTION

Accepted Solutions
HemantG
Power Apps
Power Apps

Code components are supported in offline but the I think images are not supported offline as you pointed. So the entire play back mechanism needs to be custom build along with the mechanism to store the image data offline. Are the images taken from camera  ?  You can try image compression and storing them in the base64 format  and CRUD them to some custom field/entity . 

 

I had created a PCF control for image annotation as part of some POC back when CLI and image data type we not there.

 

Here is the flow summary if it helps 🙂 

Add a button to upload file form device - 

document.getElementById("uploadButton").addEventListener("click", this.onUploadButtonClick.bind(this));
 
use pickFile so camera and pics can be uplaoded
this._context.device.pickFile().then(this.processFiles.bind(this), this.showError.bind(this));
 
Validate this file for right extension etc and use the image as source for the HTML canvas object and show to user. Reduce size as needed and what fits in the storage for multiline , see example here - javascript - Resizing an image in an HTML5 canvas - Stack Overflow
 
Store this in the offline entity field and when online use the control to render the image as read only. 
 
hemant
 
 
 

 

View solution in original post

4 REPLIES 4
HemantG
Power Apps
Power Apps

Code components are supported in offline but the I think images are not supported offline as you pointed. So the entire play back mechanism needs to be custom build along with the mechanism to store the image data offline. Are the images taken from camera  ?  You can try image compression and storing them in the base64 format  and CRUD them to some custom field/entity . 

 

I had created a PCF control for image annotation as part of some POC back when CLI and image data type we not there.

 

Here is the flow summary if it helps 🙂 

Add a button to upload file form device - 

document.getElementById("uploadButton").addEventListener("click", this.onUploadButtonClick.bind(this));
 
use pickFile so camera and pics can be uplaoded
this._context.device.pickFile().then(this.processFiles.bind(this), this.showError.bind(this));
 
Validate this file for right extension etc and use the image as source for the HTML canvas object and show to user. Reduce size as needed and what fits in the storage for multiline , see example here - javascript - Resizing an image in an HTML5 canvas - Stack Overflow
 
Store this in the offline entity field and when online use the control to render the image as read only. 
 
hemant
 
 
 

 

View solution in original post

GrootCRM
Frequent Visitor

Thanks Hemant, for pointing me into a new direction. Never thought of storing the images in a text field.

Will this component suggestion also work with Model Driven Apps? In that case I can still use the Dataverse synchronization! And, in case Model Driven Apps will support the offline usage of image type fields in the future, I can switch easily.

 

Unfortunately I am not a technical developer, so I will try to find one to do such a POC.

 

Thanks again,

Elowy.

GrootCRM
Frequent Visitor

Besides the great suggestion from Hemant it seems that attachments and images in annotation fields are stored as base64 as well.

Both multiline text fields and annotation fields are synct well and are available offline. There are some PCF controls that I found in the PCF gallery that work online well with the annotation images. Now I have to try to get them to work offline as well.

HemantG
Power Apps
Power Apps

There was  work done by the platform team to add support for the file type and not have the attachments as text - Preview release of File and Image (with annotations) support in UCI Model Driven web applications | ... . Please check the latest document on the mobile and offline support. 

 

Yes if you write into the custom text field that can be configured to use the dynamics UCI offline sync .

 

hemant 

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (3,389)