Azure Data Studio extensibility

Azure Data Studio has several extensibility mechanisms to customize the user experience and make those customizations available to the entire user community. The core Azure Data Studio platform is built upon Visual Studio Code, so most of the Visual Studio Code extensibility APIs are available. Additionally, we've provided other extensibility points for data management-specific activities.

Some of the key extensibility points are:

• Visual Studio Code extensibility APIs
• Azure Data Studio extension authoring tools
• Manage Dashboard tab panel contributions
• Insights with Action experience
• Azure Data Studio extensibility APIs
• Custom Data Provider APIs

Because the core Azure Data Studio platform is built upon Visual Studio Code, details about the Visual Studio Code extensibility APIs are found in the Extension Authoring and Extension API documentation on the Visual Studio Code website.

For details, see Contribution Points and Context Variables.

For details, see Extensibility APIs.

This section covers the various contribution points defined in the package.json extension manifest.

The IntelliSense is supported inside azuredatastudio.

Contribute a tab, container, and/or insight widget to the dashboard.

Dashboard.tabs creates the tab sections inside the dashboard page. It expects an object or an array of objects.

"dashboard.tabs": [
    {
        "id": "test-tab1",
        "title": "Test 1",
        "description": "The test 1 displays a list of widgets.",
        "when": "connectionProvider == 'MSSQL' && !mssql:iscloud",
        "alwaysShow": true,
        "container": {
            ...
        }
    }
]

Instead of specifying the dashboard container inline (inside the dashboard tab), you can register containers using dashboard.containers. It accepts an object or an array of objects.

"dashboard.containers": [
    {
        "id": "innerTab1",
        "widgets-container": [
            {
                "widget": {
                    "query-data-store-db-insight": {}
                }
            },
            {
                "widget": {
                    "explorer-widget": {}
                }
            }
        ]
    },
    {
        "id": "innerTab2",
        "webview-container": {}
    },
    {
        "id": "innerTab3",
        "grid-container": [
            {
                "name": "widget 1",
                "widget": {
                    "explorer-widget": {}
                },
                "row": 0,
                "col": 0
            },
            {
                "name": "widget 2",
                "widget": {
                    "tasks-widget": {
                        "backup",
                        "restore",
                        "configureDashboard",
                        "newQuery"
                    }
                },
                "row": 0,
                "col": 1
            },
            {
                "name": "Webview 1",
                "webview": {
                    "id": "google"
                },
                "row": 1,
                "col": 0,
                "colspan": 2
            },
            {
                "name": "widget 3",
                "widget": {
                    "explorer-widget": {}
                },

To refer to registered container, specify the ID of the container.

"dashboard.tabs": [
    {
        "id": "test-tab1",
        "title": "Test 1",
        "description": "The test 1 displays a list of widgets.",
        "when": "connectionProvider == 'MSSQL' && !mssql:iscloud",
        "alwaysShow": true,
        "container": {
            "id": "innerTab1"
        }
    }
]

You can register insights using dashboard.insights. This is similar to Tutorial: Build a custom insight widget. It accepts an object or an array of objects.

"dashboard.insights": {
    "id": "my-widget",
    "type": {
        "count": {
            "dataDirection": "vertical",
            "dataType": "number",
            "legendPosition": "none",
            "labelFirstColumn": false,
            "columnsAsLabels": false
        }
    },
    "queryFile": "{your file folder}/activeSession.sql"
}

There are currently four supported container types:

The list of widgets that will be displayed in the container is a flow layout that accepts this list.

"container": {
    "widgets-container": [
        {
            "widget": {
                "query-data-store-db-insight": {}
            }
        },
        {
            "widget": {
                "explorer-widget": {}
            }
        }
    ]
}

The webview is displayed in the entire container. It expects webview ID to be the same is tab ID.

"container": {
    "webview-container": {}
}

The list of widgets or webviews that are displayed in the grid layout. The grid layout is a 2x2 grid layout that accepts this list.

"container": {
    "grid-container": [
        {
            "name": "widget 1",
            "widget": {
                "explorer-widget": {}
            },
            "row": 0,
            "col": 0
        },
        {
            "name": "widget 2",
            "widget": {
                "tasks-widget": {
                    "backup",
                    "restore",
                    "configureDashboard",
                    "newQuery"
                }
            },
            "row": 0,
            "col": 1
        },
        {
            "name": "Webview 1",
            "webview": {
                "id": "google"
            },
            "row": 1,
            "col": 0,
            "colspan": 2
        },
        {
            "name": "widget 3",
            "widget": {
                "explorer-widget": {}
            },
            "row": 0,
            "col": 3,
            "rowspan": 2
        }
    ]
}

The navigation section is displayed in the container. It expects an array of objects.

"container": {
    "nav-section": [
        {
            "id": "innerTab1",
            "title": "inner-tab1",
            "icon": {
                "light": "./icons/tab1Icon.svg",
                "dark": "./icons/tab1Icon_dark.svg"
            },
            "container": {
                ...
            }
        },
        {
            "id": "innerTab2",
            "title": "inner-tab2",
            "icon": {
                "light": "./icons/tab2Icon.svg",
                "dark": "./icons/tab2Icon_dark.svg"
            },
            "container": {
                ...
            }
        }
    ]
}

For general information about context in Visual Studio Code and later Azure Data Studio, see Extensibility.

In Azure Data Studio, we have specific context around database connections available for extensions.

In the dashboard, we provide the following context variables:

• Extensibility APIs
• Download Azure Data Studio