> ## Documentation Index
> Fetch the complete documentation index at: https://docs.open-metadata.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Apply UI Changes

# Apply UI Changes

To be able to configure your connector from the UI and test it through there as well you will need to modify a file located within [`openmetadata-ui/src/main/resources/ui/src/utils/`](https://github.com/open-metadata/OpenMetadata/tree/main/openmetadata-ui/src/main/resources/ui/src/utils)

Which file you need to modify depends on the Source Type you are developing a connector for: `{source_type}ServiceUtils.ts`.

The change itself is pretty straightforward since you only need to add the JSON Schema connection you created.

### Example - MySQL

<Tip>
  The file will be shortened and parts of it will be replaced with `...` for readability.
</Tip>

<Steps>
  <Step title="import mysqlConnection from ...">
    * **import mysqlConnection from ...**: Import your connection from the JSON Schema file.
  </Step>

  <Step title="getDatabaseConfig">
    * **getDatabaseConfig**: In the `switch` statement within the `getDatabaseConfig` add a new case for your new Connector.

    For example, if you were developing the `myOwnConnection.json` connector, you could add the following case:

    ```js theme={null}
    case DatabaseServiceType.MyOwn: {
        schema = myOwnConnection;
        break;
    }
    ```

    where

    * **MyOwn**: Would be the Service Type defined on `myOwnConnection.json`
    * **myOWnConnection**: Would be the import startement
  </Step>
</Steps>

## UI Documentation to follow along

If you pay attention when configuring a connector through the UI you will see that there is a follow along documentation to assist you.

In order to add this feature, you need to create a new file `YourConnector.mdx` within

[`openmetadata-ui/src/main/resources/ui/public/locales/en-US/{source_type}`](https://github.com/open-metadata/OpenMetadata/tree/main/openmetadata-ui/src/main/resources/ui/public/locales/en-US), in the proper Source Type.

### Example - MySQL

<Tip>
  The file will be shortened and parts of it will be replaced with `...` for readability.
</Tip>

<Steps>
  <Step title="First we give an overview">
    First we give an overview about the Connector and any requirements or important information the user should know
  </Step>

  <Step title="Within the `## Connection Details`">
    Within the `## Connection Details` section you can see that we use some special notation `$(id="{something}")`.

    This is used to sync the documentation here with the property that the user is configuring at a given time (The "follow along" feature if you will).

    In order to make it work properly you need to set the ID of each section to the property of the JSON Schema.
  </Step>
</Steps>

## Next Step

It is possible that you need to implement a small piece of Java code to make everything work perfectly depending on the Connection Schema.
You can learn more about it in the next step.

<Card title="Create the Java ClassConverter" href="/v1.12.x/developers/contribute/developing-a-new-connector/create-java-class-converter">
  Learn what is the Java ClassConverter and how to create it
</Card>