As a user, how can I be sure that my device is synchronized with the JourneyApps Cloud?

General Q&A
1

I want my end users to be able to help troubleshoot, and part of this is ensuring that they have performed a full sync to the back-end. How can I provide an easily readable UI for my end users to support this?

2

One way to do this is to provide a simple UI component that lets users know when they last synced to the Cloud, and optionally, provide health indicators (red/yellow/green) based on the result. Here is a code snippet for retrieving and parsing the time since last sync. It is recommended to put this in the Shared JS code:

function sharedLastSynced() {
  var now = new Date();
    var lastSynced = journey.diagnostics.getSyncStatus().lastFullSync;
    var one_day = 1000*60*60*24;

    // Convert both dates to milliseconds
    var date1_ms = now.getTime();
    var date2_ms = lastSynced.getTime();

    // Calculate the difference in milliseconds
    var difference_ms = date1_ms - date2_ms;
    //take out milliseconds
    difference_ms = difference_ms/1000;
    var seconds = Math.floor(difference_ms % 60);
    difference_ms = difference_ms/60; 
    var minutes = Math.floor(difference_ms % 60);
    difference_ms = difference_ms/60; 
    var hours = Math.floor(difference_ms % 24);  
    var days = Math.floor(difference_ms/24);

    return 'DD: ' + days + ' HH:  ' + hours + ' MM: ' + minutes + ' SS: ' + seconds;
}

The important journey.* function that enables this or other permutations is the diagnostics function in the second line of code. e.g.: .diagnostics.getSyncStatus().lastFullSync is a set of built-in functionality that do not need to be defined elsewhere in code, so this snippet will return valid data as-is.

The format string you choose to return to the end user is up to the developer, the above is just an example.

A complimentary xml component to display this data might look as follows:

<list>
        <list-item>
            <pills list="$:getPills()" />
            <header>{$:t('t.logged_in')} | {$:user.name}</header> 
            <content>{$:t('t.mine')} | {$:user.name}</content> 
            <footer>{$:sharedLastSynced()}</footer>
            <accent label="Last Synced" color="$:sharedSyncColor()" />
        </list-item> 
</list>

And supporting functions to support the styling:

function sharedSyncColor() {
    var now = new Date();
    var lastSynced = journey.diagnostics.getSyncStatus().lastFullSync;
    var one_day = 1000*60*60*24;

    // Convert both dates to milliseconds
    var date1_ms = now.getTime();
    var date2_ms = lastSynced.getTime();

    // Calculate the difference in milliseconds
    var difference_ms = date1_ms - date2_ms;
    var alertInterval = 60*60*1000;
    if(difference_ms > alertInterval) {
        return 'negative';
    } else {
        return 'positive';
    }
}

And the pill color function:

function getPills() {
    var _color = sharedSyncColor();
    var _label;
    if (_color == 'positive') {
        _label = 'Recently Synced';
    } else {
        _label = 'Sync Required';
    }
    return [
        {label: _label, color: _color}
    ];
}
1 Like