# Extensions API Reference

{% hint style="info" %}
Extensions are in development. They will allow you to customize the editor with additional functionality and third party tools.
{% endhint %}

## Interface `com.chartsql.studio.model.Extension`

Every Extension entry point is a single class file that implements `com.chartsql.studio.model.Extension` interface

```cfscript
/**
*/
component accessors="true" implements="com.chartsql.studio.model.Extension" {

	property name="ChartSQLStudio";

	public void function onRequest(
		required struct context
	){

	}

	public void function onResult(
		required struct requestContext,
		required struct result
	){

	}

	public void function onRender(
		required struct requestContext,
		required struct result,
		required object doc
	){

	}

}

```

## Extension Lifecycle Methods

Your Extension class has "lifecycle methods" that are called at different points in the request and rendering lifecycle. You use these lifecycle methods to intercept and implement UI features.

### onRequest

Called at the start of a user HTTP request, the lifecycle method `onRequest()` allows you to inspect and inject data into the request context object prior to any work performed by ChartSQL Studio.

#### onRequest Function Arguments

| Name    | Type   | Description                                                         |
| ------- | ------ | ------------------------------------------------------------------- |
| context | struct | The request context structure that contains all of the HTTP request |

### onResult

Called after ChartSQL Studio has finished processing the request but before it has rendered the HTML output. The `onResult()`lifecycle method allows you to change the ChartSQL Studio's data structure output that will be used by the rendering.

#### onResult Function Arguments

| Name           | Type   | Description                                                                            |
| -------------- | ------ | -------------------------------------------------------------------------------------- |
| requestContext | struct | The request context structure that contains all of the HTTP request                    |
| result         | struct | The result of any controller processing for the request before rendering is completed. |
|                |        |                                                                                        |

### onRender

Called after ChartSQL Studio has rendered the next response. The `onRender()` lifecycle methods allows you to manipulate the HTML output that will be sent to the user.

#### onRender Function Arguments

<table><thead><tr><th width="294">Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>requestContext</td><td>struct</td><td>The request context structure that contains all of the HTTP request</td></tr><tr><td>result</td><td>struct</td><td>The result of any controller processing for the request before rendering is completed.</td></tr><tr><td>doc</td><td>Jsoup Object</td><td>Jsoup document object model (DOM) that can be used to manipulate the content that will be returned to the UI</td></tr></tbody></table>

## Remote HTTP Methods

You can add methods to your extension that can be called from the UI via HTML forms or HTTP POST. Remote HTTP methods allow you to wire up buttons and forms that communicate with the backend ChartSQLStudio process.

Defining a HTTP method requires annotating a function in your extension with the `remote` keyword.

```cfscript

remote struct function echo(
    required string foo,
    required string bazz
){
    return arguments;
}

```

You will then be able to POST to the function with HTML forms from the UI:

{% code fullWidth="false" %}

```html
<form action="/studio/extensions/chartsql.sample.Sample/runRemote?method=echo" method="POST">
    <input type="hidden" name="params.foo" value="bar">
    <input type="hidden" name="params.bazz" value="buzz">
</form>
```

{% endcode %}

## Class `InfoPanelView`

`com.chartsql.studio.model.InfoPanelView`

InfoPanelViews allow you to define additional panels that show up in the info area of the editor. Your Extension may instantiate instances of InfoPanelViews.

### Constructor Arguments

<table data-full-width="false"><thead><tr><th width="177">Name</th><th data-type="checkbox">Required?</th><th width="257">Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>ChartSQLStudio</td><td>true</td><td>n/a</td><td>ChartSQLStudio</td><td>The instance of the ChartSQLStudio editor singleton.</td></tr><tr><td>Name</td><td>true</td><td>n/a</td><td>string</td><td>The name for your InfoPanelView which shows up in the tab name in the UI.</td></tr><tr><td>IconClass</td><td>true</td><td>n/a</td><td>string</td><td>The CSS class name for the icon to use for the tab. See <a href="https://tabler.io/icons">https://tabler.io/icons</a></td></tr><tr><td>content</td><td>false</td><td>""</td><td>string</td><td>The HTML content for the body of the info panel view. You can set this on creation or update later.</td></tr></tbody></table>

### Property Summary

<table><thead><tr><th>Name</th><th>Type</th><th data-type="checkbox">ReadOnly?</th><th>Description</th></tr></thead><tbody><tr><td>Name</td><td>string</td><td>false</td><td>The name for your InfoPanelView which shows up in the tab name in the UI.</td></tr><tr><td>Link</td><td>string</td><td>true</td><td>The URL link to the InfoPanelView that is rendered in the UI. You do not set this directly, it will be calculated.</td></tr><tr><td>IconClass</td><td>string</td><td>false</td><td>The CSS class name for the icon to use for the tab. See <a href="https://tabler.io/icons">https://tabler.io/icons</a></td></tr><tr><td>Content</td><td>string</td><td>false</td><td>The HTML content for the body of the info panel view. You can set this on creation or update later.</td></tr></tbody></table>

## Class `FileBrowserView`

`com.chartsql.studio.model.FileBrowserView`

FileBrowserViews allow you to define additional views hat show up in the file broser area of the editor. Your Extension may instantiate instances of FileBrowserView

### Constructor Arguments

<table data-full-width="false"><thead><tr><th width="177">Name</th><th data-type="checkbox">Required?</th><th width="112">Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>ChartSQLStudio</td><td>true</td><td>n/a</td><td>ChartSQLStudio</td><td>The instance of the ChartSQLStudio editor singleton.</td></tr><tr><td>Name</td><td>true</td><td>n/a</td><td>string</td><td>The name for your FileBrowserView which shows up in the tab name in the UI.</td></tr><tr><td>IconClass</td><td>true</td><td>n/a</td><td>string</td><td>The CSS class name for the icon to use for the tab. See <a href="https://tabler.io/icons">https://tabler.io/icons</a></td></tr><tr><td>content</td><td>false</td><td>""</td><td>string</td><td>The HTML content for the body of the FileBrowserView. You can set this on creation or update later.</td></tr></tbody></table>

### Property Summary

<table><thead><tr><th>Name</th><th>Type</th><th data-type="checkbox">ReadOnly?</th><th>Description</th></tr></thead><tbody><tr><td>Name</td><td>string</td><td>false</td><td>The name for your FileBrowserView which shows up in the tab name in the UI.</td></tr><tr><td>Link</td><td>string</td><td>true</td><td>The URL link to the FileBrowserView that is rendered in the UI. You do not set this directly, it will be calculated.</td></tr><tr><td>IconClass</td><td>string</td><td>false</td><td>The CSS class name for the icon to use for the tab. See <a href="https://tabler.io/icons">https://tabler.io/icons</a></td></tr><tr><td>Content</td><td>string</td><td>false</td><td>The HTML content for the body of the FileBrowserView. You can set this on creation or update later.</td></tr></tbody></table>