Event Bus Message Form

Create a simple user interface for your team to send events to EventBridge Event Buses. No need anymore to build cumbersome frontends, auth and APIs just to send a simple message to arbitrary Event Bus.

EventBusMessageForm construct is a simple way how to enable anyone in the team to send events to EventBridge Event Buses with pre-defined message shape.

Features

Easily send a message to arbitrary Event Bus
Define arbitrary number of input fields
Resend the message again
Build a custom message shape
Display custom instructions to give a guidance to the users

Preview

Event Bus Message Form App preview

Usage

By default EventBusMessageForm uses the default event bus in the region. You can override it by supplying eventBus or eventBusArn via the props.

import * as cdk from 'aws-cdk-lib'
import { Buttonize, Input } from 'buttonize/cdk'
import { EventBusMessageForm } from 'buttonize/library'
import { Construct } from 'constructs'

export class ExampleStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props)

    Buttonize.init(this, { apiKey: 'YOUR_API_KEY' })

    new EventBusMessageForm(this, 'EventBusMessageForm', {
      name: 'Product cache invalidation panel',
      description:
        'Trigger invalidation of a product in all the caches in the in the company systems',
      submitButtonLabel: 'Invalidate',

      fields: [
        Input.text({
          id: 'id',
          label: 'Product ID'
        }),
        Input.select({
          id: 'reason',
          label: 'Reason',
          options: [
            { label: 'New manual update', value: 'manual_update' },
            { label: 'System bug', value: 'bug' }
          ]
        })
      ],


      source: 'product-service',
      detailType: 'create-invalidation',


      detail: {
        product: {
          pid: '{{id}}'
        },
        metadata: {
          reasonStatement: '{{reason.value}}'
        }
      }
    })
  }
}

{
  "id": "243739s3-25p1-pd31-532f-31pb2abd123p",
  "version": "0",
  "time": "2024-05-15T18:51:30Z",
  "account": "123456789123",
  "region": "eu-central-1",
  "resources": [],
  "source": "product-service",
  "detail-type": "create-invalidation",
  "detail": {
    "metadata": {
      "reasonStatement": "manual_update"
    },
    "product": {
      "pid": "uio"
    }
  }
}

Simplified key-value fields definition

Buttonize uses Input.text component for the input elements.

new EventBusMessageForm(this, 'EventBusMessageForm', {
  source: 'some-source',
  detailType: 'some-detail-type',
  fields: {
    name: 'What is your name?'
  }
  /*
    Same like:
      fields: [
        Input.text({
          id: 'name',
          label: 'What is your name?'
        })
      ]
  */
})

{
  "id": "243739s3-25p1-pd31-532f-31pb2abd123p",
  "version": "0",
  "time": "2024-05-15T18:51:30Z",
  "account": "123456789123",
  "region": "eu-central-1",
  "resources": [],
  "source": "some-source",
  "detail-type": "some-detail-type",
  "detail": {
    "name": "John Doe"
  }
}