{"id":937,"date":"2018-12-06T06:46:33","date_gmt":"2018-12-06T06:46:33","guid":{"rendered":"https:\/\/www.tatvasoft.com.au\/blog\/?p=937"},"modified":"2022-03-17T07:43:21","modified_gmt":"2022-03-17T07:43:21","slug":"implementing-offline-capability-in-powerapps-with-sharepoint-part-2","status":"publish","type":"post","link":"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/","title":{"rendered":"Implementing Offline Capability in PowerApps with SharePoint- Part 2"},"content":{"rendered":"

This blog is a continuation in the series of blogs for implementing offline capability in PowerApps with SharePoint.<\/p>\n

In the first part<\/a>, we streamlined the process to enable and configure offline capabilities in your applications.<\/span><\/p>\n

Here, we\u2019ll determine the behavior of an offline app. We\u2019ll look at how to cache data locally and display the cached data when the app becomes offline. We\u2019ll develop a system to handle offline addition, updaAdd a new record in a mobile device when the internet connection is not available.ting, and deletion of data and build a conflict resolution screen, wherein SharePoint programmer<\/a> can retain the offline record or revert to the most recent version of the record.<\/p>\n

If you require your app to be fully functional offline, it is a must to handle offline record deletion and edit. Apart from that, in cases where you lose internet connectivity for an extended period of time, other users may update same records which you have deleted.<\/p>\n

We can build a Conflict Resolution screen to prevent users from overwriting their changes and avoid data conflicts. In a case where data conflicts exist, the user can retain or discard offline changes using this screen.<\/p>\n

Capture New Books or Update an Existing Record<\/h2>\n

There are numerous changes we need to make to save icon of the edit screen in order to handle offline data edits and data entries.<\/p>\n

The approach is to override the use of SubmitForm<\/strong> function to save the book in the BooksCollection<\/strong> collection because we need to allocate a temporary id to enable us to edit or delete records created in offline mode.<\/p>\n

Override code of the OnSelect<\/strong> property of Save<\/strong> icon containing SubmitForm<\/strong> function inside the edit screen.<\/p>\n

Below are the high-level steps to accomplish this<\/p>\n

    \n
  1. Assign values based on whether the user is adding or editing a record.<\/li>\n
  2. Retrieve form values entered by user and access form values using Updates property.<\/li>\n
  3. Load the next available temporary id.<\/li>\n
  4. If the connection is available, update \u201cBest Books\u201d list and store returned record inside it. \u201cBooksRecord\u201d collection using Patch operation. Refer link to know more about Patch function: https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/canvas-apps\/functions\/function-patch<\/li>\n
  5. If the connection is not available, patch the record inside \u201cBooksRecordOffline\u201d collection.<\/li>\n
  6. Uniquely identify records that are created offline by setting id which is generated earlier.<\/li>\n
  7. Include \u201cModified\u201d field for offline data updates to check for conflicts during the synchronization process.<\/li>\n
  8. Sync \u201cBooksCollection\u201d collection.<\/li>\n<\/ol>\n
      \n
    • If connection is available, patch \u201cBooksRecord\u201d to \u201cBooksCollection\u201d collection.<\/li>\n
    • If the connection is not available, patch \u201cBooksRecordOffline\u201d collection.<\/li>\n<\/ul>\n

      Add a Record Offline<\/h3>\n

      Carry out the demo given below to add a record in offline mode in a mobile device after configuring the whole app.<\/p>\n

        \n
      • Add a new record in a mobile device when the internet connection is not available.\"Add<\/li>\n
      • Add a \u201cBook Name\u201d and \u201cAuthor\u201d and click Submit icon. Close the app.\"Add<\/li>\n
      • Open the app when the internet connection is available and click on sync icon to navigate to SyncScreen.\"Click<\/li>\n
      • You can view the record you created in offline mode on the sync screen. Click on the Synchronize button to add the record to the database.\"Click<\/li>\n
      • Navigate to the browser screen by clicking Back button and click on Refresh icon to view the newly added record.\"Refresh<\/li>\n<\/ul>\n

        Update a Record Offline<\/h3>\n

        Carry out the demo given below to update a record in offline mode in a mobile device after configuring the whole app.<\/p>\n

          \n
        • Navigate to details screen of a particular record to update its properties.\"Navigate<\/li>\n
        • Edit a record in offline mode from a mobile device.\"Edit<\/li>\n
        • Edit a field associated with the record and click on the Submit button. Close the app.\"Edit<\/li>\n
        • Once the internet connection is available, open the app and click on Sync icon to navigate to sync screen.\"Click<\/li>\n
        • You can view record updates on the sync screen. Click Synchronize to apply the changes.\"\"<\/li>\n
        • Click Back icon and refresh the browse screen to view your changes.\"Refresh<\/li>\n<\/ul>\n

          Handling Offline Deletions<\/h3>\n

          An app should handle offline deletion of data for it to meet all the functional requirements. The details screen provides a delete icon.<\/p>\n

          The most common way to delete an item from a local collection is to remove an item by a unique identifier.<\/p>\n

          We need to add code to the OnSelect<\/strong> rule of Delete<\/strong> icon on the details screen<\/strong>.<\/p>\n

          Below are the high-level steps to accomplish this:<\/p>\n

            \n
          • Remove record from local BooksCollection<\/strong>.<\/li>\n
          • Check whether the internet connection is available or not.<\/li>\n
          • If the connection is available, remove the record from \u201cBest Books\u201d list<\/li>\n
          • If the internet connection is not available, collect data in BooksChanges<\/strong> collection which keeps track of offline changes.<\/li>\n
          • Save data to offline file to retain an offline modifications.<\/li>\n<\/ul>\n

            Carry out the demo given below to delete record in offline mode in a mobile device after configuring the whole app.<\/p>\n

              \n
            • Navigate to details screen for a particular record.\"Navigate<\/li>\n
            • Delete a record in offline mode from a mobile device.\"Delete<\/li>\n
            • Close the app and re-open \u201cBest Books\u201d app when the internet connection is available.<\/li>\n
            • Click sync icon to navigate to SyncScreen.\"Navigate<\/li>\n
            • You can view the record deleted in offline mode.\"Record<\/li>\n
            • Click the Synchronize button in order to process offline deleted record, click the Back button and then refresh the browser screen. You can see that the record is removed from the view. You can also check by navigating to the SharePoint list to check whether the record is deleted.<\/li>\n<\/ul>\n

              Conflict Resolution<\/h3>\n

              We can create a screen to provide a means for users to resolve data conflicts if the synchronization process faces records in a conflicted state.<\/p>\n

                \n
              • Create a screen named \u201cConflictResolutionScreen\u201d of type Scrollable. Delete the canvas inside the screen. Rename the label text at the top to \u201cResolve conflicts\u2019. Remove \u201cNext\u201d arrow as it is not required.<\/li>\n
              • Add a gallery control of type Vertical inside the screen and adjust size of the control. Name the control \u201cBooksConflict\u201d and set its Item property to BooksChangesConflict.<\/strong>\"Set<\/li>\n
              • Show the desired fields using the syntax ThisItem.OfflineRecord.<Fieldname>\"Show<\/li>\n
              • Similarly set Text properties of other two fields \u201cBook Name\u201d and \u201cAuthor\u201d<\/li>\n
              • Add two button controls named \u201cRetain\u201d and \u201cDiscard\u201d to item of the gallery control to enable users to keep or discard offline changes. Add a \u201cBack\u201d button inside the screen\"Add<\/li>\n
              • Two button controls \u201cRetain\u201d and \u201cDiscard\u201d are displayed for each conflicted item on the \u201cConflictResolutionScreen\u201d screen.<\/li>\n
              • Add formula on the OnSelect property of the discard button to remove offline version of record to keep record server version.\"Sync<\/li>\n
              • Patch the offline record to SharePoint list to keep offline version of record. For that, add code to OnSelect action of retain button on conflict resolution screen.<\/li>\n
              • Add formula to the OnSelect action of the back button on conflicts resolution screen to navigate on Sync screen.<\/li>\n<\/ul>\n

                Walkthrough for Resolving Conflicts<\/h3>\n

                Carry out the demo given below to retain\/discard conflicting records processed in offline mode in a mobile device after configuring the whole app.<\/p>\n

                  \n
                • Navigate to details screen for a particular record and edit a record in offline mode from a mobile device.\"Edit<\/li>\n
                • Edit a field associated with the record and click on Submit button.\"Edit<\/li>\n
                • Again delete the record for which you made update earlier. Close the app.\"Delete<\/li>\n
                • Once the internet connection is available, click on Sync icon to navigate to sync screen.\"Sync<\/li>\n
                • You can view conflicting records on the sync screen. Click on \u201cSynchronize\u201d button.\"Click<\/li>\n
                • Once you click on \u201cSynchronize\u201d button, \u201cConflicts\u201d button is enabled and the conflicted records will be moved to conflict resolution screen. Click \u201cConflicts\u201d button to resolve the conflicts.<\/li>\n<\/ul>\n

                  Note:<\/strong><\/em> In the case of non-conflicting offline records, they will be processed into SharePoint list.<\/p>\n

                  \"Sync<\/p>\n

                    \n
                  • On the conflict resolution screen, choose whether to discard or retain the changes for conflicting records.\"Conflict<\/li>\n
                  • If you click \u201cRetain\u201d button and select Refresh icon on the browser screen, it will keep the updates as shown below else if you click \u201cDiscard\u201d, it will discard the changes.\"Click<\/li>\n<\/ul>\n

                    Save and Publish your App<\/h3>\n
                      \n
                    • Once you are done developing offline-capable PowerApp with SharePoint, open File menu and then click Save.\"Save<\/li>\n
                    • Finally, Publish your app.\"Publish<\/li>\n<\/ul>\n

                      Once published, you can view your PowerApp and work with your SharePoint Online list from your phone.<\/p>\n

                      We are done building PowerApp with basic offline capabilities with SharePoint Online list. Your user can now view books cached earlier and can even create, update and delete books without internet connection, and to sync later when online. Ensure that the user has to open \u201cBest Books\u201d app at least once on the mobile device, so that \u201cBest Books\u201d SharePoint list is cached.<\/p>\n

                      Conclusion<\/h2>\n

                      Building offline capable apps can make SharePoint development even more engaging for mobile users, especially when SharePoint developers are traveling to remote places with spotty internet connection availability. This series of blogs guided through the steps to build capabilities in your app that work offline. Once an app becomes offline, the browser screen shows data that was cached earlier when app was online.<\/p>\n

                      In case of offline data updates, we saw how to save changes to local file. Once the app retains internet connection, we can patch offline changes to SharePoint list.<\/p>\n

                      We also had a look at how to handle data conflicts by examining last modified date of the record. We processed conflicting record to a collection, which allows users to choose whether to keep or discard conflicting offline changes.<\/p>\n","protected":false},"excerpt":{"rendered":"

                      This blog is a continuation in the series of blogs for implementing offline capability in PowerApps with SharePoint. In the…<\/p>\n","protected":false},"author":1,"featured_media":1904,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29],"tags":[],"acf":[],"yoast_head":"\nOffline Capability of PowerApps with SharePoint - Part 2<\/title>\n<meta name=\"description\" content=\"In this post we will determine the behaviour of an offline app. We can retain the offline record and revert to most recent record version.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Offline Capability of PowerApps with SharePoint - Part 2\" \/>\n<meta property=\"og:description\" content=\"In this post we will determine the behaviour of an offline app. We can retain the offline record and revert to most recent record version.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"TatvaSoft AU Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-06T06:46:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-17T07:43:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tatvasoft.com.au\/blog\/wp-content\/uploads\/2018\/12\/Offline-Capability-in-PowerApps-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"375\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/#website\",\"url\":\"https:\/\/www.tatvasoft.com.au\/blog\/\",\"name\":\"TatvaSoft AU Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.tatvasoft.com.au\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.tatvasoft.com.au\/blog\/wp-content\/uploads\/2018\/12\/Offline-Capability-in-PowerApps-2.jpg\",\"width\":750,\"height\":375,\"caption\":\"Offline Capability of PowerApps with SharePoint - Part 2\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/#webpage\",\"url\":\"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/\",\"name\":\"Offline Capability of PowerApps with SharePoint - Part 2\",\"isPartOf\":{\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/#primaryimage\"},\"datePublished\":\"2018-12-06T06:46:33+00:00\",\"dateModified\":\"2022-03-17T07:43:21+00:00\",\"author\":{\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/#\/schema\/person\/99be98dec950f3b1cdc014df166dd95c\"},\"description\":\"In this post we will determine the behaviour of an offline app. We can retain the offline record and revert to most recent record version.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tatvasoft.com.au\/blog\/implementing-offline-capability-in-powerapps-with-sharepoint-part-2\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/#\/schema\/person\/99be98dec950f3b1cdc014df166dd95c\",\"name\":\"tatvasoftadmin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tatvasoft.com.au\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ef69a3ae4a620ca0f649d8228bece0b?s=96&d=mm&r=g\",\"caption\":\"tatvasoftadmin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/posts\/937"}],"collection":[{"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/comments?post=937"}],"version-history":[{"count":19,"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/posts\/937\/revisions"}],"predecessor-version":[{"id":1984,"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/posts\/937\/revisions\/1984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/media\/1904"}],"wp:attachment":[{"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/media?parent=937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/categories?post=937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tatvasoft.com.au\/blog\/wp-json\/wp\/v2\/tags?post=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}