Skip to content

Data Variables

Introduction

Erizos Studio UI Builder supports external database that help with organizing and structuring data. It allows users to add, edit, and manage different database sources. Currently, five types of sources are supported: MSSQL, MySQL, Google Sheets, Google Firebase, and SpreadSheet File.

To access Sources, click on the Database icon, under Sources click Add/Inspect Data Variables.

Access Data Variables

In the updated interface, the process begins with creating a Data Variable first.
In the opened Data Variables modal, you can:

  • Create a new variable or choose an existing one.
  • Then, assign a Data Feed to the variable.
  • If a suitable data feed does not exist, you will be prompted to create one.- - During this creation process, if a Data Source is also missing, you can create it directly from the same interface as shown in the .gif below.

Create Data Source

Adding a MSSQL Source

  1. Click the Database icon
  2. Under Sources, click the Add Sources Icon.
  3. Select the MSSQL type Source.
  4. Name your Source.
  5. Add the Object Configuration for your Source and click Create.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "user": "[MSSQL User]",
    "password": "[MSSQL Password]",
    "database": "[Database Name]",
    "server": "[Server Address]",
    "port": 1433,
    "options": {
        "trustServerCertificate": true
    }
}

Adding a MySQL Source

  1. Click the Database icon
  2. Under Sources, click the (Add Sources icon).
  3. Select the My SQL type Source.
  4. Name your Source.
  5. Add the Object Configuration for your Source and click Create.
1
2
3
4
5
6
7
{
    "host": "[MySQL Host]",
    "port": 3306,
    "user": "[MySQL User]",
    "password": "[MySQL Password]",
    "database": "[Database Name]"
}

Adding a Google Sheet Source

  1. Click the Database icon
  2. Under Sources, click the
  3. Select the Google Sheets type Source.
  4. Name your Source.
  5. Add the Object Configuration for your Source and click Create.
1
2
3
{
  "apiKey": ""
}

Error

If you encounter the error Invalid Google Sheet Format when selecting Google Sheet as a Data Feed source, it usually means the file is not in the proper Google Sheets format.

Invalid Google Sheet Format

To fix this:

  1. Open the Google Sheets link.
  2. Go to File → Save as Google Sheets.

Access Sources

After saving, you can add it successfully as a Data Feed.

Note

If no apiKey is provided, make sure the Google Sheet share setting of the Sheet you want to use is set to "Anyone with the Link".

Adding a SpreadSheet Source

  1. Click the Database icon
  2. Under Sources, click the
  3. Select the SpreadSheet File type Source.
  4. Name your Source.
  5. Type the Name, click Create.
1
2
{
}

Adding a Google Firebase Source

  1. Click the Database icon
  2. Under Sources, click the
  3. Select the Google Firebase type Source.
  4. Name your Source.
  5. Add the Object Configuration for your Source and click Save.
1
2
3
4
5
6
7
8
9
{
    "apiKey": "",
  "authDomain": "",
  "databaseURL": "",
  "projectId": "",
  "storageBucket": "",
  "messagingSenderId": "",
  "appId": ""
}

Accessing Sources

The access Sources, users just need to call the function DataService and provide the name of the Source and the Query as Parameters.

In the Example below, we populate a TextBox when a button is clicked. The button fetches the data from our Source. We have a source named 'MySource' as the first Parameter, the second Parameter is the Query we want to run in our database. 

1
2
3
4
5
button1.onClick = async() => {
    const result = await DataService.query('MySource', 'A2:A6');
    text1.value = result;
    console.log(result);
}