Offline - Create and run an App

This how-to guide is intended to demonstrate the structure of how an offline app is created in Flow Connect.

In a real-world app:

• The component would use connectors to fetch data from connected systems (for example, an ERP).

• The Queue lane would include machine steps to update data back into those systems.

In this example, however, only fake data is used. Work orders are loaded from a CSV file into a component and later displayed in an app, and Sync data is simulated with a simple script. This allows you to clearly see the structure of how Local Data and Sync Data work together in an offline scenario.

Note: Local Data and Sync Data can be used independently.

• Local Data can be used online and offline without a queue lane.

• Queue lanes can be used online and offline without the app, also using Local Data.

• Or they can be combined for a complete online or offline workflow.

For more information, go to Queue lanes and My data.

Local Data

This guide shows how to build a simple app that can be run offline by using Local Data. In the example, work orders are prepared in a CSV file, loaded into a component, and then displayed in an app through a Local Data Resource.

Local Data – Prepare data to be preloaded

1. In the Hub, create a new component called "How to – Offline – work orders" and open it in the Designer.

2. Add a table item to the component and upload the file "How to – offline work orders.csv" provided below.

3. Set the output of the table item to workOrders and add it as an output in the End step.

4. Commit the component.

437B

How to - offline work orders.csv

Design the App

1. In the Hub, create a new app called "How to – Offline" and open it in the Designer.

2. Add a Local Data Resource to the design area.

   • Double-click to open the step.

   • Select the component you created above from the drop-down.

   • Set the target variable to myWorkOrders.

3. Add a User Step in the app.

   • Insert a list selection input control into the step.

   • Set the Local Data Source to myWorkOrders, i.e. the output from the Local Data Resource.

     • Set prompt to "Select work order".

     • Map large row text to {Id}.

     • Map small row text to {Description}.

You can use multiple Local Data Resources in an app.

A Local Data Resource can be used as input to an Inbox. Inboxes are configured in the Start step.

Test the App

1. In the Designer, click the Play button to open the Windows Designer.

2. Since this is the first time you are running the app, no Local Data has been loaded. You will therefore see the message: “You must download local data to run this app.” Click OK to close the message.

3. In the Windows client, go to My Data.

4. Download How to – Offline – work orders. When the download is complete, the Local Data is ready to use.

5. Return to the Designer and press the Play button again. The app now runs, showing the list selection with the work orders from Local Data.

Run the App in Client

To verify that the app works offline, try it directly in a mobile client.

Apps using Local Data run online in all environments, including DEV. However, offline mode is only supported in the TEST and PROD environments.

1. Go to the Designer, commit the app and deploy it to TEST.

2. Start Flow Connect on a mobile device and go to the TEST environment.

3. Go to My Data and download Local Data How to – Offline – work orders.

4. Switch the device to Flight Mode (or otherwise disable the internet connection).

5. Run the app. The list selection with work orders is displayed even though the device is offline.

What you have learned

With this example, you have created a simple offline app that uses Local Data. You prepared work orders in a component, connected them to an app through a Local Data Resource, and tested the app to see the data displayed in a list selection while offline.

Sync Data

Sync data is used to queue items created in the app and automatically synchronise them when the device is online.

How to use Sync Data

1. Open the app "How to – Offline" in the Designer.

2. Click the + icon at the top or bottom left of the design area to add a Queue lane.

3. Move the End step into the Queue lane.

4. Add a Script step in the Queue lane before the End step.

5. In the Script step, add the following FlowScript code and set the output variable to myVariable:

   let myVariable = 1;
   return myVariable;

6. Set the lane crossing by clicking the spanner icon shown between the lanes.

   • Enter the following text (the text added here will be visible to the end user in Sync Work): Crossing 1: {selectedOrder.Id}

7. Commit the app.

Run the app in the client

1. Deploy the app to the TEST environment.

2. In the client, go to My Data → Local data and download How to – Offline – work orders.

3. Run the app to create a item.

4. Go to My Data → Sync data to review the item status.

Run the app offline

1. In the client, first download the Local data for work orders.

2. Put the device in flight mode (no internet connection).

3. Run the app and create a item.

4. Go to My Data → Sync data. The item will remain in Pending since the device is offline.

5. Take the device back online. The item will automatically synchronize, and the status changes to Synced.

What you have learned

You have learned how to extend an offline app using Sync Data. This included adding and configuring a Queue lane and viewing the created items in the Sync Data tab of My Data. Running the app in flight mode demonstrated how items are stored as pending while offline and automatically synchronized when the device reconnects.