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

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.

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 Inspections 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.

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 Inspections 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'
);

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');

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

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')

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"
);

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 */

// track record that was edited
Collect(
    colUnsavedRecords,
    {OfflineID: varCurrentRecord.OfflineID}
);
// save collection to local device
SaveData(
    colUnsavedRecords,
    "localUnsavedRecords"
);
Navigate('Saving Screen');

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

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))

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');

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))

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');

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');

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)

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

// update collection with form data
 Patch(
     colHomeInspections,
     /* updated code here */
     Coalesce(
         LookUp(
             colHomeInspections,
             OfflineID=varCurrentRecord.OfflineID
         ),
         Defaults(colHomeInspections)
     ),
     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');

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"
 );

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 */

 // track record that was edited
 Collect(
     colDeletedRecords,
     {OfflineID: varCurrentRecord.OfflineID}
 );
 // save collection to local device
 SaveData(
     colDeletedRecords,
     "localDeletedRecords"
 );
 Navigate('Saving Screen')

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 */

    // Delete records from SharePoint
    ForAll(
        colDeletedRecords,
        Remove(
            'Home Inspections',
            LookUp(
                'Home Inspections',
                ID=colDeletedRecords[@ID]
            )
        )
    );
    
    // Clear deleted records collection
    Clear(colDeletedRecords);
    SaveData(
        colDeletedRecords,
        "localDeletedRecords"
    );
);

UpdateContext({locMessage: "Saving completed"});
Navigate('Loading Screen');

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 */
    LoadData(colDeletedRecords, "localDeletedRecords", true);
    LoadData(colHomeInspections, "localHomeInspections", true);
);
UpdateContext({locAfterFirstLoad: true});

// Check if device is online
If(
    /* updated code here */
    Connection.Connected
    And IsEmpty(colUnsavedRecords)
    And IsEmpty(colDeletedRecords),

    //  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');

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')

We have now fully implemented Power Apps offline mode for the Home Inspections app.

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.