---
schema_version: "1"
id: f9fcc3d34bfd65f079401d3f6b2cff8fd75fb48e5343efb3a28a724efdc6d902
title: Datasource Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_datasource_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_datasource_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 830792de1e440054efc13fe669c4cf47f8e646661d67e365876adf5518f07280
description: For the managed package runtime, this page contains a Datasource LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Datasource Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Datasource LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _Datasource Lightning Web Component_ fetches data from Salesforce using different data source types by providing relevant input data.

## Available c-datasource Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d296727e65">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d296727e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d296727e77">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d296727e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d296727e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e65 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e71 ">
              <p style="margin-bottom:0;">JSON</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e83 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e89 ">
              <p style="margin-bottom:0;">Full JSON dump including type and value for the datasource component to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e65 ">
              <p style="margin-bottom:0;">channel</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e89 ">
              <p style="margin-bottom:0;">To use with pubsub, set this feature to register an event listener. By default, the <em>Datasource Lightning Web Component</em> fires <code>onresult</code> and <code>oninit</code> callbacks.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e65 ">
              <p style="margin-bottom:0;">debug</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e71 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e77 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e89 ">
              <p style="margin-bottom:0;">To enable debug mode, set to true. Prints fetched data inside template and updates JSON for testing.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e65 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e71 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d296727e89 ">
              <p style="margin-bottom:0;">Specifies which theme to use.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-datasource Component

Using the channel name you can listen to `result` and `error` event inside the LWC where datasource is used as below

```
<c-datasource
  theme=""
  channel="testChannel"
  value='{ "type": "query", "value": {"query": "Select Name from Account Limit 1"}}'
  debug="true"
></c-datasource>
```

```
pubsub.register("testChannel", {
    result: this.onResult.bind(this),
    error : this.onError.bind(this)
});
```

The following Vlocity Lightning Web Components extend the _Datasource Lightning Web Component_ with additional features for fetching data from specific data sources:

- _DatasourceQuery Lightning Web Component_
- _DatasourceSearch Lightning Web Component_
- _DatasourceApexRemote Lightning Web Component_
- _DatasourceApexRest Lightning Web Component_
- _DatasourceDataraptor Lightning Web Component_
- _DatasourceIntegrationProcedure Lightning Web Component_
- _DatasourceRest Lightning Web Component_
- _DatasourceSdkComponent Lightning Web Component_

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _Datasource Lightning Web Component_ fetches data from Salesforce using different data source types by providing relevant input data.

## Available c-datasource Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d296727e362">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d296727e368">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d296727e374">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d296727e380">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d296727e386">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e362 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e368 ">
              <p style="margin-bottom:0;">JSON</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e374 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e380 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e386 ">
              <p style="margin-bottom:0;">Full JSON dump including type and value for the datasource component to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e362 ">
              <p style="margin-bottom:0;">channel</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e368 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e374 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e380 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e386 ">
              <p style="margin-bottom:0;">To use with pubsub, set this feature to register an event listener. By default, the <em>Datasource Lightning Web Component</em>fires <code>onresult</code> and <code>oninit</code> callbacks.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e362 ">
              <p style="margin-bottom:0;">debug</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e368 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e374 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e380 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e386 ">
              <p style="margin-bottom:0;">To enable debug mode, set to true. Prints fetched data inside template and updates JSON for testing.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e362 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e368 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e374 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e380 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d296727e386 ">
              <p style="margin-bottom:0;">Specifies which theme to use.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-datasource Component

Using the channel name you can listen to `result` and `error` event inside the LWC where datasource is used as below

```
<c-datasource
  theme=""
  channel="testChannel"
  value='{ "type": "query", "value": {"query": "Select Name from Account Limit 1"}}'
  debug="true"
></c-datasource>
```

```
pubsub.register("testChannel", {
    result: this.onResult.bind(this),
    error : this.onError.bind(this)
});
```

The following Vlocity Lightning Web Components extend the _Datasource Lightning Web Component_ with additional features for fetching data from specific data sources:

- _DatasourceQuery Lightning Web Component_
- _DatasourceSearch Lightning Web Component_
- _DatasourceApexRemote Lightning Web Component_
- _DatasourceDataraptor Lightning Web Component_
- _DatasourceIntegrationProcedure Lightning Web Component_
- _DatasourceRest Lightning Web Component_