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, three types of sources are supported: MSSQL, MySQL, and Google Sheets.\

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. Name your Source
  4. Select the MSSQL type Source
  5. Add the Object Configuration for your Source and click Save
 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. Name your Source
  4. Select the My SQL type Source
  5. Add the Object Configuration for your Source and click Save
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. Name your Source
  4. Select the Google Sheets type Source
  5. Add the Object Configuration for your Source and click Save
1
2
3
4
5
6
{
    "client_id": "[Google Sheets Client ID]",
    "client_email": "[Google Sheets Client Email]",
    "private_key": "[Google Sheets API Private Key]",
    "spreadsheet_id": "[Google Sheets Spreadsheet ID]"
}

Note

Make sure the Google Sheet share setting of the Sheet you want to use is set to "Anyone with the Link".

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. 

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