Skip to content
ByteChef

Customize Component

Connector Icon and Category

  1. Find an Icon:

    • Search for a suitable user interface icon for your component in .svg format.

  2. Save the Icon:

    • Place the icon in the following directory: server/libs/modules/components/newcomponent/src/main/resources/assets/newcomponent.svg.

  3. Choose a Category:

    • Select a category for your component. Available categories can be found in ComponentCategory.

  4. Update Component Handler:

    • In NewComponentComponentHandler, override the modifyComponent(ModifiableComponentDefinition modifiableComponentDefinition) method: 
      @Override
      public ModifiableComponentDefinition modifyComponent(ModifiableComponentDefinition modifiableComponentDefinition) {
          return modifiableComponentDefinition
                .icon("path:assets/newcomponent.svg")
                .categories(ComponentCategory.HELPERS);
      }

Connection

If your component requires custom authentication parameters, override the modifyConnection(ModifiableConnectionDefinition modifiableConnectionDefinition) method in NewComponentComponentHandler.

Refer to examples like ShopifyComponentHandler, DiscordComponentHandler, or PipelinerComponentHandler for guidance.

Action

If some actions require properties not specified in the OpenAPI schema, override the modifyActions(ModifiableActionDefinition... actionDefinitions) method in NewComponentComponentHandler.

Refer to examples like DiscordComponentHandler or ClickupComponentHandler.

Dynamic options

For parameters that require dynamic options, override the modifyProperty(ActionDefinition actionDefinition, ModifiableProperty<?> modifiableProperty) method in NewComponentComponentHandler.

Check examples such as ShopifyComponentHandler for implementation details.