---
title: "Data Import"
slug: "data-import-widget"
updated: 2026-04-30T06:53:30Z
published: 2026-04-30T06:53:30Z
canonical: "learn.servitly.com/data-import-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Data Import

It renders the product [connection status](/docs/connection-status) within a colored badge.

![Connection Status](https://components-manager.servitly.com/components/ConnectionStatus_1/IMAGES/_screenshot?owner=AG_Servitly)

The filter variants can be applied to *metrics* and *properties* holding the connection status value.

The cloud status is identified by numerical values associated with a label.

| **Value** | **Text Representation** |
| --- | --- |
| *0* | OFFLINE |
| *1* | ONLINE |

Null or empty values are always handled as OFFLINE.

Without this filter, the cloud status value is printed as simple text.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/noFilter(2).png)

# Filter Variants

The set of predefined filter variants that can be used to format values.

#### Data Import `<data-import-widget>`

| *Reconcile Connection Status* | **Name**: reconcileConnectionStatus **Type**: BOOLEAN \| Optional `[reconcileConnectionStatus]="true"` |
| --- | --- |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Data Import'"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<data-import-widget    
    [title]="'Data Import'"
    [reconcileConnectionStatus]="true"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></data-import-widget>
```