Skip to content

Data Sources

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 Sources

Access Sources

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 Add Sources Icon.
  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": ""
}

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 Add Sources Icon.
  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 Add Sources Icon.
  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);
}