# Sync Service in Page

**Sync Service** allows data stored in **Local Storage** to be synchronized with the **server‑side database**.\
This feature is commonly used in **mobile applications** to ensure that the same set of data remains consistent across multiple devices and environments.

Sync Service is especially useful when:

* Applications work **offline first**
* Data is captured on mobile devices and synced later
* Multiple users or devices need to share the same dataset

ONEWEB supports **two‑way data synchronization**, meaning data can be synced **from local storage to server** and **from server to local storage**.

***

### Enable Data Synchronization

Data synchronization is configured at the **collection level** when creating or editing a local storage collection.

#### Configuration Options

When creating a collection, enable the following option:

* **Support Two‑ways Data Sync?**

Once enabled, users can configure:

* **Sync Type**
  * **Manual**
  * **Automated**
* Server endpoint and related sync configuration details

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FoxlViqf2fMrc4xUBQy7G%2Fimage.png?alt=media&#x26;token=8eddc36c-ce6b-40e4-8cd1-822557858da2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F90GLO9EYt41aNNPtFcBD%2Fimage.png?alt=media&#x26;token=f7ca6d28-0c5f-461d-97fd-b01df1164c65" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Enable two‑way data sync in collection configuration</em></p>

***

### Sync Types

#### Manual Sync

When **Manual Sync** is selected:

* Synchronization is triggered **explicitly by the user**
* Developers typically provide a **Sync button** on the UI
* Sync is executed using a JavaScript function call

This approach gives full control to users, making it ideal for:

* Limited connectivity scenarios
* User‑controlled data submission workflows

***

#### Automated Sync

When **Automated Sync** is selected:

* Synchronization happens automatically based on system rules
* Used when continuous or background syncing is required

*(Configuration details depend on application design and sync policy.)*

***

### Implement Manual Sync Using JavaScript

For **Manual Sync**, developers can create a button that triggers synchronization logic.

#### Example Flow

1. Add a **Button** on the page (e.g. “Sync Data”)
2. Configure the button to execute a JavaScript function
3. Call the built‑in synchronization function:

```
localStorageSync
```

*Sync table example (manual sync trigger)*

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FRzA2DDcrElgOyuWW2Ylf%2FsyncTable.jpg?alt=media&#x26;token=5226fc16-d6d4-443d-a648-8e3930424627" alt=""><figcaption></figcaption></figure>

*Manual sync result / status view*

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FdlRPhFUIedZygBzz9S9M%2Fimage.png?alt=media&#x26;token=ff0115bb-c18a-4a46-835a-4fe297a4b8b4" alt=""><figcaption></figcaption></figure>

When executed, the function synchronizes local data with the configured server endpoint.

***

### Design Perspective

As part of **Page Designer and Mobile App best practices**:

* Use **two‑way sync** when data must remain consistent across devices
* Prefer **manual sync** when users control data submission
* Prefer **automated sync** when background consistency is required
* Always handle network failure and retry scenarios gracefully

Sync Service enables ONEWEB applications to operate reliably in **offline or distributed environments**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/pages/page-features/sync-service-in-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.