(Post of the Month) - Build offline apps with new PowerApps capabilities

One of the most common scenarios you face as a mobile app developer is enabling your users to be productive when there is limited connectivity or no connectivity at all. PowerApps has a set of features and behaviors that help you to develop offline-capable apps. You can:

• Launch the PowerApps mobile app when offline.
• Run apps you develop when offline.
• Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
• Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

How to build offline capable apps

The first thing to discuss is how PowerApps applications access data. The primary mechanism for PowerApps applications to consume data is through a set of connectors provided by the platform such as SharePoint, Office 365 and the Common Data Service. You can also build your own custom connectors that can allow you to build any custom logic and capabilities as well as run them anywhere (such as using Azure Functions). The connectors are accessed over the internet using HTTPS which means your users will need to be online for them to access this data or functions that they offer.

Handling offline data

One of the interesting aspect of PowerApps is that it offers a set of capabilities and formulas that allow you to filter, search, sort, aggregate, insert and manipulate data that is consistent regardless of the data source such as if you are using a SQL database, a SharePoint List, a Common Data Service entity, or even collections that are locally stored the device. This allows us not only to easily build applications that can be retargeted to use a different backend but also that can be modified to use local collections instead with almost no changes to the logic. When dealing with offline data, local collections will be the primary mechanism that PowerApps offers today.

What we’ll be building

To keep the focus on the offline aspects and showing some of these new capabilities we are going to keep the scenario very simple. In this case, we are going to build an application that allows you to read twitter posts while being offline as well as tweet while being offline and when the application comes online the tweets will be posted and the local data will be reloaded.

At a high level, the application that we will be creating will do the following:

• On application startup (First screen OnVisible property)
  • If online, we will access directly the connector to fetch the data and use it to populate a local collection
  • If offline, we will load the data from a local cache using LoadData
• We will allow the user to post tweets, if online we will post directly and refresh the cache
• Every 5 minutes, if online
  • We will post any tweets that we have in the cache
  • We will refresh the local cache and save it using SaveData

Building an offline Twitter app

To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. We'll build an app that enables you to read Twitter posts and submit tweets while being offline. When the app comes online, the app posts tweets and reloads the local data.
At a high level, the app does the following:

1. On app startup (based on the first screen's OnVisible property):
   
   • If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
   • If the device is offline, we load the data from a local cache file using LoadData.
   • We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
2. Every 5 minutes, if online:
   
   • We post any tweets that we have in the local cache.
   • We refresh the local cache and save it using SaveData.

Step 1: Create a new phone app

1. Open PowerApps Studio.
2. Click or tap New > Blank app > Phone layout.

Step 2: Add a Twitter connection

1. Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
2. Click or tap New Connection , select Twitter , and click or tap Create.
3. Enter your credentials, and create the connection.

Step 3: Load tweets into a LocalTweets collection on app startup

Select the OnVisible property for Screen1 in the app, and copy in the following formula:

If(Connection.Connected,

    ClearCollect(LocalTweets, Twitter.SearchTweet("PowerApps", {maxResults: 100}));

    UpdateContext({statusText: "Online data"})
    ,
    LoadData(LocalTweets, "Tweets", true);
    UpdateContext({statusText: "Local data"})
);

LoadData(LocalTweetsToPost, "LocalTweets", true);
SaveData(LocalTweets, "Tweets")

This formula checks if the device is online:

If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
If the device is offline, it loads the local cache from a file called "Tweets," if it's available.

Step 4: Add a gallery and bind it to the LocalTweets collection

Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
Set the Items property to LocalTweets.
Add four Label controls to display data from each tweet, and set the Text properties to: 

ThisItem.TweetText
ThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserName
"RT: " & ThisItem.RetweetCount
Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)


Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.


Step 5: Add a connection status label
Insert a new Label control, and set its Text property to the following formula:

If (Connection.Connected, "Connected", "Offline")

This formula checks if the device is online. If it is, the text of the label is "Connected", otherwise it's "Offline".


Step 6: Add a text input to compose new tweets

Insert a new Text input control named "NewTweetTextInput".
Set the Reset property of the text input to resetNewTweet.


Step 7: Add a button to post the tweet

Add a Button control, and set the Text property to "Tweet".
Set the OnSelect property to the following formula:

If (Connection.Connected,

    Twitter.Tweet("", {tweetText: NewTweetTextInput.Text}),
    Collect(LocalTweetsToPost, {tweetText: NewTweetTextInput.Text});
    SaveData(LocalTweetsToPost, "LocalTweetsToPost")
);
UpdateContext({resetNewTweet: true});
UpdateContext({resetNewTweet: false})



This formula checks if the device is online:


If the device is online, it tweets the text immediately.
If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Then the formula resets the text in the text box.


Step 8: Add a timer to check for tweets every five minutes
Add a new Timer control:


Set the Duration property to 300000.
Set the AutoStart property to true.
Set the OnTimerEnd to the following formula:

If(Connection.Connected,
    ForAll(LocalTweetsToPost, Twitter.Tweet("", {tweetText: tweetText}));
    Clear(LocalTweetsToPost);
    Collect(LocalTweetsToPost, {tweetText: NewTweetTextInput.Text});
    SaveData(LocalTweetsToPost, "LocalTweetsToPost");
    UpdateContext({statusText: "Online data"})
)



This formula checks if the device is online. If it is, the app tweets all the items in the LocalTweetsToPost collection. 

Then it clears the collection.

Now that the app is finished, let's check out how it looks before we move on to testing. On the left, the app is connected; 

and on the right, it's offline, with one tweet ready to post when it's online again.