Power Apps Offline Mode: A Step-By-Step Tutorial

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-offline-mode-a-step-by-step-tutorial/. Author: Matthew Devaney.

Power Apps Offline Mode: A Step-By-Step Tutorial Posted by - Matthew Devaney on - January 17, 2021 72 Comments

Mobile Power Apps for tablets or phones still have to work when there is no internet connection. As a developer, making Power Apps with an offline mode is one of the the greatest challenges you will undertake. It requires careful planning to ensure no data is lost when the device goes offline and to quickly upload a large amount of data when the device comes back online.

In this article I will show you a full example of how to build mobile Power Apps with an offline mode.

April 6, 2022 – The article was updated to include a new technique for generating offline record IDs using the GUID function Table of Contents Introduction: Home Inspection App Setup The SharePoint List

Create A Gallery To Show List Of Home Inspections

Make A Form To Record Home Inspection Results

Editing Records in Power Apps Offline Mode Admin Screen Saving Screen Loading Screen

Adding Records in Power Apps Offline Mode

Deleting Records in Power Apps Offline Mode Refresh Button Introduction: Home Inspection App

The Home Inspection App is a tablet app used by employees of a company that performs home inspections for new home buyers. After an employee looks-over the home they submit a report on its condition via the app. Sometimes the employee is not in range of a cellular signal or wifi so an offline mode must be included in the app. When the app is offline any reports will be saved to the tablet. Then when the tablet comes in range of internet service once again the reports will be saved back to the datasource. Setup The SharePoint List

Create a SharePoint list called Home Inspection s with the following columns: OfflineID (single-line text) Address (single-line text) StartTime (date and time) Assigned To (single-line text) Report (multiple-line text)

Load the following data into the SharePoint list. The OfflineID holds a GUID: a 32 character hexadecimal value that is randomly generated and has a near-zero chance of being a duplicate value. In an online-only scenario we rely on SharePoint to assign each record a unique id on creation. However, in an offline app we might not be able to connect to SharePoint an therefore need to make our own unique ids. OfflineID Address StartTime AssignedTo Report aa30a399-ad93-4c01-9f61-bac690affd19 30 State Street 1/9/2020 9:00AM Matthew Devaney 5e21a4c6-3485-405c-b8e7-4df68d9421a4 200 Broadway Ave 1/9/2020 11:00AM Matthew Devaney e3fe8617-9056-462e-85d3-be48ae604b95 15 Circle Road 1/9/2020 1:30PM Matthew Devaney

Create A Gallery To Show List Of Home Inspections

Open Power Apps and start a new canvas app from blank. Connect the app to the Home Inspection s SharePoint list. Then write this code in the OnStart property of the app to store the Home Inspections list inside a collection.

// load home inspections data into collection ClearCollect( colHomeInspections, 'Home Inspections' ); Code language: JavaScript ( javascript )

Insert a new screen called Gallery Screen . On this screen the employee selects a home inspection appointment from a list and goes to the next screen to write a report.

Insert a gallery on the screen with Home Inspections as the Items property. colHomeInspections

Then write this code in the OnSelect property of the the gallery. Errors will appear because we have not created the Form Screen or the Edit Form yet. Its OK, we’ll take care of those in a moment.

Set (varCurrentRecord, ThisItem); EditForm(frm_Form_Main); Navigate( 'Form Screen' ); Code language: JavaScript ( javascript )

Make A Form To Record Home Inspection Results

Next, insert another screen called Form Screen . Add an Edit Form to the screen called frm_Form_Main and use Home Inspections as the datasource.

Place the varCurrentRecord variable in the Item property of the form. Now when the employee selects a home inspection appointment from the list it will appear in the form. varCurrentRecord

The OfflineID field is necessary to identify the record but we do not need the user to see it.

Use this code in the Visible property of the OfflineID card. false Code language: JavaScript ( javascript )

The employee needs a way to go back to the Gallery screen if they have chosen the wrong appointment. Create a Left Arrow icon and position it on the left-side of the title bar.

Make a Left Arrow icon and put this code in the OnSelect property. Navigate( 'Gallery Screen' ) Code language: JavaScript ( javascript )

There are 3 more blank screens we should create right now. However, we will not write any code for them until later. Saving Screen Loading Screen Admin Screen

Editing Records In Power Apps Offline Mode

The employee opens the appointment, writes a report and submits it to SharePoint once complete. When the tablet does not have internet service the changed appointment record must be saved to the local device instead. Place a Submit button on the screen directly below the Edit Form.

Write this code in the OnSelect property of the Submit button. It will save the form data to the colHomeInspections collection and then save colHomeInspections to the local device. Notice that we are not trying to update the SharePoint list yet. We will check for a connection and try to do that on the Saving Screen . // update collection with form data

Patch( colHomeInspections, LookUp(colHomeInspections, OfflineID=varCurrentRecord.OfflineID), frm_Form_Main.Updates ); // save collection to local device SaveData( colHomeInspections, "localHomeInspections" ); Code language: JavaScript ( javascript )

Additionally, we need to track which record was edited in a new collection called colUnsavedRecords.

We will also save colUnsavedRecords to the local device in case there is no internet connection. Then the app will go to the saving screen.

Add this code to the OnSelect property of the Submit button as well. // update collection with form data

Patch( colHomeInspections, LookUp(colHomeInspections, ID=varCurrentRecord.ID), frm_Form_Main.Updates ); // save collection to local device SaveData( colHomeInspections, "localHomeInspections" ); /* more code added below */ < span

class = "has-inline-color has-black-color" > // track record that was edited Collect( colUnsavedRecords, {OfflineID: varCurrentRecord.OfflineID} ); // save collection to local device SaveData( colUnsavedRecords, "localUnsavedRecords" ); Navigate('Saving Screen'); </ span > Code language: JavaScript ( javascript ) Admin Screen

When the app is in Play mode we want the Loading Screen and Saving Screen to run automatically. But when the app is in Studio mode we need a way to disable the loading and saving from happening so we can work on that functionality. We can do this by enabling ‘Debug Mode’ on the Admin Screen . Debug mode is not something built into Power Apps, it is something we are building for ourselves.

Go to the Admin Screen and insert a new toggle called tog_DebugMode .

Then set the Default property of the toggle to false . false Code language: JavaScript ( javascript )

Click on the toggle and set it to true to disable automatic loading and saving on the next screens. Saving Screen

Now its time to save the edited record back to the Home Inspections SharePoint list. Open the Saving Screen and place two new controls on the canvas:

A label called lbl_Saving_Message to display the saving status

A button called btn_Saving_Actions to hold the saving code

Use this code in the OnVisible property of the screen. It will click the button btn_Saving_Actions when the Saving Screen is opened unless the app is in Debug Mode. If (! tog_DebugMode .Value , Select ( btn_Saving_Actions )) Code language: CSS ( css )

Put this code in the OnSelect property of the button to check if the device is connected to the internet and write the unsaved records back to SharePoint. // Check if device is online If(Connection.Connected, // Add or update records in SharePoint Patch( 'Home Inspections' ,

// Choose which columns are written to SharePoint ShowColumns(

// Only write records with ID found in colUnsavedRecords

Filter( colHomeInspections, OfflineID in colUnsavedRecords.OfflineID ), "ID" , "OfflineID" , "Address" , "StartTime" , "AssignedTo" , "Report" ) ); // Clear unsaved records collection

Clear(colUnsavedRecords); SaveData( colUnsavedRecords, "localUnsavedRecords" ); );

UpdateContext({ locMessage : "Saving completed" }); Navigate( 'Loading Screen' ); Code language: JavaScript ( javascript )

To let the user know what is currently happening during the save process use the locMessage variable in the Text property of the label lbl_Saving_Message . locMessage Loading Screen The Loading

Screen is structured similarly to the Saving Screen. Open the Loading Screen and place two new controls on the canvas:

A label called lbl_Loading_Message to display the loading status

A button called btn_Loading_Actions to hold the loading code

Use this code in the OnVisible property of the screen. If (! tog_DebugMode

.Value , Select ( btn_Loading_Actions )) Code language: CSS ( css )

Put this code in the OnSelect property of the button. When the app is opened we load any data stored on the device to check if there are unsaved records. If there are no unsaved records and the device is connected to the internet we load the Home Inspections from SharePoint. If there are unsaved records, we use data from the device instead.

// Load offline data when the app is opened

If( !locAfterFirstLoad, UpdateContext({ locMessage : "Loading your data from Local Device..." }); LoadData(colUnsavedRecords, "localUnsavedRecords" , true ); LoadData(colHomeInspections, "localHomeInspections" , true ); ); UpdateContext({ locAfterFirstLoad : true }); // Check if device is online

If( Connection.Connected And IsEmpty(colUnsavedRecords), //  Get data from SharePoint

UpdateContext({ locMessage : "Loading your data from SharePoint..." }); ClearCollect( colHomeInspections, 'Home Inspections'

); SaveData(colHomeInspections, "localHomeInspections" ) );

UpdateContext({ locMessage : "Loading completed" }); Navigate( 'Gallery Screen' ); Code language: JavaScript ( javascript )

Write the locMessage variable in the Text property of the label lbl_Loading_Message . locMessage

Finally, go back to the OnStart property of the app, remove any code and replace it with this. Blank()

The Home Inspections App can now edit records in Power Apps offline mode.

Adding Records In Power Apps Offline Mode

An employee should be able to add a new home inspection appointment to the app. Including this functionality is very simple. We can accomplish it by adding some extra code in two sections.

Insert a new Add icon onto the Gallery Screen …

…and copy this code into the OnSelect property. Set (varCurrentRecord, Blank());

Set (varNewOfflineGUID, GUID()); NewForm(frm_Form_Main); Navigate( 'Form Screen' ); Code language: JavaScript ( javascript ) Then go to the Form Screen …

…and add this code to the OfflineID card we made hidden earlier. When the form is in new mode it will create a GUID and when the form is in edit mode it will use the current GUID.

If (FormMode. New , varNewOfflineGUID, Parent . Default ) Code language: PHP ( php )

Then update the OnSelect property of the submit button with this code.

// update collection with form data Patch( colHomeInspections, /* updated code here */ < strong > Coalesce( </ strong > < strong > LookUp( </ strong >

< strong > colHomeInspections, </ strong >

< strong > OfflineID=varCurrentRecord.OfflineID </ strong > < strong > ), </ strong >

< strong > Defaults(colHomeInspections) </ strong >

< strong > ) </ strong > , frm_Form_Main.Updates ); // save collection to local device SaveData( colHomeInspections, "localHomeInspections" ); // track record that was edited Collect( colUnsavedRecords, {OfflineID: varCurrentRecord.OfflineID} ); // save collection to local device SaveData( colUnsavedRecords, "localUnsavedRecords" ); Navigate('Saving Screen'); Code language: HTML, XML ( xml )

Those small changes are all it takes to add new records with Power Apps offline mode.

Deleting Records In Power Apps Offline Mode

Removing home inspection appointments is a bit more involved. We must get rid of the record on the local device and track anything that was removed until a sync with SharePoint can be performed. Open the Form

Screen and add a Trash icon to the top right corner.

Write this code in the OnSelect property of the Trash icon. It will delete the record from the colHomeInspections collection and save colHomeInspections to the local device. // update collection with form data

Remove( colHomeInspections, LookUp(colHomeInspections, OfflineID=varCurrentRecord.OfflineID) ); // save collection to local device SaveData( colHomeInspections, "localHomeInspections" ); Code language: JavaScript ( javascript )

Also, we need to track which record was deleted in a new collection called colDeletedRecords. We will also save colDeletedRecords

to the local device in case there is no internet connection. Then the app will go to the saving screen. // update collection with form data

Remove( colHomeInspections, LookUp(colHomeInspections, ID=varCurrentRecord.ID) ); // save collection to local device SaveData( colHomeInspections, "localHomeInspections" ); /* more code added below */

<strong> // track record that was edited

Collect( colDeletedRecords, {OfflineID: varCurrentRecord.OfflineID} ); // save collection to local device SaveData( colDeletedRecords, "localDeletedRecords" ); Navigate( 'Saving Screen' )</strong> Code language: PHP ( php )

We only want the Trash Can icon to show when the form is in edit mode. Use this code in the Visible property of the icon. frm_Form_Main.Mode=FormMode.Edit Then go to the Saving Screen …

…and add this code to delete the records from SharePoint when the device is connected.

UpdateContext({locMessage: "Saving your data..." }); // Check if device is online If (Connection.Connected, // Add or update records in SharePoint Patch(

'Home Inspections' , ShowColumns( Filter( colHomeInspections, OfflineID in colUnsavedRecords.OfflineID ), "ID" , "OfflineID" , "Address" , "StartTime" , "AssignedTo" , "Report" ) ); // Clear unsaved records collection

Clear(colUnsavedRecords); SaveData( colUnsavedRecords, "localUnsavedRecords" ); /* added code here */

<strong> // Delete records from SharePoint ForAll( colDeletedRecords, Remove( 'Home Inspections' , LookUp(

'Home Inspections' , ID=colDeletedRecords[@ID] ) ) ); // Clear deleted records collection

Clear(colDeletedRecords); SaveData( colDeletedRecords, "localDeletedRecords" );</strong> );

UpdateContext({locMessage: "Saving completed" }); Navigate( 'Loading Screen' ); Code language: PHP ( php ) Then go to the Loading Screen …

…and add this code to load colDeletedRecords from the local device if the device unexpectedly went offline and prevent the app from loading the deleted record from SharePoint.

If ( !locAfterFirstLoad, UpdateContext({locMessage: "Loading your data from Local Device..." }); LoadData(colUnsavedRecords, "localUnsavedRecords" , true ); /* added code here */

<strong>LoadData(colDeletedRecords, "localDeletedRecords" , true );</strong> LoadData(colHomeInspections, "localHomeInspections" , true ); ); UpdateContext({locAfterFirstLoad: true }); // Check if device is online If ( /* updated code here */ Connection.Connected And IsEmpty(colUnsavedRecords)

And <strong>IsEmpty(colDeletedRecords)</strong>, //  Get data from SharePoint

UpdateContext({locMessage: "Loading your data from SharePoint..." }); ClearCollect( colHomeInspections 'Home Inspections'

); SaveData(colHomeInspections, "localHomeInspections" ) );

UpdateContext({locMessage: "Loading completed" }); Navigate( 'Gallery Screen' ); Code language: PHP ( php )

Now the app can successfully delete records using Power Apps offline mode. Refresh Button

The last feature we will add is a refresh button so the employee can sync the local device’s data to the SharePoint list on-demand. Create a Refresh icon and place it in the top-left corner of the Gallery Screen.

Use this code in the OnSelect property of the Refresh icon to navigate to the saving screen. The app will save any unsaved records to the SharePoint list then load any updated records form the SharePoint list. Navigate( 'Saving Screen' ) Code language: JavaScript ( javascript )

We have now fully implemented Power Apps offline mode for the Home Inspections app. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Offline Mode please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. LOADDATA function Offline Mode SAVEDATA function Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps