Q2Config Extension Tutorial

Note

This guide is intended for internal use only. The information provided here is for Q2 employees and authorized personnel working with Q2Config extensions.

The Caliper SDK can be used to make extensions in Q2Config using the Q2Config request handler.

Prerequisites

  • Access to Q2config and necessary permissions.

  • Understanding of Q2 SDK and available APIs.

  • Basic knowledge of JavaScript, HTML, and CSS.

Creating a Q2Config Extension

Run the following command in your terminal:

q2 create_extension

Enter a New Extension Name when prompted. Next, select the extension type:

What type of extension are you creating?

    1) Online (default)
    2) SSO (Third Party Integration)
    3) Ardent (API)
    4) Q2Console (Backoffice)
    5) Central (Legacy Backoffice)
    6) Adapter
    7) Audit Action
    8) Custom Health Check
    9) Message Bus
    10) Caliper API Custom Endpoint
    11) Q2Config Extension (Client Side Rendered)
    12) Base Extension

Select Option 11 for a Q2Config Extension. Then, provide a Feature Flag for the extension.

Choose a framework:

What type of framework would you like to integrate with?

    1) Continue with no framework
    2) Integrate with React
    3) Integrate with Vue

Select 1 for a minimal implementation, or choose React or Vue as needed.

Once selected, the SDK will generate the extension files, install dependencies, and set up the project structure.

Verifying the Extension

Run the extension locally using:

q2 run

Then, open:

{{base_URL}}/inspect/extension_name

Registering the Extension

To register the extension in Q2Config, install it using:

q2 install

Select the extension, enter a display name (default: extension name), and complete the installation. The extension is recorded in Q2 Config’s extensions_registry table, and a unique extension ID is generated. Save this ID.

Enabling the Extension in Q2Config

Run the server:

q2 run

Open Q2Config, create a new draft, and set dynamicExtensionId in the URL:

?dynamicExtensionId=<extension_id>

Q2Config will reload, displaying the extension under Features in the side navigation menu.

Conclusion

For more details on commands like q2 install, q2 uninstall, and q2 get_installed, refer to:

Q2 Config Extension Commands

You have successfully created and registered a Q2Config extension. Now, you can customize it as per your project needs. Happy coding!