> For the complete documentation index, see [llms.txt](https://docs.xibosignage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xibosignage.com/developer/player-control/data-connectors/providing-data-connector-js-via-connector.md).

# Providing Data Connector JS via Connector

This guide will walk you through the steps to create a Data Connector that is supplied via a connector. This feature allows connectors to provide predefined JavaScript. The process is divided into two parts:

### Part 1: Register Connector for Data Source Dropdown

To make your custom connector available as an option in the Data Connector Source Dropdown when adding or editing a dataset, you need to register it with the system.

#### Create Custom Connector

Follow the documentation for creating a custom connector. You can find the detailed guide [here](https://xibosignage.com/docs/developer/extend/connectors).

Be sure to enable it afterward:

{% stepper %}
{% step %}

### Enable your custom connector

* Go to Applications
* Find your custom connector
* Click Configure
* Check the “Enabled?” checkbox
* Click Save
  {% endstep %}
  {% endstepper %}

#### Add Event Listener

Now that you have created your connector, you must register it so that the system knows it provides a Data Connector. This will ensure it appears as an option in the Data Connector Source Dropdown when adding or editing a dataset. We do this by adding a listener that executes a method to provide the connector’s ID and name.

Add a listener to your connector class to register it with the event dispatcher.

{% code title="registerWithDispatcher listener (PHP)" %}

```php
use Xibo\Event\DataConnectorSourceRequestEvent;

public function registerWithDispatcher(EventDispatcherInterface $dispatcher): ConnectorInterface
{
    // Add a listener to handle the Data Connector Source Request event
    $dispatcher->addListener(DataConnectorSourceRequestEvent::$NAME, [$this, 'onDataConnectorSourceRequest']);
    return $this;
}
```

{% endcode %}

#### Implement Event Handler

Add a method to handle the event and provide the connector’s ID and name.

{% code title="onDataConnectorSourceRequest (PHP)" %}

```php
use Xibo\Connector\DataConnectorSourceProviderInterface;

/**
 * Handle the Data Connector Source Request event.
 *
 * @param DataConnectorSourceProviderInterface $event
 * @return void
 */
public function onDataConnectorSourceRequest(DataConnectorSourceProviderInterface $event): void
{
    $event->addDataConnectorSource($this->getSourceName(), $this->getTitle());
}
```

{% endcode %}

Then, it would be added to the form as shown below:

<figure><img src="https://3720620416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU3Fd23vkclHlMLAaxiyE%2Fuploads%2FKzlNQDMMSZs0GXs6gs1A%2Fimage.png?alt=media&amp;token=3a624e6e-8d8b-4ee2-8f15-c9ab701fbbb6" alt=""><figcaption></figcaption></figure>

### Part 2: Extend Connector to Provide JavaScript

Now that you have registered your connector, you need to extend it to provide predefined JavaScript. This will involve adding another listener to respond when the system checks if your connector is the selected one, and if so, provide the JavaScript.

#### Add Another Listener

Add another listener to the registerWithDispatcher() method:

{% code title="registerWithDispatcher with script listener (PHP)" %}

```php
use Xibo\Event\DataConnectorSourceRequestEvent;
use Xibo\Event\DataConnectorScriptRequestEvent;

public function registerWithDispatcher(EventDispatcherInterface $dispatcher): ConnectorInterface
{
    // Add a listener to handle the Data Connector Source Request event
    $dispatcher->addListener(DataConnectorSourceRequestEvent::$NAME, [$this, 'onDataConnectorSourceRequest']);

    // Add a listener to handle the Data Connector Script Request event
    $dispatcher->addListener(DataConnectorScriptRequestEvent::$NAME, [$this, 'onDataConnectorScriptRequest']);

    return $this;
}
```

{% endcode %}

#### Implement New Event Handler

Add a method to handle the event and provide the JavaScript if the connector ID matches; a sample predefined JavaScript snippet is included in the code example below.

{% code title="onDataConnectorScriptRequest (PHP)" %}

```php
use Xibo\Connector\DataConnectorScriptProviderInterface;

/**
 * Handle the Data Connector Script Request event.
 *
 * @param DataConnectorScriptProviderInterface $event
 * @return void
 */
public function onDataConnectorScriptRequest(DataConnectorScriptProviderInterface $event): void
{
    // Ensure the script is only set if the connector ID matches the ID provided from the event
    if ($event->getConnectorId() != $this->getSourceName()) {
        return;
    }

    // Initialize the Data Connector JS
    $script = <<<JS
window.onInit = function() {
    setInterval(function() {
        xiboDC.setData('sensor', (Math.floor(Math.random() * 100) + 1), {
            done: function() {
                xiboDC.notifyHost('sensor');
            }
        });
    }, 1000);
}
JS;

    // Set the script
    $event->setScript($script);
}
```

{% endcode %}

By following these steps, you have successfully registered your custom connector and extended it to provide predefined JavaScript. This enables your Data Connector to appear as an option in the Data Connector Source Dropdown and supply JavaScript when selected.

#### Test Data Connector JS

To check if it’s working:

{% stepper %}
{% step %}

### Create a new dataset

* Go to the DataSets page.
* Create a new dataset.
* Check the “Real time?” checkbox.
  {% endstep %}

{% step %}

### Choose your connector

* A Data Connector Source Dropdown will appear. Choose your custom connector from the selection.
* Save the dataset.
  {% endstep %}

{% step %}

### Open the dataset

* Find the dataset that you just added in the table.
* Open the dataset’s row menu and click “View Data Connector”.
  {% endstep %}

{% step %}

### Verify logs

* You should then see the logs being recorded by the JavaScript from the connector.
  {% endstep %}
  {% endstepper %}

<figure><img src="https://3720620416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU3Fd23vkclHlMLAaxiyE%2Fuploads%2FyuqeLPaT15l0EU6AfhBU%2Fimage.png?alt=media&amp;token=1802d968-9497-4942-aa0a-67f618c0e4d1" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.xibosignage.com/developer/player-control/data-connectors/providing-data-connector-js-via-connector.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.