Offline Capability in Power Apps

Any mobile app which has a data entry form, which eventually is used for reporting and analytics needs to talk back to the data storage applications (e.G., sharepoint / excel sheet / dynamics crm, etc.). When trying to talk back to any data storage if the device is not connected to internet, then the user is stuck and cannot claim the action to be closed.

To avoid such loss of productivity, offline capability needs to be instilled in such canvas apps.

---

How do we achieve it?

The concept here is to follow below process.

On submission of form:

On opening of app:

Step by step approach

Here I have shown 4 types of interactions with DB.

First let’s see how a this can be done without any offline capability. Then I will add the offline capability elements to show the difference.

Functionality

Data entry points:

Implementation

Getting Accounts list:

In the left click on ‘Data’ option. This opens the existing connections and an option to add new connection: ‘Add Data’

On clicking ‘Add Data’, by default the Dataverse tables are displayed. There are other connectors that can be used too. In this example I will use Dataverse table: Accounts.

The added connection is displayed in the existing connections list.

Select the Account drop down control. In the left select the property: Items. In the expression box type the names of the connection i.e., ‘Accounts’.

In the Value property select ‘Name’ (the field value which is to be shown in the drop down)

Select the Icon control. In the left select the property: OnSelect. In the expression box type :

Collect(CameraImageColl,

{

    DataStream:Camera1.Stream,

    Title:”Image”&Text(Number+CountRows(Gallery2.AllItems))&”.jpg”

});

Here a collection is being created (or appended if already there) with the name: CameraImageColl.

The collection has 2 columns:

• DataStream —> DataStream will contain the Camera’s stream property (basically the image in binary format)
• Title —> and Title will have a text, e.g. Image3.jpg

The Gallery’s Items property is set to the same collection: CameraImageColl.

The Submit button has got most of the coding.

I will explain all the 4 lines below.

Collect(AppData,

{

    AccountId:Dropdown2.Selected.Account,

    Comments:TextInput1.Text

});

This line creates a collection (or appends to it) with the name: AppData. Below are the columns in the collection:

• AccountId —> the GUID of the selected account
• Comments —> value of the Comments text field

ForAll(Gallery2.AllItems, Collect(AppImages,

{

    AccountId:Dropdown2.Selected.Account,

    ImageData:ThisRecord.Image1.Image,

    ImageTitle:ThisRecord.Title1.Text

}));

Here the function is that of creating a collection with below columns:

AccountId —> the GUID of the selected account

ImageData —> Current element’s Image control Image data (binary info)

ImageTitle —> Current element’s text field value

ForAll(AppData, AppFlow.Run(ThisRecord.AccountId,ThisRecord.Comments));

For each of the elements in AppData collection, a Power Automate flow is being called while passing both the column values.

The flow is configured as below to update the selected account record’s ‘Description’ field

ForAll(AppImages, AppImages_1.Run(ThisRecord.AccountId,ThisRecord.ImageData,ThisRecord.ImageTitle));

For each of the elements in AppImages collection, a Power Automate flow is being called while passing both the column values.

The flow is configured as below to create an attachment against the selected account record.

Now to add the offline capabilities we need to identify the areas where interactions with DB is happening. Below are the areas where DB interactions happen.

• Retrieve list of accounts from Dynamics 365
• Update Account with Comments in Description field
• Create note against the account with the images captured

Theory

Logic for ‘Retrieve list of accounts from Dynamics 365’:

• Property of App to be configured —> OnStart
• Logic —>

• Property of DropDown to be configured —> Items
• Logic —>
  • This needs to refer to the collection and not directly to the Accounts list from DB

Logic for ‘Update Account with Comments in Description field’:

• Property of ‘Submit’ button to be configured —> OnSelect
• Logic —>

• Property of App to be configured —> OnStart
• Logic —>

Logic for ‘Create note against the account with the images captured’:

• Property of ‘Submit’ button to be configured —> OnSelect
• Logic —>

• Property of App to be configured —> OnStart
• Logic —>

Practical

• Retrieve list of accounts from Dynamics 365

                         Code in App’s OnStart:

• The collection gets saved to local device storage if connected to internet (SaveData function)
  • SaveData function parameters:
    • Collection
    • Name of the storage variable in local device storage
• If not connected to internet, collection is loaded from local device storage (LoadData function)
  • LoadData function parameters:
    • Collection
    • Name of the storage variable in local device storage
    • Whether to ignore nonexistent file

In the dropdown control, below properties need to be defined.

• Update Account with Comments in Description field

Below code is to be configured for ‘OnSelect’ of Submit button

If internet is connected, then directly run the flow, else save the collection into local device storage (SaveData)

Below code is to be configured for ‘OnSelect’ of Submit button

If internet is connected, then load data from local device storage (LoadData) and check whether any record is there in the collection (CountRows). If count > 0, then for each of the rows, run power automate flow: AppFlow using:

ForAll(

            AppData,

            AppFlow.Run(

                ThisRecord.AccountId,

                ThisRecord.Comments

            )

        )

Then clear the collection using:

Clear(AppData)

And finally save the empty collection into local device storage (SaveData)

• Create note against the account with the images captured

Below code is to be configured for ‘OnSelect’ of Submit button

If internet is connected, then directly run the flow, else save the collection into local device storage (SaveData)

Below code is to be configured for ‘OnStart’ of App

If internet is connected, then load data from local device storage (LoadData) and check whether any record is there in the collection (CountRows). If count > 0, then for each of the rows, run power automate flow: AppImages using:

ForAll(

            AppImagesData,

            AppImages.Run(

                ThisRecord.AccountId,

                ThisRecord.ImageData,

                ThisRecord.ImageData

            )

        )

Then clear the collection using:

Clear(AppImagesData)

And finally save the empty collection into local device storage (SaveData)

Anywhere if below code is written then it’s a filler for not doing anything significant. In Canvas apps, the If function needs to have an else part, so that had to be done.

THANK YOU AND GOOD LUCK!