Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout
Documentation
Best Practices
Development
Mobile Data Load
Development

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

Mobile Data Load

  1. Last updated
  2. Save as PDF
Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub

    • Pre-requisites

    You need to be a Mobile Web Developer.

    Loading Data Into Mobile Applications

    This article introduces the Best Practices for loading data on a mobile screen.

    Loading data for a mobile screen is a common scenario. This pattern explains how to retrieve data with the least possible impact on the overall user experience.

    Consider a Home banking mobile application where you need to display the account summary and latest transactions on the ‘AccountOverview’ screen.

    Take the following actions into account:

    • Use Fetch Data actions to take advantage of parallel and asynchronous execution
    • Use the On After Fetch event for post-processing
    • Group server calls in a single server call to decrease request latency and the number of server calls

    The following diagram shows an example of a timeline for events and actions:

    Parallel Data Fetches

    The following diagram shows an example of a timeline for events and actions:

    Timeline for events and actions

    Proceed with the following instructions by order:

    1. Start by running OnInitialize without executing any actions
    2. Execute three parallel asynchronous Fetch Data actions to retrieve the account #2, balance #3 and the list of transactions #1.
    3. OnReady and OnRender #0 are triggered and the screen is now responsive to the user.
    4. GetLocalAccount #2 response arrives and the UI reacts to display the local account information on OnRender #2.
    5. GetBalance #3 response arrives and GetBalanceOnAfterFetch is triggered, after executing the logic a new OnRender #3 is executed and the balance is displayed on the screen.
    6. GetTransactions #1 response arrives and we execute the OnRender #1 and finally display the list of transactions.

    With this approach, the screen quickly responds and reacts to new data. Using UI patterns like Lazy Load while loading data guarantees a smooth user experience.

    Benefits

    The benefits of this approach are the following:

    • You get improved performance with parallel Data Fetch actions
    • By avoiding synchronous server calls, you get non-blocking screens
    • You get a smooth experience as you gradually present new data to the user

    Common pitfall scenario

    Most typical bad practices occur when developers try to use the OnInitialize or OnRender events to retrieve screen information.

    In the following example, the screen rendering is delayed and blocks the user until all actions end. This results in a blocking screen with unnecessary high loading time.

    Common pitfall scenario

    Additional Information

    To learn more about optimizing Data Load, go to Screen and Block Lifecycle Events.